VSCode 自动格式化:ESLint 与 Prettier
文章目录
- 前言
- 一、确保插件已正确安装
- 二、配置默认格式化工具
- 方法一:通过 UI 设置
- 方法二:直接修改 settings.json
- 三、启用保存时自动格式化
- 方法一:通过 UI 设置
- 方法二:直接修改 settings.json
- 四、配置 ESLint 自动修复
- 方法一:通过 UI 设置
- 方法二:直接修改 settings.json
- 五、让 Prettier 和 ESLint 协同工作
- 六、验证配置
- 七、完整的 settings.json 示例
- 八、常见问题排查
- 问题 1:格式化未生效
- 问题 2:ESLint 自动修复未生效
- 问题 3:规则冲突
- 结语
前言
在现代前端开发中,代码风格的一致性是一个永恒的话题。无论是团队协作还是个人项目,保持代码整洁、可读性强是每个开发者追求的目标。而 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
的配置机制,并为你带来一些启发!