Prettier 常用命令

Prettier 是一个有态度的代码格式化工具，支持 JavaScript、TypeScript、CSS、HTML、Markdown 等多种文件格式。

安装

# 安装
npm install -D prettier

常用命令

格式化代码

# 格式化指定文件
npx prettier --write src/index.ts

# 格式化整个目录
npx prettier --write src/

# 格式化当前目录下所有文件
npx prettier --write .

# 格式化并检查（不写入，用于 CI）
npx prettier --check src/

忽略文件

# .prettierignore
node_modules/
dist/
*.min.js
pnpm-lock.yaml
yarn.lock
package-lock.json

配置文件

.prettierrc

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf"
}

常用配置项

配置项	默认值	说明
semi	true	是否加分号
singleQuote	false	是否使用单引号
tabWidth	2	缩进空格数
trailingComma	"es5"	尾逗号
printWidth	80	每行最大字符数
bracketSpacing	true	对象括号间是否加空格

编辑器集成

VSCode

1. 安装 Prettier 扩展
2. 设置为默认格式化工具：

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

针对不同文件类型

// .vscode/settings.json
{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

与 ESLint 配合

ESLint 负责代码质量检查，Prettier 负责代码格式化，各司其职。配合方式详见 ESLint 与 Prettier 冲突。

# 安装依赖
npm install -D eslint-config-prettier eslint-plugin-prettier

// .eslintrc.js
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:prettier/recommended',
  ],
}

常见问题

格式化不生效

# 确认 Prettier 扩展已安装并设置为默认格式化工具
# 检查 .vscode/settings.json
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

# 确认没有其他格式化工具冲突（如 Beautify）

与 ESLint 冲突

ESLint 和 Prettier 都可能格式化代码，导致冲突。解决方案：

# 安装 eslint-config-prettier（禁用 ESLint 中与 Prettier 冲突的规则）
npm install -D eslint-config-prettier

# 在 .eslintrc.js 中添加
extends: [
  'eslint:recommended',
  'prettier',  // 放在最后
]

忽略特定文件或代码

# .prettierignore
node_modules/
dist/
*.min.js
pnpm-lock.yaml
yarn.lock
package-lock.json

在文件中跳过格式化：

<!-- prettier-ignore -->
<div  class="my-div"   />

// prettier-ignore
const matrix = [
  1, 0, 0,
  0, 1, 0,
  0, 0, 1
]

格式化结果与预期不符

# 检查是否有 .editorconfig 文件影响配置
# 检查项目中是否有多个 .prettierrc 文件（就近优先）

# 查看当前生效的配置
npx prettier --find-config-path .

---

参考

• Prettier 官方文档
• Prettier GitHub
• Prettier Playground（在线试用）

---

CLI 常用参数

参数	说明	示例
--write	格式化并写入文件	npx prettier --write src/
--check	检查是否已格式化（不修改文件，CI 用）	npx prettier --check src/
--list-different	列出未格式化的文件	npx prettier --list-different src/
--ignore-path	指定忽略文件路径	npx prettier --ignore-path .prettierignore src/
--config	指定配置文件路径	npx prettier --config .prettierrc src/
--no-config	不使用配置文件	npx prettier --no-config src/
--find-config-path	查找当前生效的配置文件	npx prettier --find-config-path .
--prose-wrap	Markdown 换行方式	npx prettier --prose-wrap always src/
--tab-width	指定缩进空格数	npx prettier --tab-width 4 src/

---

与同类工具的区别

工具	定位	特点	适用场景
Prettier	代码格式化	有态度的格式化，配置少，支持多语言	前端项目首选，统一代码风格
ESLint	代码检查 + 风格	规则丰富，可配置格式化规则	代码质量检查为主
Biome	检查 + 格式化	Rust 实现，速度极快	新项目可考虑，ESLint + Prettier 替代品
StandardJS	检查 + 格式化	零配置，开箱即用	不想花时间配置

💡 推荐组合：ESLint（代码检查）+ Prettier（代码格式化），各司其职。

---

Vue / Vite 项目完整配置示例

安装依赖

npm install -D prettier eslint-config-prettier

.prettierrc 配置

{
  "semi": false,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf",
  "vueIndentScriptAndStyle": true,
  "htmlWhitespaceSensitivity": "ignore"
}

配置项	说明
vueIndentScriptAndStyle	Vue 文件中 <script> 和 <style> 内容是否缩进
htmlWhitespaceSensitivity	HTML 空格敏感度，ignore 避免格式化改变渲染结果

.prettierignore 配置

node_modules/
dist/
*.min.js
pnpm-lock.yaml
yarn.lock
package-lock.json
coverage/

package.json 脚本

{
  "scripts": {
    "format": "prettier --write src/",
    "format:check": "prettier --check src/"
  }
}