VSCode中安装Prettier插件后必须配置prettier.config.js或.prettierrc文件并设置editor.defaultFormatter和editor.formatOnSave,否则格式化无效;还需手动为JSON、Markdown等语言指定默认格式化器,并用eslint-config-prettier避免与ESLint冲突。
VSCode 里装 Prettier 插件很简单,但光装不配置等于没装
直接在扩展市场搜 prettier - code formatter,点击安装即可。它本身不带任何默认格式规则——你打开一个 .js 或 .vue 文件按 shift+alt+f,大概率没反应,或者报错 no configuration provided for ...。这是因为 prettier 需要明确知道“按什么规则格式化”,而 vscode 默认不会自动读取项目级配置。
必须配 prettier.config.js 或 .prettierrc 才生效
只靠插件 UI 设置(比如在设置里搜 prettier 开关)只能控制是否启用、用不用分号这类极简选项,无法覆盖真实项目中常见的缩进、引号、行宽等需求。实际项目几乎都靠配置文件驱动。
- 推荐在项目根目录放
prettier.config.js,内容可写成:module.exports = { semi: true, singleQuote: true, tabWidth: 2, trailingComma: 'es5', printWidth: 80 }; - 也可以用 JSON 格式:新建
.prettierrc,内容为{ "semi": true, "singleQuote": true } - 注意:VSCode 不会自动继承父目录的配置,如果子项目要独立格式规则,得在该子目录下也放一份配置文件
和 ESLint 冲突时,优先让 Prettier 接管格式化逻辑
很多项目同时装了 ESLint 和 Prettier,结果保存后代码被反复改写:ESLint 报“缺少分号”,Prettier 又删掉它。这不是 bug,是两者职责重叠了。
- 正确做法是用
eslint-config-prettier关掉 ESLint 中所有和格式相关的规则 - 再配合
eslint-plugin-prettier,把 Prettier 当作 ESLint 的一个“规则”来运行(只检查,不修复) - 最终格式化动作统一交给 Prettier 插件完成,ESLint 只负责逻辑/安全类检查
- VSCode 设置里确认
editor.formatOnSave启用,并设editor.defaultFormatter为esbenp.prettier-vscode
某些文件类型默认不走 Prettier,得手动指定
比如 .json、.md、.yml 这些非 JS/TS 文件,即使装了插件也不会自动格式化,因为 Prettier 插件默认只绑定 javascript、typescript、vue 等语言 ID。
- 在 VSCode 设置(
settings.json)里加:"[json]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[markdown]": { "editor.defaultFormatter": "esbenp.prettier-vscode" } - 注意语法:方括号里是语言 ID,不是文件后缀;可用
Ctrl+Shift+P→Change Language Mode查当前文件的语言 ID - 如果用了
prettier-ignore注释,它只对紧邻的下一行生效,多行需重复写
配置真正起效的关键,往往不在“装没装”,而在“VSCode 是否把某类文件的格式化任务交给了 Prettier”,以及“Prettier 自己有没有拿到明确的规则”。这两点漏掉任何一个,都会导致保存时静默失败或行为异常。









