如何在 VS Code 中配置 ESLint

什么是 ESLint？

ESLint 是一个 JavaScript 代码检查工具，它能够对代码进行静态分析，找出潜在的问题，并提供一些规则来修复这些问题。与其他代码检查工具相比，ESLint 可以根据开发者的需求自定义规则，从而提高代码的质量和可维护性。

在 VS Code 中配置 ESLint

在 VS Code 中使用 ESLint，需要安装以下两个插件：

• ESLint
• Prettier - Code formatter

ESLint 插件可以让 VS Code 在编辑代码时检查语法和代码风格，而 Prettier 插件可以在保存代码时自动进行格式化。这两个插件的结合使用可以大大提高代码的质量和可读性。

步骤一：安装插件

在 VS Code 中打开扩展面板（按下 Ctrl+Shift+X 或者点击左侧栏的扩展图标），搜索并安装 ESLint 和 Prettier 插件。

步骤二：配置 ESLint

在 VS Code 中打开设置面板（按下 Ctrl+, 或者点击左下角的设置图标），搜索 eslint 关键字，找到 ESLint: Options 选项，点击 Edit in settings.json 按钮，打开 settings.json 文件。

在 settings.json 文件中添加以下配置：

// javascriptcn.com 代码示例
"eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
],
"eslint.options": {
    "configFile": "./.eslintrc.json"
},
"editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
}

其中，eslint.validate 配置项指定了需要检查的文件类型，eslint.options 配置项指定了 ESLint 配置文件的路径，editor.codeActionsOnSave 配置项指定了在保存文件时自动修复 ESLint 检查出的问题。

步骤三：配置 Prettier

在 VS Code 中打开设置面板，搜索 prettier 关键字，找到 Prettier: Require Config 选项，勾选它，表示使用项目中的 .prettierrc 配置文件。

在项目根目录中创建 .prettierrc 配置文件，添加以下内容：

{
    "singleQuote": true,
    "trailingComma": "es5"
}

这里只是演示了两个配置项，更多配置项请参考 Prettier 官方文档。

步骤四：创建 ESLint 配置文件

在项目根目录中创建 .eslintrc.json 配置文件，添加以下内容：

// javascriptcn.com 代码示例
{
  "env": {
    "browser": true,
    "es2021": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 12,
    "sourceType": "module"
  },
  "plugins": [
    "@typescript-eslint"
  ],
  "rules": {
    "semi": ["error", "always"],
    "quotes": ["error", "single"]
  }
}

这里只是演示了两个规则，更多规则请参考 ESLint 官方文档。

总结

通过以上步骤，我们就可以在 VS Code 中配置 ESLint 和 Prettier，从而提高代码的质量和可读性。同时，我们也学习了如何定义 ESLint 规则和 Prettier 配置文件，这对我们编写高质量的代码非常有帮助。

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