如何使用VisualStudioCode和ESLint在保存时启用Linting

介绍

样式指南允许我们编写一致、可重用和干净的代码。这些规则可以通过 linter 自动执行和执行。这将使您免于手动检查缩进或使用单引号或双引号。

Visual Studio 代码可以支持每次保存时进行 linting。您的工作流程可能会受益于执行频繁的 lint 检查以随着时间的推移解决小问题，而不是解决可能延迟部署代码的许多大问题。

在本教程中，您将在 Visual Studio Code 中安装 ESLint、构建规则并启用 codeActionsOnSave。

先决条件

如果您想继续阅读本文，您将需要：

下载并安装最新版本的 Visual Studio Code。
Node.js 安装在本地，您可以按照【X57X】如何安装Node.js 并创建本地开发环境【X126X】进行。

本教程已使用 Node v16.6.2、npm v7.21.0、eslint v7.32.0 和 Visual Studio Code v1.59.1 进行了验证。

第 1 步 - 设置项目

对于不同的语言和项目类型，有各种 linter。为了满足本教程的需要，您需要安装和配置 ESLint。

首先，新建一个项目目录：

mkdir eslint-save-example

然后，导航到项目目录：

cd eslint-save-example

初始化一个新项目：

npm init -y

并安装 eslint：

npm install eslint@7.32.0

然后，初始化 eslint：

npx eslint --init

使用以下选项回答提示：

? How would you like to use ESLint? To check syntax and find problems
? What type of modules does your project use? JavaScript modules (import/export)
? Which framework does your project use? None of these
? Does your project use TypeScript? No
? Where does your code run? Browser, Node
? What format do you want your config file to be in? JavaScript

此时，您将拥有一个包含 package.json 和 .eslintrc.js 文件的新项目。

为了在 Visual Studio Code 中使用 ESLint，您应该安装 Visual Studio Code 的市场中提供的 ESLint 扩展。

第 2 步 – 创建有错误的示例

接下来，创建一个有意破坏常见规则的 JavaScript 文件，例如不一致的间距和缩进、引号和分号：

index.js

const helloYou    = (name)=> {
  name = 'you' || name   ;
  console.log("hello" + name + "!" )
}

在 Visual Studio Code 中打开文件并观察违反 ESLint 规则的指示：

helloYou 有下划线。将鼠标悬停在 Visual Studio Code 中的这一行上会显示以下工具提示消息：'helloYou' is assigned a value but never used。这是因为 eslint:recommended 启用了规则 .eslint(no-unused-vars)。

我们可以通过使用变量来解决这个问题：

index.js

const helloYou    = (name)=> {
  name = 'you' || name   ;
  console.log("hello" + name + "!" )
}

console.log(helloYou)

为了解决其他问题，我们将不得不添加规则。

第 3 步 - 添加规则

eslint --init 创建了一个名为 eslintrc.js 的文件（或 .yml 或 .json 如果您选择了该选项）：

.eslintrc.js

module.exports = {
  'env': {
    'browser': true,
    'es2021': true,
    'node': true
  },
  'extends': 'eslint:recommended',
  'parserOptions': {
    'ecmaVersion': 12,
    'sourceType': 'module'
  },
  'rules': {
  }
};

让我们为一致的间距和缩进添加规则。并强制单引号优先于双引号。并且还在行尾强制使用分号。

.eslintrc.js

module.exports = {
  // ...
  'rules': {
    'quotes': ['error', 'single'],
    // we want to force semicolons
    'semi': ['error', 'always'],
    // we use 2 spaces to indent our code
    'indent': ['error', 2],
    // we want to avoid extraneous spaces
    'no-multi-spaces': ['error']
  }
};

将更改保存到您的文件。

在您的代码编辑器中，打开您之前创建的 JavaScript 文件。所有违反的规则都会被显示出来。

如果你安装了 ESLint 扩展，你可以使用 CTRL+SHIFT+P 打开命令面板。然后搜索 ESLint: Fix all auto-fixable Problems 并按 ENTER（或 RETURN）。

自动修复的问题将得到纠正：

index.js

const helloYou = (name)=> {
  name = 'you' || name ;
  console.log('hello' + name + '!' );
};

console.log(helloYou());

您无需计算缩进和检查引号和分号！

第 4 步 – 在保存时添加代码操作

尝试手动运行 ESLint: Fix all auto-fixable Problems 定期不是很可靠。但是，每次保存工作时运行 lint 规则会更可靠。您可以将 ESLint 设置为每次按 CTRL+S（或 COMMAND+S）时运行自动修复。

要使 ESLint 在相同的文件上正常工作，您必须更改 Visual Studio Code 首选项。转到 文件 > 首选项 > 设置 （或 代码 > 首选项 > 设置 ）。

对于本教程，我们将修改工作区设置 - 也可以将这些设置应用于所有项目。单击 Workspace 并搜索 Code Actions On Save：

Editor: Code Actions On Save
Code action kinds to be run on save.

Edit in settings.json

然后单击settings.json。

.vscode/settings.json

{
  "editor.codeActionsOnSave": null
}

在 settings.json 中粘贴以下代码：

.vscode/settings.json

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

现在，撤消对之前创建的 JavaScript 文件所做的修复。然后保存文件。可自动修复的问题将被自动解决。

结论

在本教程中，您安装了 ESLint，构建了规则，并在 Visual Studio Code 中启用了 codeActionsOnSave。