前言
在前端开发中，代码规范是非常重要的一环。代码规范的好坏直接影响代码的可读性、可维护性以及团队合作的效率。为了保证代码规范，我们可以使用 ESLint 和 Prettier 这两个工具。本文将介绍如何在 VS Code 中配置 ESLint 和 Prettier，并使用它们来保证 JS 代码规范。
ESLint
ESLint 是一个用于检查 JavaScript 代码是否符合规范的工具。它可以帮助我们发现代码中的潜在错误、不一致的风格以及不必要的复杂性。在使用 ESLint 之前，我们需要先安装它。在终端中输入以下命令：
npm install eslint --save-dev
安装完成后，我们需要创建一个 .eslintrc 文件来配置 ESLint。以下是一个简单的 .eslintrc 配置文件：
-- -------------------- ---- ------- - ---------- --------------------- ---------------- - -------------- ---- -- ------ - ------ ----- ---------- ---- -- -------- - ------------- ------ --------- --------- --- --------- --------- ---------- ------- --------- --------- - -展开代码
extends：指定了我们要使用的 ESLint 规则集，这里使用了eslint:recommended，它包含了一些常见的规则。parserOptions：指定了使用的 ECMAScript 版本。env：指定了代码运行的环境，这里指定了浏览器和 ES6。rules：指定了我们要使用的规则，这里禁用了no-console规则，使得我们可以在代码中使用console，并且指定了缩进、引号和分号的规则。
在 VS Code 中，我们可以安装 ESLint 插件来检查代码是否符合规范。在 VS Code 中按下 Ctrl + Shift + X 打开扩展面板，搜索 ESLint 并安装。安装完成后，我们需要在 VS Code 的设置中启用 ESLint：
{ "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.alwaysShowStatus": true }
以上配置将在保存文件时自动修复代码中的错误，并在状态栏中显示 ESLint 的检查结果。
Prettier
Prettier 是一个代码格式化工具，它可以将代码格式化成一致的风格，从而提高代码的可读性和可维护性。在使用 Prettier 之前，我们需要先安装它。在终端中输入以下命令：
npm install prettier --save-dev
安装完成后，我们需要创建一个 .prettierrc 文件来配置 Prettier。以下是一个简单的 .prettierrc 配置文件：
{ "singleQuote": true, "semi": true, "tabWidth": 2, "trailingComma": "es5" }
singleQuote：使用单引号而非双引号。semi：使用分号。tabWidth：缩进宽度为 2。trailingComma：在对象或数组最后一个元素后面加上逗号。
在 VS Code 中，我们可以安装 Prettier 插件来格式化代码。在 VS Code 中按下 Ctrl + Shift + X 打开扩展面板，搜索 Prettier 并安装。安装完成后，我们需要在 VS Code 的设置中启用 Prettier：
{ "editor.formatOnSave": true, "prettier.singleQuote": true, "prettier.semi": true, "prettier.tabWidth": 2, "prettier.trailingComma": "es5" }
以上配置将在保存文件时自动格式化代码，并使用我们指定的 Prettier 规则。
ESLint + Prettier
ESLint 和 Prettier 都可以帮助我们保证代码规范，但它们的规则集有些重叠，有时候会产生冲突。为了解决这个问题，我们可以使用 eslint-config-prettier 插件来禁用 ESLint 中与 Prettier 冲突的规则。在终端中输入以下命令：
npm install eslint-config-prettier --save-dev
安装完成后，我们需要修改 .eslintrc 文件：
-- -------------------- ---- ------- - ---------- ---------------------- ------------ ---------------- - -------------- ---- -- ------ - ------ ----- ---------- ---- -- -------- - ------------- ------ --------- --------- --- --------- --------- ---------- ------- --------- --------- - -展开代码
以上配置中，我们将 extends 属性修改为 ["eslint:recommended", "prettier"]，这样 ESLint 将会使用 eslint:recommended 规则集和 Prettier 的规则。这样就可以避免 ESLint 和 Prettier 的规则冲突了。
示例代码
以下是一个使用了 ESLint 和 Prettier 的示例代码：
-- -------------------- ---- ------- ----- - - - ----- --- - - ----- -------- ---- --- - ---------------- -------- ------ -- - ------ - - - - ------------------ ---展开代码
在保存文件时，ESLint 和 Prettier 将会自动修复代码中的错误和格式化代码：
-- -------------------- ---- ------- ----- - - - ----- --- - - ----- -------- ---- --- - ---------------- -------- ------ -- - ------ - - - - ------------------ ---展开代码
结语
通过使用 ESLint 和 Prettier，我们可以保证代码规范，提高代码的可读性和可维护性。在实际开发中，我们应该根据团队的需求和项目的特点来配置 ESLint 和 Prettier。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67caab4ae46428fe9e312f2c
