@typescript-eslint/no-unused-vars 无法正常工作

Question

在@typescript-eslint upgrade es-lint 开始 lint 后出现如下错误：

28:15 error 'token' is defined but never used @typescript-eslint/no-unused-vars

在源代码中：

   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"
        ]
      }
    }

Answer 1

将这些行添加到rules下的eslintrc.js文件中：

        "no-use-before-define": "off",
        "@typescript-eslint/no-use-before-define": ["error"],

这是我在.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"] }]
    }