介绍

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

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

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

先决条件

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

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

第 1 步 – 创建 JavaScript 入门代码

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

mkdir linting

现在您的项目文件夹已创建，切换到linting目录：

cd linting

在linting目录中，创建一个名为 的 JavaScript 文件app.js：

touch app.js

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

const name = 'James'

const person = {first: name}

console.log(person)

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

从格式的角度来看，您可能会注意到一些可以改进的地方：

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

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

npm init

使用该npm init命令初始化您的项目将package.json在linting目录中创建一个文件。在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已添加到您的linting目录中。ESLint 现在已安装。中的代码app.js尚未更改。这是因为 ESLint 需要与 Visual Studio Code 集成。

第 3 步 – 配置 ESLint

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

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

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

第 4 步 — 保存时格式化

要将 ESLint 配置为每次保存时自动修复语法和格式问题，您需要打开设置菜单。要在 Visual Studio Code 中查找设置，请单击左下方的齿轮图标，然后选择Settings。

在设置菜单中，搜索Code Actions on Save。第一个选项将显示Editor: Code Actions on Save，在其下方，将有一个选项用于在 settings.json 中进行编辑。单击在 settings.json 中编辑的链接。

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

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

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

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

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

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

第 5 步 – 自定义 ESLint 配置

由于是，ESLint产生的所有高亮显示的消息console.log()在语句app.js。在某些情况下，删除console.log语句可能不是优先事项。您可以自定义 ESLint 配置以允许console.log语句而不产生错误消息。ESLint 配置规则可以在.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：

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

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

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

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

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

结论

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

如果您想了解有关规则的更多信息以及可用于自定义 ESLint 规则的键值对，您可以查看此文档。