使用 Prettier 时常见的问题有哪些?如何解决?

Prettier 配置不生效怎么办?

修改 .prettierrc 后格式化无变化,是最常见的坑。排查顺序:先用 prettier --find-config-path <file> 确认实际加载的配置文件,可能被上层目录的配置覆盖;再检查 JSON 语法是否合法(多余逗号是最常见的错误);最后重启编辑器,VS Code 会缓存配置。

多配置文件共存时,Prettier 按 .prettierrc > .prettierrc.json > .prettierrc.yml > prettier.config.js 的顺序查找,找到一个就停止。用 --config 显式指定可以彻底消除歧义。

追问: .prettierignore 和 .gitignore 的区别是什么? — .prettierignore 只控制 Prettier 忽略哪些文件,不影响 Git;.gitignore 不被 Prettier 自动读取,除非用 --ignore-path .gitignore 显式指定。

如何忽略特定文件的格式化?

三种方式,适用场景不同:

• 项目级忽略: .prettierignore 文件,语法与 .gitignore 一致,适合忽略 dist/、vendor/ 等目录
• 行内忽略: // prettier-ignore 注释,只忽略紧跟的下一行

javascript
// prettier-ignore
const matrix = [
  [1, 2, 3],
  [4, 5, 6],
];

• 部分规则覆盖: overrides 字段,为特定文件类型设置不同规则

json
{
  "overrides": [
    {
      "files": "*.md",
      "options": { "proseWrap": "always" }
    }
  ]
}

追问: // prettier-ignore 能忽略整个文件吗? — 不能,它只作用于紧跟的下一个语法节点。要忽略整个文件,用 .prettierignore。

Prettier 和 ESLint 冲突如何解决?

这是面试高频题。冲突根源:ESLint 有格式规则(如缩进、引号),Prettier 也有自己的规则,两者同时作用就会打架。

标准解法分两步:

1. 安装 eslint-config-prettier,它会关闭所有与 Prettier 冲突的 ESLint 规则
2. (可选) 安装 eslint-plugin-prettier,将 Prettier 格式问题作为 ESLint 错误报告

javascript
// .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended' // 必须放最后,否则会被前面的配置覆盖
  ]
};

plugin:prettier/recommended 已经包含了 eslint-config-prettier,不需要重复引入。extends 的顺序很关键——后面的配置会覆盖前面的,所以 Prettier 相关配置必须放末尾。

追问: eslint-plugin-prettier 和 prettier-eslint 有什么区别? — eslint-plugin-prettier 让 ESLint 调用 Prettier;prettier-eslint 让 Prettier 的输出再过一遍 ESLint fix。前者是主流方案。

大项目格式化太慢怎么办?

Prettier 3.x 原生支持 --cache,只格式化变更的文件:

bash
prettier --write --cache .

配合 lint-staged 只处理暂存文件更高效:

json
{
  "lint-staged": {
    "*.{js,ts}": ["prettier --write"]
  }
}

升级版本也有明显收益。Prettier 3 基于 ECMAScript 2024 重写了解析器,格式化速度比 2.x 快 2-3 倍。

追问: --cache 的缓存存在哪里? — 默认存在 node_modules/.cache/prettier,可以通过 --cache-location 自定义路径。

VS Code 中 Prettier 保存不格式化?

检查清单:

1. 安装了 Prettier 扩展
2. settings.json 中设置 "editor.formatOnSave": true
3. "editor.defaultFormatter" 设为 "esbenp.prettier-vscode"
4. 如果项目有多个 formatter,需要在 "[javascript]" 等语言设置中指定

json
{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

多编辑器协作时,加 .editorconfig 统一基础缩进和换行符,避免 Tab/Space 之争。

团队版本不一致怎么处理?

锁定版本是最直接的办法:

json
// package.json
{
  "devDependencies": {
    "prettier": "3.3.3"  // 不用 ^ 前缀
  }
}

团队用 npm ci 安装依赖,它会严格按 package-lock.json 安装,忽略 node_modules 中已有的版本。CI 环境同理,npm ci 比 npm install 更可靠。

升级 Prettier 大版本时,格式化结果可能变化。正确做法:单独开分支升级,确认无异常再合入主干,不要在功能分支中顺手升级。