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 自己有没有拿到明确的规则”。这两点漏掉任何一个，都会导致保存时静默失败或行为异常。