在 VSCode 中配置 ESLint + Prettier（超详细）-JavaScript中文网-JavaScript教程资源分享门户

随着前端开发迅猛发展，代码质量已经变得越来越重要。对于团队开发来说，我们希望代码在满足项目需求的同时，仍然保持统一、规范，易于维护。

这就是 ESLint 和 Prettier 的目的。

本文将详细介绍如何在 VSCode 中配置 ESLint 和 Prettier，帮助您提高代码质量。

ESLint 是什么？

ESLint 是一个用于检查代码质量的工具，通过规则和插件的方式，可以实现代码质量的自动化检查和规范。

安装 ESLint 插件，同时在项目根目录下使用以下命令安装 eslint：

npm install eslint --save-dev

安装完 ESLint 后，我们需要配置一些规则。最简单的方式是使用现有的规范：比如 Airbnb、Standard 或 Google。可以在 .eslintrc 文件中指定规范：

{
  "extends": "eslint-config-airbnb",
  "rules": {
    "semi": ["error", "always"]
  }
}

在这个例子中，我们使用 Airbnb 的规范，并调整了一个额外的规则。这里的 "semi": ["error", "always"] 代表一个 ESLint 规则，表示在语句结尾添加分号。

除了上述方法，我们还可以使用其他方式进行配置，比如通过 .eslintrc 文件或使用 JavaScript 进行配置。

可以在 VSCode 工作区内启用 ESLint。在设置中搜索 eslint，找到 ESLint: Enable 将其设置为“always”。

此时，现在可以测试是否配置正确，随便在代码中写些错误，比如：

console.log('Hello, world')

console.log 函数没有添加分号，如果我们保存代码，可以立即看到 VSCode 从 ESLint 输出了错误提示信息。

Prettier 是一个代码格式化工具，可以自动化地格式化 JavaScript、CSS 和 JSON 等代码。基于代码的约定，Prettier 可以在满足项目需求之余，保持代码风格的一致性。

首先安装 Prettier，可以在项目根目录下使用以下命令进行安装：

npm install prettier --save-dev

安装好 Prettier 后，Prettier 配置方式是在工作区根目录下添加一个 .prettierrc 文件。在该文件中，我们可以指定格式选项，比如：

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

其中 trailingComma 选项允许我们指定数组和对象字面值中是否使用逗号结尾，singleQuote 则指定使用单引号而非双引号。

同样可以在 VSCode 工作区启用 Prettier。在设置中搜索 format，并找到 "Editor: Format On Save" 设置为真。这时候保存一个文件将会自动进行格式化。当然使用 Shift+Alt+F 也可以触发格式化。

两者都是代码质量工具，这让人们容易混淆。然而这两者都有其重要的作用和差异。

ESLint 检查代码确保它遵循项目中指定的命令和项目标准，并能够在项目中运行。然而，它不修复格式或样式错误。

Prettier 是一个格式化器，它确保代码采用一致的样式，但它并不关心语言、要编写的主题或代码质量。也就是说，Prettier 可以让您更容易地使代码看起来像您喜欢的样子，但无法确保代码遵循命令或执行有效性。

使用 ESLint 和 Prettier 后，我们可以确保代码风格的一致性，同时还能够及时发现潜在的代码错误，提高代码质量。

ESLint 和 Prettier 是认证的前端开发工具。在 VSCode 中配合使用，可以提高代码质量，同时保持代码风格的一致性，从而使团队能够快速高效地协作开发。

我们在这里能够提供这些详细的配置是因为它们可以确保代码的正确性、质量和统一性，同时也提高了我们自己的理解和学习前端的知识。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/671304dbad1e889fe209ea41