ESLint、Prettier 和 VSCode 故障排除

ESLint 和 Prettier 让 VSCode 的编码工作变得轻松许多。它们帮我发现了很多代码错误，这些错误当时就能轻松修复，但之后却很难追踪到它们是否是真正的 bug。

但如果你的问题是如何让 ESLint/Prettier 与 VSCode 协同工作呢？请参阅以下故障排除技巧。我将这些技巧归纳为三个常见症状：

• 症状 1：VSCode 不高亮显示错误
• 症状 2：VSCode 保存时不格式化
• 症状 3：ESLint 生成数百个“删除␍prettier/prettier 错误”

症状 1：VSCode 不高亮显示错误

假设你已经安装好了 ESLint 和 Prettier，但是 VSCode 没有高亮显示错误：

以下是一些需要调查的内容：

1. ESLint 和 Prettier 的安装

请确保您的项目已安装ESLint和Prettier 。

2. 适用于 VSCode 的 ESLint 插件

请确保已安装并启用VSCode 的 ESLint 插件。

3. ESLint 配置文件

请确保项目根目录下有一个ESLint 配置文件。

4. eslint-plugin-prettier

我强烈建议使用eslint-plugin-prettier并在我的 ESLint 配置文件中配置 Prettier（而不是维护两个配置文件）。

5. VSCode 默认格式化程序设置

请确保VSCode 设置中的默认格式化程序设置为 ESLint。请同时检查用户设置和工作区设置（工作区设置优先于用户设置）。

6. VSCode“工作区”目录

请确保您在 VSCode 中打开的目录（也称为工作区）是您项目的根目录。例如：

• 您的项目位于/usr/src/my-project
• 您的 ESLint 配置文件位于/usr/src/my-project/.eslintrc.json

如果您在 VSCode 中打开除 以外的 /usr/src/my-project任何目录作为工作区（例如/usr/src或/usr/src/my-project/client），则 VSCode将无法识别ESLint 配置文件。

7. ESLint 配置错误

检查 ESLint 配置错误：打开VSCode 终端，转到“输出”选项卡，然后从下拉菜单中选择 ESLint：

8. ESLint 覆盖配置文件配置

检查VSCode 设置中是否有 ESLintoverrideConfigFile 选项。如果有，请确保该位置存在配置文件。

9. VSCode 中的 ESLint 工作目录

检查您的文件是否已从VSCode 用户或工作区设置中的 ESLint 工作目录中排除。

症状 2：VSCode 保存时不格式化

1. VSCode“保存时格式化”设置

请确保您的VSCode 设置：

• 已启用“保存时格式化”功能
• 将“保存时格式化”设置为“文件”

2. VSCode“保存时执行代码操作”设置

请确保您的VSCode 设置中包含“保存时的代码操作”中的 ESLint：

settings.json 文件中应该包含类似这样的条目：

"editor.codeActionsOnSave": 

  {

    "source.fixAll.eslint": true

  },

1. 并非所有 ESLint 错误都能“自动修复”。

请注意，某些 ESLint 错误在保存时不会自动修复，因为它们无法自动修复。例如，使用eslint-plugin-testing-library时，会出现以下错误：

保存时自动修复此问题：

但出现了这个代码检查错误：

无法自动修复，因此保存时不会更新。

症状 3：ESLint 生成数百个“删除␍prettier/prettier 错误”

如果您使用的是 Windows 电脑，但代码是在 Mac 或 Linux 电脑上生成的，则可能会出现这种情况。错误信息也可能如下所示：

以下是一些可以尝试的方法：

1.prettier从命令行运行

prettier对项目中的所有文件运行（参考： create-react-app 文档）：

./node_modules/.bin/prettier --write "src/*/.{js,jsx,ts,tsx,json,css,scss,md}"

1. 更新 prettier/prettier 的“endOfLine”规则

更新ESLint 配置文件中的 prettier/prettier 规则（参考：StackOverflow）：

"prettier/prettier": [

  "error",

  {

    "endOfLine": "auto"

  }

],

1. 在 VSCode 设置中设置行尾符

在.vscode/settings.json中设置行尾符（参考：StackOverflow）：

{

    "files.eol": "\n",

}

1. 更新您的全局 Git 设置

警告：这将更新您的全局 Git 设置，并影响您的所有 Git 项目。

再次运行git config --global core.autocrlf true并从 GitHub 拉取代码（或者重新克隆仓库）。（参考：GitHub 文档）

5. 考虑使用适用于 Linux 的 Windows 子系统

据我所知，我在 Windows 笔记本电脑上使用Windows 子系统 Linux 版 Ubuntu 20.04时没有遇到此错误（尽管其他 Windows 用户——他们可能使用的是 PowerShell——报告说同一个 GitHub 存储库出现了此错误）。