I have hooks with missing dependencies, but running eslint does not complain about them. My .eslintrc.js looks like:
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:#typescript-eslint/recommended',
'plugin:react-hooks/recommended',
],
parser: '#typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 'latest',
sourceType: 'module',
},
settings: {
react: {
version: 'detect',
},
},
plugins: ['react', '#typescript-eslint', 'react-hooks'],
rules: {
'#typescript-eslint/ban-ts-ignore': 'off',
'#typescript-eslint/no-non-null-assertion': 'off',
'#typescript-eslint/no-empty-function': 'off',
'no-mixed-spaces-and-tabs': 'off',
'#typescript-eslint/no-explicit-any': 'off',
'#typescript-eslint/ban-ts-comment': 'off',
'react/prop-types': 'off',
},
};
How do I get the missing hook dependency warnings?
Related
When I try to set the property "files" in the ESLint Config file ".eslintrc.cjs" I get the following error from the EsLint VsCode Extension:
ESLint: ESLint configuration in client.eslintrc.cjs is invalid: - Unexpected top-level property "files". . Please see the 'ESLint' output channel for details.
Every time I ran npm run lint (I include this script in my package.json file "lint": "eslint ./**",), ESlint not only look for errors in .jsx files but also in files like .svg, .png, etc. So, I am trying to add the following property files: ['src/**/*.jsx'], to my ESLint Config File to avoid checking the files outside the src directory and the files that are not .jsx.
This is my .eslintrc.cjs file:
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: [
'airbnb',
'airbnb/hooks',
'plugin:react/recommended',
],
overrides: [
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
plugins: [
'react',
],
files: ['src/**/*.jsx'],
rules: {
'react/jsx-uses-react': 'off',
'react/react-in-jsx-scope': 'off',
'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
'no-use-before-define': ['error', { functions: false }],
'no-param-reassign': ['error', { props: false }],
},
};
You should use overrides to include files, e.g.,
module.exports = {
env: {
browser: true,
es2021: true,
},
extends: ['airbnb', 'airbnb/hooks', 'plugin:react/recommended'],
overrides: [
{
plugins: ['react'],
files: ['src/**/*.jsx'],
rules: {
'react/jsx-uses-react': 'off',
'react/react-in-jsx-scope': 'off',
'import/no-extraneous-dependencies': [
'error',
{ devDependencies: true },
],
'no-use-before-define': ['error', { functions: false }],
'no-param-reassign': ['error', { props: false }],
},
},
],
parserOptions: {
ecmaVersion: 'latest',
sourceType: 'module',
},
}
See documentation here https://eslint.org/docs/latest/use/configure/configuration-files#how-do-overrides-work.
I recently updated to Material UI5 and had to make a whole bunch of changes in the codebase. I did a lot of this using the VSCode search and replace function.
Now, whenever I build my app, I get a whole string of warnings saying that there is an unused import, even though all of these lines have been removed. (Note: This is all on the dev build)
If I go into the file that is generating the warning and save it (even though there are no changes to be saved) then it seems that webpack recognizes the change and stops issuing the warning.
Is there any way to somehow clear the cache or get webpack to recognize that these warnings aren't current?
File:
Warning:
edit: .eslintrc.js
module.exports = {
parser: '#typescript-eslint/parser',
root: true,
env: {
es6: true,
node: true,
browser: true,
},
parserOptions: {
ecmaVersion: 6,
sourceType: 'module',
tsconfigRootDir: __dirname,
project: './tsconfig.eslint.json',
ecmaFeatures: {
jsx: true,
},
},
plugins: ['react', 'react-hooks', '#typescript-eslint', 'cypress'],
rules: {
'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
'react-hooks/exhaustive-deps': 'warn', // Checks effect dependencies
'no-use-before-define': 'off',
'#typescript-eslint/no-use-before-define': ['error'],
'#typescript-eslint/no-namespace': ['off'],
'#typescript-eslint/no-explicit-any': ['off'], // Maybe a good rule, but it's a pain in the ass
},
settings: {
react: {
version: 'detect', // Tells eslint-plugin-react to automatically detect the version of React to use
},
},
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:#typescript-eslint/eslint-recommended',
'plugin:#typescript-eslint/recommended',
// 'plugin:prettier/recommended',
],
overrides: [
{
files: ['**/*.js', '**/*.jsx'],
rules: {
'#typescript-eslint/no-var-requires': 'off',
'#typescript-eslint/eslint-recommended': 'off',
'#typescript-eslint/recommended': 'off',
'#typescript-eslint/explicit-module-boundary-types': 'off',
},
},
{
files: ['**/styles.ts'],
rules: {
'#typescript-eslint/explicit-module-boundary-types': 'off',
'#typescript-eslint/no-unused-vars': 'off',
},
},
],
}
Case 1 (PrintWidth):
What happens in this case is the following, I have configured printWidth in the .prettierrc file, in the vscode settigns.json and in the .eslintrc.js. However, when reaching the max-length, which in this case is 120, the prettier does not apply its styling.
Case 2 (.prettierignore)
The prettier simply ignores this file and does not apply the rules it contains.
Desired resolution for Case 1:
When eslint verifies that the code is at the limit of the line size, which in this case is 120 and greater than the limit, it "breaks" the code, such as, for example, lowering the properties of the JSX components etc.
Desired resolution for Case 2:
That the prettier can use the .prettierignore file
MY VSCODE SETTINGS:
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.rulers": [120, 120]
MY PRETTIER CONFIG:
{
"printWidth": 120,
"tabWidth": 2,
"useTabs": true,
"semi": true,
"singleQuote": true,
"jsxSingleQuote": true,
"jsxBracketSameLine": false,
"bracketSpacing": true,
"arrowParens": "always",
"endOfLine": "lf",
"quoteProps": "as-needed",
"trailingComma": "none"
}
MY ESLINTRC CONFIG:
module.exports = {
env: {
browser: true,
es2021: true
},
extends: [
'plugin:react/recommended',
'plugin:react-hooks/recommended',
'plugin:prettier/recommended',
'plugin:import/errors',
'plugin:import/warnings',
'react-app',
'react-app/jest',
'airbnb'
],
parser: '#typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true
},
ecmaVersion: 5,
sourceType: 'module'
},
plugins: ['react', 'react-hooks', 'prefer-arrow', 'prettier', '#typescript-eslint'],
settings: {
react: {
version: 'detect'
},
'import/resolver': {
node: {
paths: ['src'],
moduleDirectory: ['node_modules', 'src/'],
extensions: ['.js', '.jsx', '.ts', '.tsx']
}
}
},
overrides: [
{
files: ['**/*.js', '**/*.jsx', '**/*.ts', '**/*.tsx'],
plugins: ['#typescript-eslint'],
rules: {
'no-use-before-define': 'off',
'#typescript-eslint/no-use-before-define': ['error']
}
}
],
ignorePatterns: ['src/assets/images/*', 'src/assets/fonts/*'],
rules: {
'#typescript-eslint/no-unused-vars': ['error'],
'prettier/prettier': 'error',
'arrow-body-style': 'off',
'arrow-parens': ['error', 'always'],
'object-curly-newline': 'off',
'no-tabs': 0,
indent: [2, 'tab', { SwitchCase: 1 }],
'comma-dangle': ['error', 'never'],
'max-len': ['error', { code: 120 }],
'jsx-quotes': ['error', 'prefer-single'],
'implicit-arrow-linebreak': 'off',
'operator-linebreak': [
'error',
'after',
{
overrides: {
':': 'before'
}
}
],
'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
'react-hooks/exhaustive-deps': 'warn', // Checks effect,
'react/jsx-indent-props': 'off',
'react/react-in-jsx-scope': 'off',
'react/jsx-props-no-spreading': 'off',
'react/jsx-boolean-value': 'off',
'react/jsx-indent': ['error', 'tab', { checkAttributes: true, indentLogicalExpressions: true }],
'react/jsx-filename-extension': [1, { extensions: ['.js', '.jsx', '.ts', '.tsx'] }],
'react/jsx-wrap-multilines': [
'error',
{
declaration: 'parens-new-line',
assignment: 'parens-new-line',
return: 'parens-new-line',
arrow: 'parens-new-line',
condition: 'parens-new-line',
logical: 'parens-new-line',
prop: 'parens-new-line'
}
],
'prefer-arrow-callback': 'off',
'prefer-arrow/prefer-arrow-functions': [
'error',
{
disallowPrototype: true,
singleReturnOnly: false,
classPropertiesAllowed: false
}
],
'import/prefer-default-export': 'off',
'import/extensions': [
'error',
'ignorePackages',
{
js: 'never',
jsx: 'never',
ts: 'never',
tsx: 'never'
}
]
}
};
I'm using react with the simple-import-sort eslint plugin. I think my .eslintrc.js is right, but I'm not able to make this specific plugin work. I get the following errors at the first line of my files:
Definition for rule 'simple-import-sort/sort' was not found simple-import-sort/sort
Here's my config:
module.exports = {
parser: '#typescript-eslint/parser',
extends: [
'eslint:recommended',
'airbnb-typescript',
'airbnb/hooks',
'plugin:#typescript-eslint/recommended',
'plugin:#typescript-eslint/recommended-requiring-type-checking',
'plugin:import/recommended',
'plugin:jest/recommended',
'plugin:jsx-a11y/recommended',
'plugin:prettier/recommended',
'plugin:react/recommended',
'prettier',
'prettier/#typescript-eslint',
'prettier/react',
],
parserOptions: {
ecmaVersion: 2018,
sourceType: 'module',
ecmaFeatures: {
jsx: true,
},
project: './tsconfig.json',
},
ignorePatterns: ['*.js'],
plugins: ['react', 'prettier', 'import', 'simple-import-sort'],
rules: {
'prettier/prettier': ['error'],
'no-underscore-dangle': 'off',
'no-async-promise-executor': 'warn',
'no-unused-vars': 'error',
'object-shorthand': ["error", "always"],
'react/destructuring-assignment': ['off', 'never'],
'react/jsx-filename-extension': ['warn', { extensions: ['.tsx', '.js', '.jsx'] }],
'react/jsx-uses-react': 'error',
'react/jsx-uses-vars': 'error',
'react/no-unescaped-entities': 'off',
'react/jsx-no-undef': ['error', { allowGlobals: true }],
'react/jsx-props-no-spreading': 'warn',
'react/prop-types': 'off',
'react-hooks/exhaustive-deps': 'off',
'sort-imports': 'off',
'simple-import-sort/sort': 'error',
'import/order': 'off',
'import/prefer-default-export': 'off',
'import/extensions': 'off',
'import/no-extraneous-dependencies': ['error', { devDependencies: true }],
// '#typescript-eslint/camelcase': ['error', { properties: 'never' }],
'#typescript-eslint/no-var-requires': 'off',
'#typescript-eslint/explicit-function-return-type': 'off',
'jsx-a11y/anchor-is-valid': 'off',
'jsx-a11y/no-static-element-interactions': 'off',
},
};
It may be that you're using v6.
It looks like v6 doesn't have a simple-import-sort/sort rule, see usage in the README. This was a change from v5 on Nov 15.
You probably need to make the following change:
- 'simple-import-sort/sort': 'error',
+ 'simple-import-sort/imports': 'error',
Form Version 6.0.0 of eslint-plugin-simple-import-sort:
Renamed: simple-import-sort/sort is now called
simple-import-sort/imports.
Added: simple-import-sort/exports for
sorting (some) exports.
{
"rules": {
"simple-import-sort/imports": "error",
"simple-import-sort/exports": "error"
}
}
I also had to add "simple-import-sort" to "plugins" in .eslintrc:
{
"plugins": ["simple-import-sort"]
}
and then it got rid of the errors.
I am getting this warning from eslint:
X is defined but never used for every type imported from react or react-native. An example with FC and ViewProps (See image below).
Here is my .eslintrc.js:
module.exports = {
env: {
browser: true,
es6: true,
node: true,
},
extends: [
'airbnb',
"plugin:import/typescript",
],
parser: "#typescript-eslint/parser",
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
},
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2018,
sourceType: 'module',
},
plugins: [
'react',
],
rules: {
"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
"linebreak-style": 0,
"jsx-a11y/label-has-associated-control": ["error", {
"required": {
"some": ["nesting", "id"]
}
}],
"jsx-a11y/label-has-for": ["error", {
"required": {
"some": ["nesting", "id"]
}
}],
"react/jsx-props-no-spreading": [1, {
"custom": "ignore"
}],
},
};
Solved the same issue adding 'plugin:#typescript-eslint/recommended' to 'extends' array in .eslintrc
also, if you'll need it, I have "plugin:react/recommended" and "airbnb" in my extends