乐闻世界logo
5月27日 22:02

如何在 VS Code 和 WebStorm 中配置 Prettier？

核心答案：项目级 .prettierrc + 编辑器保存时格式化

不管用什么编辑器，Prettier 配置的核心原则只有一条：把规则写在项目根目录的 .prettierrc 里，编辑器只负责触发格式化。这样团队成员用不同编辑器，跑出来的结果完全一致。

json
{
  "semi": true,
  "singleQuote": true,
  "trailingComma": "es5",
  "printWidth": 80,
  "tabWidth": 2
}

VS Code 怎么配？

安装 esbenp.prettier-vscode 扩展，在 .vscode/settings.json 中设为默认格式化器并开启保存格式化：

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

关键设置 prettier.requireConfig: true——强制要求项目有 .prettierrc 才格式化，防止编辑器全局配置污染项目。

WebStorm 怎么配？

WebStorm 内置 Prettier 支持，路径：Settings → Languages & Frameworks → JavaScript → Prettier。勾选"On save"即可。

如果项目 package.json 里有 prettier 依赖，WebStorm 会自动检测并启用。

Vim/Neovim 怎么配？

Neovim 推荐 null-ls（现已迁移至 none-ls）：

lua
local null_ls = require("null-ls")
null_ls.setup({
  sources = { null_ls.builtins.formatting.prettier },
})
vim.cmd([[autocmd BufWritePre * lua vim.lsp.buf.format({ async = false })]])

coc.nvim 用户：:CocInstall coc-prettier，配合 BufWritePre 自动格式化。

配置冲突怎么排查？

Prettier 格式化不生效，按这个顺序排查：

  1. 编辑器是否将 Prettier 设为默认格式化器（VS Code 常见问题：ESLint 扩展抢占了默认格式化器）
  2. 项目是否有多个 .prettierrc（检查根目录和子目录），Prettier 按最近原则读取
  3. .prettierignore 是否误排除了目标文件
  4. VS Code 中 prettier.requireConfig 与项目配置是否匹配

团队统一的关键动作

  • .prettierrc 和 .prettierignore 提交到 Git
  • .vscode/settings.json 也提交（VS Code 用户自动生效）
  • README 中注明 WebStorm 用户需手动开启"On save"
  • CI 中加 prettier --check . 防止未格式化代码合入
标签：VSCodePrettier