返回

ESLint 非权威配置指南（下）：打造高效开发环境

前端

  1. 使用命令实现代码自动检查与修复

在完成 ESLint 配置后，就可以使用命令来实现代码自动检查与修复了。

4.1 安装 ESLint CLI

首先，需要安装 ESLint CLI。ESLint CLI 是一个命令行工具，可以方便地对代码进行检查和修复。

npm install -g eslint

4.2 检查代码

安装 ESLint CLI 后，就可以使用 eslint 命令来检查代码了。

eslint src/index.js

这条命令会检查 src/index.js 文件，并输出所有违反 ESLint 规则的地方。

4.3 修复代码

如果想修复代码中所有违反 ESLint 规则的地方，可以使用 --fix 选项。

eslint src/index.js --fix

这条命令会检查 src/index.js 文件，并修复所有违反 ESLint 规则的地方。

5. 设置更友好的 VSCode 配置

在 VSCode 中，可以使用 ESLint 插件来设置更友好的 ESLint 配置。

5.1 安装 ESLint 插件

首先，需要安装 ESLint 插件。

ext install esbenp.prettier-eslint

5.2 配置 ESLint 插件

安装 ESLint 插件后，需要对其进行配置。

在 VSCode 的设置中，找到 ESLint 选项，然后将 ESLint: Default Config 选项设置为 ESLint。

5.3 启用自动修复

在 VSCode 中，还可以启用自动修复功能。

在 VSCode 的设置中，找到 ESLint 选项，然后将 ESLint: Auto Fix On Save 选项设置为 true。

启用自动修复功能后，在保存代码时，VSCode 会自动修复所有违反 ESLint 规则的地方。

6. 解决 ESLint 和 Prettier 冲突

ESLint 和 Prettier 是两个不同的代码风格检查工具，它们可能会产生冲突。

6.1 安装 ESLint-Prettier 插件

为了解决 ESLint 和 Prettier 的冲突，可以使用 ESLint-Prettier 插件。

ext install dbaeumer.vscode-eslint

6.2 配置 ESLint-Prettier 插件

安装 ESLint-Prettier 插件后，需要对其进行配置。

在 VSCode 的设置中，找到 ESLint-Prettier 选项，然后将 ESLint-Prettier: Prettier Config 选项设置为 Prettier。

6.3 启用 ESLint-Prettier 插件

安装并配置 ESLint-Prettier 插件后，需要对其进行启用。

在 VSCode 的设置中，找到 ESLint-Prettier 选项，然后将 ESLint-Prettier: Enable 选项设置为 true。

启用 ESLint-Prettier 插件后，ESLint 和 Prettier 冲突的问题就会得到解决。