VSCode如何安装Prettier_代码格式化工具配置

8次阅读

vscode中安装Prettier插件后必须配置prettier.config.js或.prettierrc文件并设置editor.defaultformatter和editor.formatOnSave,否则格式化无效;还需手动为jsonmarkdown等语言指定默认格式化器,并用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 接管格式化逻辑

很多项目同时装了 ESLintPrettier,结果保存后代码被反复改写:ESLint 报“缺少分号”,Prettier 又删掉它。这不是 bug,是两者职责重叠了。

  • 正确做法是用 eslint-config-prettier 关掉 ESLint 中所有和格式相关的规则
  • 再配合 eslint-plugin-prettier,把 Prettier 当作 ESLint 的一个“规则”来运行(只检查,不修复)
  • 最终格式化动作统一交给 Prettier 插件完成,ESLint 只负责逻辑/安全类检查
  • VSCode 设置里确认 editor.formatOnSave 启用,并设 editor.defaultFormatteresbenp.prettier-vscode

某些文件类型默认不走 Prettier,得手动指定

比如 .json.md.yml 这些非 JS/TS 文件,即使装了插件也不会自动格式化,因为 Prettier 插件默认只绑定 javascripttypescriptvue 等语言 ID。

  • 在 VSCode 设置(settings.json)里加:
    "[json]": {   "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[markdown]": {   "editor.defaultFormatter": "esbenp.prettier-vscode" }
  • 注意语法:方括号里是语言 ID,不是文件后缀;可用 Ctrl+Shift+PChange Language Mode 查当前文件的语言 ID
  • 如果用了 prettier-ignore 注释,它只对紧邻的下一行生效,多行需重复写

配置真正起效的关键,往往不在“装没装”,而在“VSCode 是否把某类文件的格式化任务交给了 Prettier”,以及“Prettier 自己有没有拿到明确的规则”。这两点漏掉任何一个,都会导致保存时静默失败或行为异常。

text=ZqhQzanResources