Eslint 不顯示警告 - React

Question

在我的新項目中，ESLint 沒有像以前那樣輸出警告，我使用的是 VSCode。 如果我的代碼中某處有 unsed var，它不會再在終端 output 中顯示警告。 僅在問題選項卡中。

這是我的 eslint 配置文件：

.eslintrc.json

{
  "env": {
      "browser": true,
      "es6": true
  },
  "extends": [
      "plugin:react/recommended",
      "airbnb-typescript",
      "plugin:@typescript-eslint/recommended",
      "plugin:@typescript-eslint/eslint-recommended",
      "prettier/@typescript-eslint",
      "plugin:prettier/recommended"
  ],
  "globals": {
      "Atomics": "readonly",
      "SharedArrayBuffer": "readonly"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
      "ecmaFeatures": {
          "jsx": true
      },
      "ecmaVersion": 2018,
      "sourceType": "module",
      "project": "./tsconfig.json"
  },
  "plugins": [
      "react",
      "react-hooks",
      "@typescript-eslint",
      "prettier"
  ],
  "rules": {
    "prettier/prettier": "error",
    "react-hooks/rules-of-hooks":"error",
    "react-hooks/exhaustive-deps": "warn",
    "camelcase": "off",
    "@typescript-eslint/camelcase": "off",
    "react/jsx-filename-extension": [1, {"extensions": [".tsx"]}],
    "import/prefer-default-export": "off",
    "react/jsx-one-expression-per-line": "off",
    "react/jsx-props-no-spreading": "off",
    "react/prop-types": "off",
    "no-unused-expressions": "off",
    "@typescript-eslint/no-unused-vars": "error",
    "@typescript-eslint/explicit-function-return-type": [
      "error",
      {
        "allowExpressions": true
      }
    ],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "ts": "never",
        "tsx": "never"
      }
    ],
    "semi":"off"
  },
  "settings": {
    "import/resolver": {
      "typescript": {}
    }
  }
}

這是我的 package.json devDependencies：

package.json

  "dependencies": {
    ...,
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "^4.0.2"
  }
  "devDependencies": {
    "@types/react-router-dom": "^5.1.7",
    "@types/styled-components": "^5.1.7",
    "@typescript-eslint/eslint-plugin": "^4.14.2",
    "@typescript-eslint/parser": "^4.14.2",
    "eslint": "^7.19.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-config-airbnb-typescript": "^12.3.1",
    "eslint-config-prettier": "^7.2.0",
    "eslint-import-resolver-typescript": "^2.3.0",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-react": "^7.22.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "husky": "^5.0.8",
    "prettier": "^2.2.1",
    "prettier-eslint-cli": "^5.0.0",
    "typescript": "^4.1.3"
  }

Answer 1

您可以通過直接調用命令./node_modules/.bin/eslint. . 這樣，如果有任何錯誤消息，您將獲得更多有用的錯誤消息。 另外，請務必檢查您是否有多個配置文件。 查看此 ESLint 文檔頁面以確保您的配置是唯一的（或具有最高優先級的配置）。

如果同一個目錄下有多個配置文件，ESLint 只會使用一個。 優先順序如下：

1. .eslintrc.js
2. .eslintrc.cjs文件
3. .eslintrc.yaml
4. .eslintrc.yml
5. .eslintrc.json
6. package.json

Answer 2

讓它工作的一些技巧

1. 檢查 eslint 擴展，它應該已安裝並啟用。

2. 在您的 VSCode 配置中設置這些值ctrl + , ：

  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "eslint.alwaysShowStatus": true

3. 有時它需要在應用配置更改后重新啟動 eslint 服務器。

• 按Ctrl + Shift + p (⇧ ⌘ P) 打開 VSCode 命令面板菜單
• 鍵入restart
• Select ESLint：重啟 ESLint 服務器

或者只是重新啟動 VSCode。

Answer 3

我有同樣的問題，對我來說，在我的package.json中我缺少這個 esLint 配置：

"eslintConfig": {
    "extends": [
        "react-app",
        "react-app/jest"
    ]
},

應該是誤刪了。

Answer 4

我已經在我的項目中安裝了所有這些 eslint 插件：

"eslint": "^4.19.1" 
"eslint-config-airbnb-base": "^12.1.0"
"eslint-import-resolver-babel-plugin-root-import": "^1.1.1"
"eslint-import-resolver-webpack": "^0.9.0"
"eslint-loader": "^2.2.1"
"eslint-plugin-import": "^2.19.1"
"eslint-plugin-jest": "^21.15.1"
"eslint-plugin-react": "^7.17.0"

我在 my.eslintrc.js 中有這個配置

const PATHS = require('./../paths');
const rootImportRegex = '~/(components|chains|output-types|utilities)/';

module.exports = {
  parser: 'babel-eslint',
  env: {
    browser: true,
    commonjs: true,
    es6: true,
    node: true
  },
  settings: {
    'import/resolver': {
      webpack: {
        config: `${PATHS.config}/webpack.base.js`
      }
    },
  },
  extends: [
    'airbnb-base',
    'plugin:react/recommended',
    'plugin:jest/recommended'
  ],
  parserOptions: {
    sourceType: 'module',
    ecmaVersion: 6,
    ecmaFeatures: {
      jsx: true
    }
  },
  rules: {
    'max-len': [2, 120, 2],
    'import/no-extraneous-dependencies': ['error', { 'devDependencies': true }],
    'import/no-unresolved': ['error', { ignore: [rootImportRegex] }],
    'import/extensions': ['warning', 'ignorePackages']
  }
};

Answer 5

如果您的項目從Create React App開始，那么它可能會發生，因為 React 團隊在webpack.config.dev文件中實現 eslint 的方式。

當您的項目正在構建時，它使用eslint-webpack-plugin來確保 eslint 錯誤作為覆蓋層出現在您的應用程序中。

問題是在他們的默認配置中，他們將 eslint 指向特定的 eslint 配置（ eslint-config-react-app/base見）

        new ESLintPlugin({
          // Plugin options
          extensions: ['js', 'mjs', 'jsx', 'ts', 'tsx'],
          formatter: require.resolve('react-dev-utils/eslintFormatter'),
          eslintPath: require.resolve('eslint'),
          failOnError: !(isEnvDevelopment && emitErrorsAsWarnings),
          context: paths.appSrc,
          cache: true,
          cacheLocation: path.resolve(
            paths.appNodeModules,
            '.cache/.eslintcache'
          ),
          // ESLint class options
          cwd: paths.appPath,
          resolvePluginsRelativeTo: __dirname,
          baseConfig: {
            extends: [require.resolve('eslint-config-react-app/base')], // <-- here
            rules: {
              ...(!hasJsxRuntime && {
                'react/react-in-jsx-scope': 'error',
              }),
            },
          },
        }),

我總是使用彈出選項，在刪除// ESLint class options下的所有屬性后，項目開始查看我自己的 eslint 配置文件，一切都按預期進行。

我不知道他們為什么這樣設置它。