如何在VisualStudioCode中使用ESLint对代码进行Lint和格式化

介绍

使用 Visual Studio Code 等编辑器编写 JavaScript 时，有多种方法可以确保代码在语法上正确并符合当前的最佳实践。您可以使用 linter 来执行此操作。 Linters 检查您的代码是否存在语法错误并突出显示错误，以确保您可以快速找到并修复它们。 ESLint 是一个 linter，您可以将其集成到 Visual Studio Code 设置中以确保代码完整性。

ESLint 可以格式化您的代码并对其进行分析以提出改进建议。它也是可配置的。这意味着您可以自定义代码的评估方式。

在本教程中，您将在 Visual Studio Code 上设置 ESLint，并实现自定义配置来处理调试中的日志语句。您还将配置 ESLint 以在您保存文件时自动修复语法错误。

先决条件

要完成本教程，您将需要以下内容：

您机器上安装的最新版本 Visual Studio Code。
您的机器上安装了最新版本的 Node。您可以按照如何安装 Node.js 并为您的机器创建本地开发环境来完成此操作。

本教程已使用 Visual Studio Code v1.62.3、ESLint Extension v2.2.2、Node.js v17.2.0、npm v8.1.4 和 eslint v8.3.0 进行了验证。

第 1 步 — 创建 JavaScript 起始代码

您需要从一个演示项目开始。使用以下命令为您的项目创建一个目录：

mkdir vscode-eslint-example

现在您的项目文件夹已创建，切换到 vscode-eslint-example 目录：

cd vscode-eslint-example

在 vscode-eslint-example 目录中，创建一个名为 app.js 的 JavaScript 文件：

touch app.js

在 Visual Studio Code 中打开 app.js。在 app.js 文件中编写以下 JavaScript 代码：

应用程序.js

const name = 'James'

const person = {first: name}

console.log(person)

const sayHelloLinting = (fName) => {
console.log(`Hello linting, ${fName}`);
};

您可能已经注意到存在可以改进的格式问题：

引号使用不一致
分号使用不一致
间距

有了这个 JavaScript 文件，您现在可以初始化这个项目。为此，请导航回命令行并在 vscode-eslint-example 目录中运行以下命令：

npm init --yes

使用 npm init 命令初始化您的项目将在 vscode-eslint-example 目录中创建一个 package.json 文件。 package.json 将存储您的项目依赖项和项目的其他重要配置设置。

现在您的 JavaScript 项目已正确设置，您现在可以设置 ESLint。

第 2 步 - 设置 ESLint

在为您的项目设置 ESLint 之前，您首先需要安装 ESLint：

npm install eslint --save-dev

包含 --save-dev 标志很重要，因为这会将包保存为仅用于开发的依赖项。在这种情况下，eslint 是一个仅在您积极处理和更改项目时才需要的包。一旦您的项目启动或投入生产，将不再需要 eslint。使用 --save-dev 标志可确保 eslint 将仅作为开发依赖项列在 package.json 文件中。

现在 ESLint 已安装，您可以使用以下命令为您的项目初始化 ESLint 配置：

./node_modules/.bin/eslint --init

此命令中的一个重要部分是 --init 标志。命令的 ./node_modules/.bin/eslint 部分是项目中 ESLint 的路径。使用 --init 标志为您的项目激活 ESLint。激活或初始化 ESLint 将创建一个 ESLint 配置文件，允许您自定义 ESLint 如何与您的项目一起工作。

在您访问 ESLint 配置文件之前，系统会提示您有关项目的不同问题。询问这些问题是为了确保为您的项目初始化的配置最适合您的需求。

第一个提示将是：

? How would you like to use ESLint? …
  To check syntax only
  To check syntax and find problems
❯ To check syntax, find problems, and enforce code style

选择 To check syntax, find problems, and enforce code style 选项。

下一个提示将是：

 What type of modules does your project use? …
  JavaScript modules (import/export)
❯ CommonJS (require/exports)
  None of these

选择 CommonJS 选项以使用 CommonJS 全局变量。

下一个提示会说：

? Which framework does your project use? …
  React
  Vue.js
❯ None of these

选择 None of these 选项。

下一个提示将询问：

? Does your project use TypeScript? › No / Yes

选择 No 选项。

下面的提示会说：

? Where does your code run? …  (Press <space> to select, <a> to toggle all, <i> to invert selection)
✔ Browser
  Node

选择 Browser 选项。

下一个提示会说：

✔ How would you like to define a style for your project? …
❯ Use a popular style guide
  Answer questions about your style
  Inspect your JavaScript file(s)

选择 Use a popular style guide 选项。

对于 Which style guide do you want to follow? 提示，选择 Airbnb: https://github.com/airbnb/javascript 选项。

