Webstorm配置Prettier格式化代码

Prettier 是什么、为什么要装

每个团队代码风格都不一样:有人爱 4 空格、有人爱 2 空格,有人加分号、有人不加。代码评审里因为这种事情来回怼,效率极低。Prettier 的思路就是 —— 干脆所有人都不用纠结,设一份规则,工具自动格式化,大家不再讨论。

下面是 WebStorm(包括同家族的 IntelliJ IDEA、PhpStorm 等)里把 Prettier 接进去的完整步骤,顺带把 VS Code 的全局配置也列出来 —— 两边的项目配置文件 .prettierrc 是通用的。

第一步:装到项目里

不要全局装 Prettier,要装到项目本地依赖里。这样团队每个人用的版本一致,不会因为本地版本不同格式化出不同结果。

npm install --save-dev --save-exact prettier

这里两个参数都关键:

• --save-dev 写进 devDependencies(开发依赖,生产不需要)
• --save-exact 把版本号锁死("prettier": "3.1.0" 而不是 "^3.1.0"),防止小版本升级带来意外的格式变化

用 pnpm / yarn 也行:

pnpm add -D -E prettier
yarn add -D --exact prettier

第二步:WebStorm 装 Prettier 插件

WebStorm 2020.1+ 已经内置 Prettier 集成,如果你的版本更老,需要从插件商店搜索安装。

找到 Prettier 插件,装好,重启 WebStorm。

第三步:配置 Prettier

设置路径:File → Settings → Languages & Frameworks → JavaScript → Prettier。

三个关键项:

1. Prettier package —— 选项目 node_modules 里的那个(就是上一步装的)。WebStorm 通常会自动找到。
2. Run for files —— 配置哪些扩展名启用 Prettier:

{**/*,*}.{js,ts,jsx,tsx,vue,json,css,scss,less,html,md}

3. 勾上 "On save" 和 "On 'Reformat Code' action" —— 保存时自动格式化,以及 Ctrl+Alt+L 这种快捷格式化时也走 Prettier 而不是 WebStorm 内置的。

第四步:写项目级 .prettierrc 配置

在项目根目录新建 .prettierrc(JSON 格式)或者 .prettierrc.json 或者 .prettierrc.js:

{
  "useTabs": false,
  "tabWidth": 4,
  "printWidth": 120,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false
}

各项含义:

• useTabs: false + tabWidth: 4 —— 用 4 个空格缩进(团队按口味来,主流是 2 空格)
• printWidth: 120 —— 每行超过 120 字符自动换行(默认 80 太挤,现代显示器够宽)
• singleQuote: true —— 字符串用单引号 'foo' 而不是 "foo"
• trailingComma: "none" —— 数组/对象最后一项后不加逗号("all" 是加,git diff 更干净)
• semi: false —— 行尾不加分号(JS 自动插入,大部分场景不需要)

顺便:.prettierignore

跟 .gitignore 一样的格式,告诉 Prettier 哪些文件别动:

node_modules
dist
build
.next
.nuxt
*.min.js
*.min.css
public/
coverage/
package-lock.json
pnpm-lock.yaml

VS Code 全局配置(替代方案)

如果你不用 WebStorm 用 VS Code,在 settings.json 里加这些,效果一样:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "prettier.printWidth": 120,
  "prettier.tabWidth": 4,
  "prettier.useTabs": false,
  "prettier.semi": false,
  "prettier.singleQuote": true,
  "prettier.proseWrap": "preserve",
  "prettier.arrowParens": "avoid",
  "prettier.bracketSpacing": true,
  "prettier.endOfLine": "auto",
  "prettier.htmlWhitespaceSensitivity": "ignore",
  "prettier.jsxSingleQuote": false,
  "prettier.trailingComma": "none",
  "prettier.requireConfig": false
}

注意:VS Code 里的全局配置会被项目级 .prettierrc 覆盖(只要项目里有 .prettierrc,优先用它)。所以全局配置只是给"没有项目配置文件"的小项目兜底用。团队项目永远以 .prettierrc 为准。

跟 ESLint 共存(避免互相打架)

很多项目同时用 ESLint 和 Prettier,这俩功能有重叠 —— ESLint 也能管缩进、引号这种事。如果两个工具各自一套规则,保存时一个改完另一个又改回去,会陷入死循环。

标准做法:让 Prettier 管"格式",ESLint 管"代码质量"。装一个胶水包关掉 ESLint 里跟格式有关的规则:

npm i -D eslint-config-prettier

然后 .eslintrc 里把它放最后:

{
  "extends": [
    "eslint:recommended",
    "plugin:vue/vue3-recommended",
    "prettier"
  ]
}

这样 ESLint 不再管空格、引号、分号这些 Prettier 已经处理的事,各司其职,不打架。

CI 里把它跑起来

本地开发自动格式化只是一道,真正保险是 CI 里加一道校验:

{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

CI 里跑 npm run format:check,有任何文件没格式化就 fail 掉 build。这一招配合 husky + lint-staged 在 git commit 时自动 format,基本就不会有未格式化代码进仓库了。

—— 别看了 · 2026