prettier 命令 #

什么是 Prettier #

Prettier 是一个固执己见的代码格式化工具，它支持多种编程语言，能够自动格式化代码以保持一致的风格。与传统的代码检查工具不同，Prettier 完全接管代码的格式化过程，让开发者无需在代码风格上花费精力争论。

安装 #

全局安装 #

bash 
npm install -g prettier

项目本地安装 #

bash 
npm install --save-dev prettier

基本用法 #

格式化单个文件 #

bash 
prettier --write file.js

格式化多个文件 #

bash 
prettier --write file1.js file2.js

格式化整个目录 #

bash 
prettier --write src/

格式化特定扩展名的文件 #

bash 
prettier --write "**/*.js"

查看格式化后的差异（不修改文件） #

bash 
prettier --check "**/*.js"

常用命令选项 #

选项 描述
--write 格式化文件并将结果写入文件
--check 检查文件是否已经格式化，未格式化则返回错误
--list-different 列出需要格式化的文件
--config 指定配置文件路径
--ignore-path 指定忽略文件路径
--with-node-modules 格式化 node_modules 目录
--no-config 不使用配置文件
--no-editorconfig 不使用 .editorconfig 文件
--print-width 设置每行的最大字符数（默认 80）
--tab-width 设置缩进的空格数（默认 2）
--use-tabs 使用制表符而不是空格进行缩进
--semi 在语句末尾添加分号（默认 true）
--single-quote 使用单引号而不是双引号（默认 false）
--quote-props 对象属性是否使用引号（默认 as-needed）
--jsx-single-quote JSX 中使用单引号（默认 false）
--trailing-comma 尾随逗号的使用方式（默认 es5）
--bracket-spacing 对象字面量中括号之间是否有空格（默认 true）
--jsx-bracket-same-line JSX 标签的闭合括号是否与内容在同一行（默认 false）
--arrow-parens 箭头函数参数是否使用括号（默认 always）
--require-pragma 只格式化文件头部有特定注释的文件
--insert-pragma 在格式化后的文件头部添加特定注释
--prose-wrap Markdown 文件的换行方式（默认 preserve）
--html-whitespace-sensitivity HTML 空白字符的敏感度（默认 css）

配置文件 #

Prettier 支持多种配置文件格式：

.prettierrc 文件（JSON 格式） #

json 
{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "es5",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "always",
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css",
  "endOfLine": "lf"
}

.prettierrc.yml 文件（YAML 格式） #

yaml 
printWidth: 80
tabWidth: 2
useTabs: false
semi: true
singleQuote: false
quoteProps: as-needed
jsxSingleQuote: false
trailingComma: es5
bracketSpacing: true
jsxBracketSameLine: false
arrowParens: always
proseWrap: preserve
htmlWhitespaceSensitivity: css
endOfLine: lf

prettier.config.js 文件（JavaScript 格式） #

javascript 
module.exports = {
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  singleQuote: false,
  quoteProps: "as-needed",
  jsxSingleQuote: false,
  trailingComma: "es5",
  bracketSpacing: true,
  jsxBracketSameLine: false,
  arrowParens: "always",
  proseWrap: "preserve",
  htmlWhitespaceSensitivity: "css",
  endOfLine: "lf"
};

忽略文件 #

创建 .prettierignore 文件来指定不需要格式化的文件或目录：

text 
# 忽略所有 node_modules 目录
node_modules/

# 忽略所有构建输出目录
dist/
build/

# 忽略特定文件
*.min.js
*.bundle.js

# 忽略文档中的示例代码
docs/examples/

与编辑器集成 #

Prettier 提供了多种编辑器插件，可以在保存文件时自动格式化代码：

在项目中使用 #

与 npm 脚本集成 #

在 package.json 中添加脚本：

json 
{
  "scripts": {
    "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,scss,md}\"",
    "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,json,css,scss,md}\""
  }
}

然后运行：

bash 
npm run format      # 格式化所有文件
npm run format:check # 检查是否需要格式化

与 Git 配合使用 #

使用 husky 和 lint-staged 在提交前自动格式化：

bash 
npm install --save-dev husky lint-staged

在 package.json 中添加配置：

json 
{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
      "prettier --write",
      "git add"
    ]
  }
}

支持的语言 #

Prettier 支持以下语言和文件格式：

  • JavaScript (including ES2017)
  • JSX
  • TypeScript
  • JSON
  • GraphQL
  • CSS
  • SCSS
  • Less
  • HTML
  • Vue
  • Angular
  • Markdown
  • YAML
  • XML

常见问题 #

Prettier 与 ESLint 的区别？ #

ESLint 主要用于检查代码质量问题（如未定义变量、错误的函数调用等），而 Prettier 专注于代码格式化。两者可以配合使用：ESLint 检查代码质量，Prettier 负责格式化。

如何禁用特定代码块的格式化？ #

在代码中添加特殊注释可以禁用 Prettier 格式化：

javascript 
// prettier-ignore
function unformattedFunction() { /* ... */ }

对于多行代码块：

javascript 
/* prettier-ignore */
{
  // 这段代码不会被 Prettier 格式化
  let a=1;let b=2;
}

总结 #

Prettier 是一个强大的代码格式化工具，可以帮助团队保持一致的代码风格，减少代码审查中的风格争论。通过命令行、配置文件和编辑器集成，Prettier 可以轻松融入任何开发工作流中。

最后更新：2026-02-07