下一个提示将询问：

? What format do you want your config file to be in? …
  JavaScript
  YAML
❯ JSON

选择 JSON 选项。

然后您将看到此消息：

Checking peerDependencies of eslint-config-airbnb-base@latest
The config that you've selected requires the following dependencies:

eslint-config-airbnb-base@latest eslint@^5.16.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.21.2

最后一个提示会问：

? Would you like to install them now with npm? › No / Yes

选择 Yes 选项以使用 npm 安装依赖项。

您还将被要求安装额外的软件包。选择 yes。

完成所有提示后，您会注意到一个名为 .eslintrc.json 的文件已添加到您的 vscode-eslint-example 目录中。现在已安装 ESLint。 app.js 中的代码还没有改变。这是因为 ESLint 需要与 Visual Studio Code 集成。

第三步——安装 ESLint 扩展

要将 ESLint 集成到 Visual Studio Code 中，您需要为 Visual Studio Code 安装 ESLint 扩展。导航回 Visual Studio Code 并在 Extensions 选项卡中搜索 ESLint。找到扩展后，单击 Install：

在 Visual Studio Code 中安装 ESLint 后，您会注意到 app.js 文件中的彩色下划线突出显示错误。这些标记根据严重程度进行颜色编码。如果您将鼠标悬停在带下划线的代码上，您将看到一条向您解释错误的消息。通过这种方式，ESLint 可以帮助我们查找和删除代码和语法错误。

ESLint 可以为你做更多的事情。可以修改 ESLint 以在每次保存文件时自动修复错误。

第 4 步 — 保存时格式化

要将 ESLint 配置为每次保存时自动修复语法和格式问题，您需要打开设置菜单。

要在 Visual Studio Code 中查找设置，请使用命令面板打开 Preferences: Open Workspace Settings (JSON)。

settings.json 文件将在您的代码编辑器中打开。为了让 ESLint 在您保存文件时修复错误，您需要在 settings.json 中编写以下代码：

.vscode/settings.json

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.validate": ["javascript"]
}

使用 settings.json 文件中的此代码，ESLint 现在将自动更正错误并在保存时验证 JavaScript。

返回到您的 app.js 文件并保存。您会看到一些变化，包括色彩较少的下划线。 ESLint 已修复的一些格式问题包括：

一致使用单引号
函数内部的适当缩进
一致使用分号

ESLint 现在会在你保存 app.js 时自动解决语法错误。还有一些剩余的错误消息。这些可以通过自定义 ESLint 配置来捕获或忽略特定错误和格式问题来修复。

第五步——自定义 ESLint 规则

照原样，ESLint 为 app.js 中的所有 console.log() 语句生成突出显示的消息。在某些情况下，删除 console.log 语句可能不是优先事项。您可以自定义 ESLint 配置以允许 console.log 语句而不会产生错误消息。 ESLint配置规则可以在.eslintrc.json文件中修改。

打开 .eslintrc.json 文件。这是您将在该文件中看到的代码：

.eslintrc.json

{
    "env": {
        "browser": true,
        "commonjs": true,
        "es2021": true
    },
    "extends": [
        "airbnb-base"
    ],
    "parserOptions": {
        "ecmaVersion": 12
    },
    "rules": {
    }
}

在 .eslintrc.json 文件的底部，您将看到一个 "rules" 对象。要自定义触发 ESLint 的错误或禁用 ESLint 对某些代码段的响应，您将向 "rules" 对象添加键值对。该键将与您要添加或更改的规则的名称相匹配。该值将匹配问题的严重性级别。您可以选择三种严重性级别：

error - 产生红色下划线
warn - 将产生黄色下划线
off - 不会显示任何内容。

如果您不想为 console.log 语句生成任何错误消息，您可以使用 no-console 规则名称作为键。输入 off 作为 no-console 的值：

.eslintrc.json

"rules" : {
    "no-console": "off"
}

这会从 app.js 中的 console.log 语句中删除错误消息：

一些规则需要多条信息，包括严重性级别和值。要指定要在代码中使用的引号类型，您必须同时传入所选的引号类型和严重性级别：

.eslintrc.json

"rules" : {
    "no-console": "off",
    "quotes": [
        "error",
        "double"
    ]
}

现在，如果你在引用中包含单引号，ESLint 将引发错误。

结论

本教程介绍了在 Visual Studio Code 上使用 ESLint 可以做的一些事情。像 ESLint 这样的 Linting 工具可以通过自动化和简化您验证语法和最佳实践的方式来帮助为更复杂的任务腾出时间。

如果你想了解更多关于规则的信息以及你可以使用哪些键值对来自定义你的 ESLint 规则，你可以查看这个文档。