在Vscode中，如何使用 eslint 来 lint 和 format

在 Vscode 中，如何使用 eslint 来 lint 和 format

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

第 1步 - 创建 JavaScript 起始代码

1.创建一个目录文件夹

$ mkdir vscode-eslint-example

2. 进入该目录文件夹

$ cd vscode-eslint-example

3. 在 vscode-eslint-example 目录内部，创建一个 JavaScript 文件 app.js：

$ touch app.js

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

const name = 'James'

const person = {first: name}

console.log(person)

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

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

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

5. 现在可以初始化这个项目。在命令行中导航回 vscode-eslint-example 目录，然后运行以下命令：

$ npm init --yes

现在 JavaScript 测试项目已正确设置，可以开始设置 ESLint。

第 2 步 - 设置 ESLint

1. 在为项目设置 ESLint 之前，首先需要在项目目录下安装 ESLint：

$ npm install eslint --save-dev

该 --save-dev 标志很重要，因为这会将包保存为仅用于开发的依赖项，一旦项目进入生产环境，eslint 不再需要

2. 现在 ESLint 已安装，可以使用以下命令为你的项目初始化 ESLint 配置(导航到项目根目录下的 node_modules/.bin 中去)：

$ ./node_modules/.bin/eslint --init

接下来，系统会提示有关项目的不同问题。询问这些问题是为了确保为项目初始化的配置最适合你自己的需求。

• 第一个提示将是,选择 To check syntax, find problems, and enforce code style 选项。

? 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

• 第二个提示将是,选择 CommonJS 使用 CommonJS 全局变量的选项。

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

• 下一个提示会说, 选择 None of these 选项：

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

• 下一个提示将询问, 选择 No 选项：

? Does your project use TypeScript? › No / Yes

• 下面的提示会说, 选择 Browser 选项：

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

• 下一个提示会说, 选择 Use a popular style guide选项：
  (对于 **Which style guide do you want to follow?**提示，选择 Airbnb: https://github.com/airbnb/javascript选项)

✔ 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)

• 下一个提示将询问, 选择 JSON 选项。：

? What format do you want your config file to be in? …
  JavaScript
  YAML
❯ 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@^7.32.0 || ^6.8.0 || ^7.2.0 eslint-plugin-import@^2.25.2

• 最后一个提示会问, 选择 Yes 用于安装依赖项的选项 npm：

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

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

第 3 步 - 安装 ESLint 扩展

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

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

第 4 步 - 保存时格式化

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

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

# .vscode/settings.json
{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    },
    "eslint.validate": ["javascript"]
}

好了，现在 ESLint 插件现在将自动更正错误并在保存时验证 JavaScript。

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

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

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

第 5 步 - 自定义 ESLint 规则

这一步已经不是必须的了。

在调式的时候，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.

在文件.eslintrc.json中添加：

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

app.js 中將不再產生 console.log 错误消息：