使用 VSCode 自定义 Create React App 的 ESLint 配置，并同时配合 Prettier

11 月 ago
科, 颖
3 minutes

关于本文

我之前有机会在Visual Studio Code（以下简称VSCode）中为使用Create React App（以下简称CRA）创建的应用程序配置ESLint。我还能够自定义ESLint并与Prettier一起使用。

当时是在开发中的应用程序设置中进行调整，所以我整理了一份步骤，以便在使用Create React App从头开始创建应用程序时可以再现。最后，即使是在从头开始创建应用程序的情况下，所做的事情也没有变化，所以我应该能够按照本文的方法对正在开发中的应用程序的ESLint进行定制。

环境

    OS: macOS

应用程序开发

使用Create React App创建应用程序。
以下是使用Yarn作为包管理工具，使用TypeScript作为开发语言的情况下的命令。

$ yarn create react-app cra_ts --template typescript

当时使用的 Create React App 版本是 v5.0.1。

安装ESLint

CRA 已经包含了 ESLint。因此不需要自行安装 ESLint。

定制 ESLint 时需要注意的事项。

使用 CRA 时，如果启动 CRA（yarn start），则会在标准输出中显示 ESLint 执行结果。这是 CRA 的 lint 功能。

根据 CRA 文档，据说即使自定义了 ESLint 的设置，CRA 的 lint 功能也不会使用已经定制的配置，所以请注意。

请注意，即使您自定义了ESLint配置，这些更改仅会影响到编辑器的整合。

配置您的编辑器 | 创建React应用程序

然而，当我实际运行应用程序（yarn start）时，我发现它使用了自定义的设置并使用了 CRA 的 lint 功能。另外，根据同一份文档，在浏览器开发者工具的控制台中似乎还会显示 ESLint 的执行结果，但是我没有看到。文档可能过时了吗？
不管怎样，由于在 VSCode 中进行了 lint 检查，所以我决定不深入研究 CRA 的 lint 功能。

定制政策

在 CRA（Create React App）中，已经默认具有 ESLint 的设置。
这些设置是写在 package.json 文件中的。

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

这个 react-app 和 react-app/jest 中具体的设置已经被写在文档中。这些文档和源代码可以在 eslint-config-react-app 的 GitHub 上找到。

好吧，对于扩展eslint-config-react-app的设置，是应该进行还是可以忽略呢？
在CRA的文档中，写得如下所示。

我们强烈建议扩展基本配置，因为删除它可能会引入难以找到的问题。

我們決定按照這個方針來擴展 eslint-config-react-app。

为自定义 ESLint 进行准备。

将 package.json 中的 eslintConfig 移动到 .eslintrc.js 中。

这不是必需的。但是出于个人管理方便的考虑，我建议在一个专门的文件中编写 ESLint 的配置。

在应用的根目录下创建 .eslintrc.js 文件，并按照以下方式进行编写。

/**
 * ESLint の設定です。ドキュメントは以下です。
 * https://eslint.org/docs/latest/use/configure/
 */
module.exports = {
  extends: [
    /**
     * 以下 2 つは Create React App のデフォルトの ESLint の設定です。
     * Create React App ではこれを拡張する形で設定することを推奨しています。
     * そのため以下 2 つは消さずに、config を追加する際はその下に記載してください。
     * 詳細は以下ドキュメントを参照してください。
     * https://create-react-app.dev/docs/setting-up-your-editor
     * https://github.com/facebook/create-react-app/tree/main/packages/eslint-config-react-app
     */
    "react-app",
    "react-app/jest",
  ],
  ignorePatterns: [
    "/build/", // ビルド出力
  ]
};

我们添加了ignorePatterns。/build/表示不对构建（yarn build）的输出进行lint。顺便提一下，node_modules目录无需特别设置即可被排除在lint的检查范围之外（ESLint文档）。

可以在 .eslintignore 文件中设置排除文件，但是由于 .eslintignore 文件在 ESLint v8.25.0 中已被弃用，因此使用 ignorePatterns 指定要排除的文件。

删除 package.json 中的 eslintConfig。

在VSCode中配置执行ESLint自动修复

首先，安装VSCode扩展程序ESLint（dbaeumer.vscode-eslint）。

创建并编写.vscode/settings.json 文件如下。

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

使用这个选项，ESLint 的自动修正将在文件保存时执行。
同时，您还可以在编辑器中查看 ESLint 的提醒。

如果你不想强迫团队按照这个设置来做，可以在 .gitignore 文件中排除它。

+ /.vscode/settings.json

美化器的安装

如果在使用ESLint的同时使用Prettier进行格式化，可以按以下方式进行设置。

首先，安装 Prettier 和 eslint-config-prettier。

$ yarn add -D prettier eslint-config-prettier

eslint-config-prettier（GitHub）是Prettier官方提供的ESLint配置。
由于它会将与Prettier冲突的ESLint设置关闭，因此安装它可以解决问题。

安装VSCode的Prettier – Code formatter（esbenp.prettier-vscode）扩展功能。

然后更新 .eslintrc.js 文件。

    extends: [
      /**
       * 以下 2 つは Create React App のデフォルトの ESLint の設定です。
       * Create React App ではこれを拡張する形で設定することを推奨しています。
       * そのため以下 2 つは消さずに、config を追加する際はその下に記載してください。
       * 詳細は以下ドキュメントを参照してください。
       * https://create-react-app.dev/docs/setting-up-your-editor
       * https://github.com/facebook/create-react-app/tree/main/packages/eslint-config-react-app
       */
      "react-app",
      "react-app/jest",
+
+     "prettier",
   ],

