After @typescript-eslint upgrade es-lint started throwing the following lint errors:
28:15 error 'token' is defined but never used @typescript-eslint/no-unused-vars`
In source code:
23 interface IInterface {
...
>> 27 func1: (token: string) => void
>> 28 fun2: (token: string | null) => void
29 }
It looks like started linting typescript interfaces not code.
eslintrc.js:
module.exports = {
env: {
browser: true,
es6: true,
node: true,
},
extends: [
'airbnb-typescript',
'airbnb/hooks',
'plugin:@typescript-eslint/eslint-recommended',
'plugin:@typescript-eslint/recommended',
'plugin:@typescript-eslint/recommended-requiring-type-checking',
'prettier',
'airbnb-typescript-prettier',
],
globals: {
Atomics: 'readonly',
SharedArrayBuffer: 'readonly',
},
parser: '@typescript-eslint/parser',
parserOptions: {
ecmaFeatures: {
jsx: true,
},
ecmaVersion: 2018,
sourceType: 'module',
project: './tsconfig.json',
},
plugins: ['react', '@typescript-eslint', 'eslint-plugin-no-inline-styles'],
rules: {
'no-console': ['error', { allow: ['error'] }],
'no-underscore-dangle': ['error', { allow: ['__typename'] }],
'object-curly-newline': 0,
'max-len': ['error', { code: 120, ignorePattern: '^import|d="' }],
'no-inline-styles/no-inline-styles': 2,
'import/prefer-default-export': 'off',
'import/no-unresolved': 0,
'import/no-extraneous-dependencies': 0,
'react/no-did-update-set-state': 1,
'react/jsx-props-no-spreading': 1,
'react/jsx-no-bind': [
'error',
{
allowArrowFunctions: false,
ignoreRefs: true,
},
],
'react/state-in-constructor': 0,
'react/prop-types': 0,
'react/destructuring-assignment': 0,
'react-hooks/exhaustive-deps': 0,
'react/jsx-filename-extension': [2, { extensions: ['.tsx'] }],
'jsx-a11y/label-has-associated-control': 0,
'jsx-a11y/anchor-is-valid': 0,
'jsx-a11y/click-events-have-key-events': 0,
'jsx-a11y/no-static-element-interactions': 0,
'@typescript-eslint/no-unnecessary-type-assertion': 0,
'@typescript-eslint/no-misused-promises': 0,
'@typescript-eslint/require-await': 'off',
'@typescript-eslint/explicit-function-return-type': 0,
'@typescript-eslint/member-delimiter-style': 0,
'@typescript-eslint/semi': ['error', 'never'],
'@typescript-eslint/no-non-null-assertion': ['error'],
'@typescript-eslint/interface-name-prefix': ['error', { prefixWithI: 'always', allowUnderscorePrefix: false }],
},
globals: {
Cypress: 'readonly',
describe: 'readonly',
it: 'readonly',
before: 'readonly',
beforeEach: 'readonly',
assert: 'readonly',
cy: 'readonly',
expect: 'readonly',
},
settings: {
react: {
pragma: 'React',
version: 'detect',
},
},
}
package.json:
{
"name": "project",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
...
"test:lint": "eslint . --ext .tsx,.ts",
"test:lint-quiet": "eslint . --ext .tsx,.ts --quiet",
"test:lint-fix": "eslint . --ext .tsx,.ts --fix",
},
"devDependencies": {
"@babel/core": "^7.10.5",
"@cypress/webpack-preprocessor": "^5.4.1",
"@graphql-codegen/cli": "^1.8.3",
"@graphql-codegen/fragment-matcher": "^1.8.3",
"@percy/cypress": "^2.3.3",
"@storybook/addon-actions": "6.1.15",
"@storybook/addon-links": "6.1.15",
"@storybook/addon-storysource": "6.1.15",
"@storybook/addon-viewport": "6.1.15",
"@storybook/addons": "6.1.15",
"@storybook/preset-ant-design": "^0.0.1",
"@storybook/preset-typescript": "^3.0.0",
"@storybook/react": "^6.1.15",
"@types/apollo-upload-client": "^8.1.1",
"@types/classnames": "^2.2.7",
"@types/history": "^4.7.2",
"@types/lodash": "^4.14.126",
"@types/node": "^12.0.0",
"@types/react": "^16.8.17",
"@types/react-dom": "^16.8.4",
"@types/react-router": "^5.0.0",
"@types/react-sortable-hoc": "^0.6.5",
"@types/react-virtualized": "^9.21.1",
"@types/webpack": "^4.4.31",
"@types/webpack-env": "1.13.9",
"@typescript-eslint/eslint-plugin": "^2.26.0",
"@typescript-eslint/parser": "^4.15.0",
"add": "^2.0.6",
"apollo": "^2.27.4",
"babel-loader": "^8.1.0",
"case-sensitive-paths-webpack-plugin": "^2.2.0",
"copy-webpack-plugin": "^5.0.4",
"css-loader": "^2.1.1",
"cypress-cucumber-preprocessor": "^2.0.1",
"cypress-file-upload": "^4.1.1",
"dotenv": "^8.0.0",
"eslint": "^7.19.0",
"eslint-config-airbnb-typescript": "^7.2.0",
"eslint-config-airbnb-typescript-prettier": "^2.1.1",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-no-inline-styles": "^1.0.5",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.19.0",
"eslint-plugin-react-hooks": "^3.0.0",
"file-loader": "^3.0.1",
"fork-ts-checker-webpack-plugin": "^1.3.2",
"html-loader": "^1.0.0-alpha.0",
"html-webpack-plugin": "^4.0.0-alpha",
"husky": "^2.2.0",
"lerna": "^3.15.0",
"less": "^3.9.0",
"less-loader": "^5.0.0",
"lint-staged": "^8.1.6",
"mini-css-extract-plugin": "^0.6.0",
"optimize-css-assets-webpack-plugin": "^5.0.1",
"postcss": "^7.0.16",
"postcss-apply": "^0.12.0",
"postcss-browser-reporter": "^0.6.0",
"postcss-import": "^12.0.1",
"postcss-loader": "^3.0.0",
"postcss-preset-env": "^6.6.0",
"postcss-reporter": "^6.0.1",
"postcss-url": "^8.0.0",
"prettier": "^2.0.5",
"style-loader": "^0.23.1",
"terser-webpack-plugin": "^1.2.3",
"ts-import-plugin": "^1.6.5",
"ts-loader": "^6.2.1",
"typescript": "^4.1.4",
"url-loader": "^1.1.2",
"webpack": "^4.43.0",
"webpack-cleanup-plugin": "^0.5.1",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.11.0",
"yarn": "^1.19.1"
},
"dependencies": {
"@ant-design/compatible": "^1.0.5",
"@ant-design/icons": "^4.2.2",
"@sentry/browser": "^5.6.3",
"@types/chart.js": "^2.9.25",
"@types/moment-timezone": "^0.5.13",
"@types/react-image-crop": "^8.1.2",
"@types/react-responsive": "^8.0.2",
"@types/react-router-dom": "^5.1.0",
"@types/styled-components": "^5.1.2",
"antd": "^4.6.1",
"apollo-boost": "^0.4.9",
"apollo-upload-client": "^10.0.1",
"array-move": "^3.0.1",
"axios": "^0.18.0",
"chart.js": "^2.9.3",
"classnames": "^2.2.6",
"copy-to-clipboard": "^3.2.0",
"create-file-webpack": "^1.0.2",
"csstype": "^3.0.3",
"cypress": "^5.0.0",
"flag-icon-css": "^3.5.0",
"graphql": "^14.5.8",
"graphql-tag": "^2.10.3",
"ibantools": "^3.0.0",
"lodash": "^4.17.11",
"moment": "^2.27.0",
"moment-timezone": "^0.5.26",
"react": "^16.13.1",
"react-apollo-hooks": "^0.4.5",
"react-dom": "^16.13.1",
"react-ga": "^2.6.0",
"react-hooks-global-state": "^0.14.0",
"react-image-crop": "^8.5.0",
"react-json-view": "^1.19.1",
"react-responsive": "^8.1.0",
"react-router-dom": "^5.2.0",
"react-sortable-hoc": "^1.11.0",
"react-sticky-box": "^0.8.0",
"react-virtualized": "^9.21.2",
"styled-components": "^5.1.1",
"use-debounce": "^2.0.0"
},
"husky": {
"hooks": {
"pre-commit": "yarn test:lint && lint-staged && yarn test:compile",
"pre-push": "yarn cypress:run"
}
},
"lint-staged": {
"*.{js,ts,tsx,css}": [
"prettier --write",
"git add"
]
}
}
Add these line to your eslintrc.js file under rules:
"no-use-before-define": "off",
"@typescript-eslint/no-use-before-define": ["error"],
This is an example of my rules in my .eslintrc.json:
"rules": {
"no-use-before-define": "off",
"@typescript-eslint/no-use-before-define": ["error"],
"import/extensions": "off",
"no-unused-vars": "off",
"@typescript-eslint/no-unused-vars": ["error"],
"react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }]
}