VSCode-自动格式化ESLint-与-Prettier
VSCode 自动格式化：ESLint 与 Prettier
前言
在现代前端开发中，代码风格的一致性是一个永恒的话题。无论是团队协作还是个人项目，保持代码整洁、可读性强是每个开发者追求的目标。而 VSCode
提供了强大的工具链，让我们可以通过简单的配置实现 按下 Command + S（Mac）或 Ctrl + S（Windows/Linux）时自动格式化代码 的功能。听起来很酷对吧？但你知道这背后的机制和细节吗？
今天，我们就来深入探讨如何通过 ESLint 和 Prettier 的结合，在 VSCode 中实现这一“自动化”流程，并揭示其中的一些关键点。
一、确保插件已正确安装
首先，我们需要确保两个核心工具已经就位：ESLint 和 Prettier。它们分别扮演着不同的角色：
- ESLint 是一个静态代码分析工具，用于检查代码中的潜在问题，并提供修复建议。
- Prettier 是一个代码格式化工具，专注于统一代码风格，比如缩进、引号、分号等。
如果你还没有安装这两个插件，可以打开
VSCode的扩展市场，搜索并安装以下两个插件： - ESLint （作者：Dirk Baeumer）
- Prettier - Code formatter （作者：Prettier） 安装完成后，记得启用它们。
小提示：插件只是第一步，真正让它们发挥作用的是后续的配置。别急，我们慢慢来。
二、配置默认格式化工具
VSCode 支持多种格式化工具（比如内置的格式化器、Prettier、Beautify 等），但我们希望明确指定 Prettier
作为默认格式化工具。为什么？因为 Prettier 更加专注于代码风格，且与 ESLint 的集成更加顺畅。
方法一：通过 UI 设置
- 打开 VSCode 设置（Mac:
Cmd + ,，Windows/Linux:Ctrl + ,）。 - 搜索
Default Formatter。 - 将其设置为
esbenp.prettier-vscode（即 Prettier 插件）。
方法二：直接修改 settings.json
如果你更喜欢手动编辑配置文件，可以在 settings.json 中添加如下内容：
“[javascript]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
},
“[typescript]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
},
“[html]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
},
“[vue]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
}
这段配置的意思是：针对 JavaScript、TypeScript、HTML 和 Vue 文件，默认使用 Prettier 进行格式化。
三、启用保存时自动格式化
接下来，我们需要告诉 VSCode 在保存文件时自动格式化代码。这个功能非常实用，因为它让你无需额外操作即可保持代码整洁。
方法一：通过 UI 设置
- 打开设置（
Cmd +, 或Ctrl + ,）。 - 搜索
Format On Save。 - 勾选
Editor: Format On Save。
方法二：直接修改 settings.json
在 settings.json 中添加以下配置：
“editor.formatOnSave”: true
这样，每次保存文件时，VSCode 都会调用默认格式化工具（也就是我们刚刚配置的 Prettier）对代码进行格式化。
四、配置 ESLint 自动修复
虽然 Prettier 负责代码风格，但 ESLint 的作用不可忽视——它可以捕获代码中的潜在问题（如未使用的变量、语法错误等）。为了让
ESLint 在保存时也能自动修复这些问题，我们需要启用它的 Auto Fix On Save 功能。
方法一：通过 UI 设置
- 打开设置（
Cmd +, 或Ctrl + ,）。 - 搜索
ESLint: Auto Fix On Save。 - 勾选该选项。
方法二：直接修改 settings.json
在 settings.json 中添加以下配置：
“editor.codeActionsOnSave”: {
“source.fixAll.eslint”: true
}
这段配置的意思是：在保存文件时，自动运行 ESLint 的修复功能。
五、让 Prettier 和 ESLint 协同工作
到目前为止，我们已经配置了 Prettier 和 ESLint 的基本功能，但它们之间可能会存在规则冲突。例如，ESLint
可能要求使用双引号，而 Prettier 默认使用单引号。这种冲突会导致格式化结果不一致。
为了避免这种情况，我们可以使用 eslint-config-prettier 和 eslint-plugin-prettier 来协调两者的规则。
步骤：
- 在项目根目录下安装依赖： npm install –save-dev eslint-config-prettier eslint-plugin-prettier
- 更新
.eslintrc.js文件，添加以下配置： module.exports = { extends: [ ’eslint:recommended’, ‘plugin:prettier/recommended’ // 启用 Prettier 规则 ], plugins: [‘prettier’], rules: { ‘prettier/prettier’: ’error’ // 将 Prettier 格式问题视为 ESLint 错误 } }; 通过这种方式，ESLint会优先使用Prettier的规则，从而避免冲突。
六、验证配置
完成上述步骤后，我们需要验证配置是否生效。以下是验证方法：
- 打开一个
JavaScript/TypeScript/Vue文件。 - 故意写一些不符合格式规范的代码（例如多余的空格、未对齐的缩进等）。
- 按下
Command + S或Ctrl + S。 - 如果配置正确，代码应该会自动格式化，并且
ESLint的问题也会被修复。
七、完整的 settings.json 示例
为了方便参考，这里是一个完整的 settings.json 配置示例：
{
“[javascript]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
},
“[typescript]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
},
“[html]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
},
“[vue]”: {
“editor.defaultFormatter”: “esbenp.prettier-vscode”
},
“editor.formatOnSave”: true,
“editor.codeActionsOnSave”: {
“source.fixAll.eslint”: true
},
“eslint.validate”: [
“javascript”,
“typescript”,
“html”,
“vue”
],
“prettier.singleQuote”: true,
“prettier.semi”: false,
“prettier.tabWidth”: 2
}
八、常见问题排查
问题 1：格式化未生效
确保当前文件类型支持 Prettier（例如 .js, .ts, .vue 等）。
检查 settings.json 中是否正确设置了 editor.defaultFormatter。
问题 2：ESLint 自动修复未生效
确保项目中已安装 ESLint 和相关插件。
检查 .eslintrc.js 文件是否正确配置了 eslint-plugin-prettier。
问题 3：规则冲突
如果 Prettier 和 ESLint 规则冲突，优先使用 eslint-config-prettier 来禁用冲突规则。
结语
通过以上步骤，你应该能够实现按下 Command + S 或 Ctrl + S 时自动格式化代码并修复 ESLint
问题的功能！这个小小的配置不仅能提升你的开发效率，还能让你的代码始终保持一致性。
当然，工具只是辅助，真正的代码质量还需要靠你的经验和思考。希望这篇文章能帮助你更好地理解 VSCode 的配置机制，并为你带来一些启发！