使用 VS Code 插件自动保存并运行 ESLint 检查代码

在前端开发中，代码规范是非常重要的，它不仅能够提高代码的可读性和可维护性，还可以避免一些潜在的 bug。而 ESLint 就是一个非常好的工具，可以帮助我们检查代码规范的问题。本文将介绍如何使用 VS Code 插件自动保存并运行 ESLint 检查代码。

安装插件

首先，我们需要安装两个 VS Code 插件：ESLint 和 ESLint Auto Fix。ESLint 插件用于检查 JavaScript 代码规范，而 ESLint Auto Fix 插件可以自动修复一些简单的代码规范问题。

可以通过 VS Code 的插件市场进行安装，也可以通过以下命令进行安装：

# 安装 ESLint 插件
npm install -g eslint

# 安装 ESLint Auto Fix 插件
npm install -g eslint-plugin-eslint --save-dev

配置文件

在项目的根目录下创建 .eslintrc.json 文件，并添加如下配置：

{
  "extends": "eslint:recommended",
  "parserOptions": {
    "ecmaVersion": 8,
    "sourceType": "module"
  },
  "rules": {
    "no-console": "off",
    "no-unused-vars": "warn",
    "indent": ["error", 2]
  }
}

该配置文件中包含了一些常用的规则，比如禁止使用 console、未使用的变量给出警告、缩进必须为两个空格等。

配置 VS Code

在 VS Code 中打开项目，在 settings.json 文件中添加如下配置：

{
  "editor.formatOnSave": true,
  "eslint.autoFixOnSave": true,
  "eslint.alwaysShowStatus": true,
  "eslint.validate": [
    "javascript"
  ]
}

其中，editor.formatOnSave 参数表示在保存代码时自动格式化；eslint.autoFixOnSave 参数表示在保存代码时自动修复代码规范问题；eslint.alwaysShowStatus 表示总是显示代码规范检查结果；eslint.validate 表示需要检查的文件类型。

示例代码

下面是一个简单的示例代码，用来演示 ESLint 自动检查的功能：

let foo = 'bar'
const baz = 42
console.log(foo, baz)

if (true) {
  console.log('hello')
}

在保存代码时，ESLint 就会自动检查是否存在代码规范问题，并进行相应的修复。例如，上面的代码中使用了未使用的变量 foo，ESLint 会自动将该行代码删除。

总结

通过上述步骤，我们就可以在 VS Code 中自动保存并运行 ESLint 检查代码。这样做不仅可以减少我们的工作量，还可以提高代码规范和可维护性，让我们的代码更加健壮和高效。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65a74960add4f0e0ff047a16