在前端开发中，代码的书写规范和代码风格一直是重点和难点。随着前端项目的复杂度不断提升，代码也变得越来越多、越来越复杂。这时候，使用一些工具来帮助我们规范和统一代码风格是必不可少的。而 ESLint 和 Prettier 就是两个非常优秀的工具之一。
本篇文章将详细介绍如何在 VSCode 中使用 ESLint 和 Prettier 进行代码格式化，并附上示例代码尽可能地帮助读者理解应用 ESLint 和 Prettier 的过程。
一、什么是 ESLint 和 Prettier
1.1 ESLint
ESLint 是一个开源的 JavaScript 语法检查工具，它可以帮助我们发现和修复代码中的错误或者潜在问题。ESLint 可以根据一些预设规则或者自定义规则来检查代码的质量，出现问题时会在控制台输出错误信息。
1.2 Prettier
Prettier 是一个流行的代码格式化工具，它可以将代码自动转化为一种格式良好且一致的风格，这有助于提高代码的可读性和可维护性。Prettier 可以帮助我们处理代码缩进、空格、分号、引号等方面的问题。
二、在 VSCode 中配置 ESLint 和 Prettier
2.1 安装 VSCode 插件
首先我们需要安装 VSCode 的 ESLint 和 Prettier 插件，可以直接在插件商店中搜索并安装。安装完成后需要重新启动 VSCode。
2.2 创建并配置 .eslintrc.json 文件
在项目的根目录下创建一个 .eslintrc.json 文件，这个文件用来存放 ESLint 的配置信息。
下面是示例配置：
{
"env": {
"browser": true,
"es6": true
},
"extends": [
"eslint:recommended",
"plugin:prettier/recommended"
],
"parserOptions": {
"ecmaVersion": 2018
},
"plugins": [
"prettier"
],
"rules": {
"prettier/prettier": "error"
}
}这里简单介绍一些比较关键的配置项：
- env：设置运行环境，这里设置了浏览器和 ES6。
- extends：继承其他 ESLint 配置，这里继承了 ESLint 推荐的规则和 Prettier 推荐的规则。
- parserOptions：设置 ECMAScript 版本。
- plugins：指定使用的插件，这里使用了 Prettier。
- rules：定义我们自己的规则，这里只定义了一个规则，就是通过 Prettier 检查代码格式。
2.3 创建并配置 .prettierrc.json 文件
在项目的根目录下创建一个 .prettierrc.json 文件，这个文件用来存放 Prettier 的配置信息。
下面是示例配置：
{
"printWidth": 120,
"trailingComma": "es5",
"tabWidth": 2,
"semi": true,
"singleQuote": true
}这里简单介绍一些比较关键的配置项：
- printWidth：设置单行代码的最多字符数。
- trailingComma：设置是否在最后一个属性或元素后加逗号。
- tabWidth：设置一个 tab 键的宽度是多少个空格。
- semi：设置是否在每个语句末尾添加分号。
- singleQuote：设置是否使用单引号。
2.4 配置 VSCode 设置
在 VSCode 设置中搜索 "eslint"，找到 "ESLint: Auto Fix On Save" 配置项并将其勾选。
然后在 VSCode 设置中搜索 "prettier"，找到 "Prettier: Require Config" 配置项并将其勾选。
至此，ESLint 和 Prettier 的配置就完成了。
三、使用 ESLint 和 Prettier 进行代码格式化
3.1 ESLint 检查代码
在编辑器中打开一个 JS 文件，可以看到代码的每行左边有一个圆点标志，表示这一行是否有 ESLint 报错。将鼠标悬浮在这个圆点上，会显示具体错误信息。
如果我们想手动触发 ESLint 的代码检查，可以打开命令面板（默认快捷键为 Ctrl + Shift + P），输入 "ESLint: Check File"，按下回车键即可。
3.2 使用 Prettier 格式化代码
当我们写完一段代码时，想要让代码更加美观、易读，可以使用 Prettier 进行代码格式化。
在 VSCode 中按下快捷键 Shift + Alt + F，或者右键选择 "Format Document" 即可使用 Prettier 对代码进行格式化。
此时我们可以在控制台中查看 Prettier 的详细信息。
四、总结
ESLint 和 Prettier 分别提供了代码规范检查和代码自动格式化功能，它们的配合可以大大提高前端代码的质量和可读性。
本文通过示例代码详细介绍了在 VSCode 中配置和使用 ESLint 和 Prettier 的方法。希望能够对读者有所帮助。
如有疑问或建议，欢迎在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65af8065add4f0e0ff8f1bc1