在Prettier的文件中，将prettier放在extends的最后（Prettier的文件）。

更新.vscode/settings.json文件。

  {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
-   }
+   },
+   "editor.defaultFormatter": "esbenp.prettier-vscode",
+   "editor.formatOnSave": true

这样，当文件保存时，Prettier 将会被执行。

在使用Docker进行开发时要注意的事项

如果在您的本地（包括eslint和prettier）没有安装相关包的情况下，您会使用内置的eslint和prettier扩展功能，这可能会导致某些扩展功能无法使用或出现错误。

简单的解决方法是在本地安装这些包（执行yarn install）。

另外，有可能通过一些方法在Docker容器内使用eslint和prettier，但需要一些技巧。

另外，使用Docker Compose的时候，例如，如果在frontend目录下有一个React应用程序，则需要在.vscode/settings.json文件中添加以下设置。

  {
    "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
    },
    "editor.defaultFormatter": "esbenp.prettier-vscode",
-   "editor.formatOnSave": true
+   "editor.formatOnSave": true,
+   "eslint.workingDirectories": ["./frontend"]
  }

尝试添加ESLint配置

尝试添加 Airbnb 的配置。

$ yarn add -D eslint-config-airbnb eslint-config-airbnb-typescript

更新 .eslintrc.js 文件。

    extends: [
      /**
       * 以下 2 つは Create React App のデフォルトの ESLint の設定です。
       * Create React App ではこれを拡張する形で設定することを推奨しています。
       * そのため以下 2 つは消さずに、config を追加する際はその下に記載してください。
       * 詳細は以下ドキュメントを参照してください。
       * https://create-react-app.dev/docs/setting-up-your-editor
       * https://github.com/facebook/create-react-app/tree/main/packages/eslint-config-react-app
       */
      "react-app",
      "react-app/jest",
  
+     "airbnb",
+     "airbnb-typescript",
      "prettier",
    ],
+   parserOptions: {
+     project: "./tsconfig.json",
+   },
    ignorePatterns: [
+     "/.eslintrc.js",
      "/build/", // ビルド出力
    ],

在这里，”prettier”要放在”extends”的最后（Prettier的文档）。

当添加了airbnb-typescript时，如果不添加parserOptions，将会出现以下错误。顺便说一下，如果在VSCode中运行命令面板（shift+cmd+p），可以执行ESLint: Show Output Channel命令来查看。

Error: Error while loading rule '@typescript-eslint/dot-notation': You have used a rule which requires parserServices to be generated. You must therefore provide a value for the "parserOptions.project" property for @typescript-eslint/parser.

当添加了airbnb-typescript时，如果没有将”/.eslintrc.js”添加到ignorePatterns中，那么”.eslintrc.js”本身将受到lint的影响并出现以下错误。为了避免这个错误，我们需要像上面的 “.eslintrc.js”那样配置，即设置不对”.eslintrc.js”进行lint。请参考typescript-eslint的文档。

Parsing error: ESLint was configured to run on `<tsconfigRootDir>/.eslintrc.js` using `parserOptions.project`: /{path_to_app}/tsconfig.json
However, that TSConfig does not include this file.

轻轻地测试一下功能。

尝试在 src/App.tsx 中添加以下内容。

  function App() {
+      var re = /foo   bar/
  
    return (

当保存后，会被修改为以下的样子。

  function App() {
-      var re = /foo   bar/
+   const re = /foo {3}bar/;

    return (

更详细地说，正在执行以下操作。

    • Prettier によるフォーマット

インデント調整

; の付加

ESLint による自動修正

no-regix-spaces の違反の修正

{3} になっているところ

no-var の違反の修正

var が const になっているところ
これは eslint-config-airbnb によってチェックされるようになった項目（ソースは多分ここ）

此外，ESLint 还提供以下指导意见。

're' is assigned a value but never used.

最终配置文件

.eslintrs.js的中文翻译：只需要一种选项

/**
 * ESLint の設定です。ドキュメントは以下です。
 * https://eslint.org/docs/latest/use/configure/
 */
module.exports = {
  extends: [
    /**
     * 以下 2 つは Create React App のデフォルトの ESLint の設定です。
     * これを拡張する形で設定するため、config を追加する際はこの下に記載してください。
     * 詳細は以下ドキュメントを参照してください。
     * https://create-react-app.dev/docs/setting-up-your-editor
     * https://github.com/facebook/create-react-app/tree/main/packages/eslint-config-react-app
     */
    "react-app",
    "react-app/jest",

    "airbnb",
    "airbnb-typescript",
    "prettier",
  ],
  parserOptions: {
    project: "./tsconfig.json",
  },
  ignorePatterns: [
    "/.eslintrc.js",
    "/build/", // ビルド出力
  ],
};

.vscode/settings.json的原文翻译为中文：
.vscode/settings.json 文件。

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

请参考以下网站

在上述的过程中，我们最终参考了官方文件，但在调查过程中，以下的文章对我们非常有帮助。非常感谢您。

    • ESLint 設定を作成する技術

 

    • TypeScrip + ESLint + Prettier + Jest のプロジェクト設定にハマる – かもメモ

 

    [VSCode] TypeScriptにESLintを入れると Parsing error: “parserOptions.project” has been set for @typescript-eslint/parser. が表示される │ wonwon eater
✖
广告
将在 10 秒后关闭
bannerAds