如何擴展 Eslint 以使用 create-react-app

Question

我正在開發一個 React 應用程序，我想設置一個 linter，以便我可以在控制台中看到所有警告/錯誤。

文檔沒有說太多： https : //create-react-app.dev/docs/setting-up-your-editor/

我在我的.env.dev文件中添加了EXTEND_ESLINT=true並且我還創建了一個.eslintrc.json文件，其中包含以下內容（取自文檔）：

{
  "eslintConfig": {
    "extends": ["react-app", "shared-config"],
    "rules": {
      "additional-rule": "warn"
    },
    "overrides": [
      {
        "files": ["**/*.ts?(x)"],
        "rules": {
          "additional-typescript-only-rule": "warn"
        }
      }
    ]
  }
}

我嘗試添加的每條規則都不會做任何事情，我仍然在控制台中看不到警告，最重要的是，如果我嘗試從命令行運行 linter：

npx eslint ./src

我收到以下錯誤：

ESLint configuration in .eslintrc.json is invalid:
    - Unexpected top-level property "eslintConfig".

我錯過了什么？

Answer 1

您可以使用以下語法在src文件夾中創建一個.eslintrc.js文件：

module.exports = {
    extends: ["react-app", "shared-config"],
    rules: {
      "additional-rule": "warn"
    },
    overrides: [
      {
        "files": ["**/*.ts?(x)"],
        "rules": {
          "additional-typescript-only-rule": "warn"
        }
      }
    ]
  }

或者將其添加到您的package.json （不是 .eslintrc.json 文件）：

"eslintConfig": {
    "extends": ["react-app", "shared-config"],
    "rules": {
      "additional-rule": "warn"
    },
    "overrides": [
      {
        "files": ["**/*.ts?(x)"],
        "rules": {
          "additional-typescript-only-rule": "warn"
        }
      }
    ]
  }

Answer 2

您可以簡單地在 package.json 中添加插件規則和配置，而無需創建 .eslintrc.json 和 env 變量