Prettier安装与配置 #

本指南详细介绍如何安装和配置Prettier，以满足您的项目需求。

安装Prettier #

作为开发依赖安装 #

对于大多数项目，建议将Prettier作为开发依赖安装：

# 使用npm
npm install --save-dev --save-exact prettier

# 使用yarn
yarn add --dev --exact prettier

使用--save-exact标志可以确保锁定Prettier的版本，避免因自动更新导致格式变化。

全局安装（不推荐） #

虽然可以全局安装Prettier，但不推荐这样做，因为不同项目可能需要不同版本的Prettier：

npm install --global prettier

配置Prettier #

Prettier支持多种配置文件格式，您可以选择其中一种：

JSON格式（.prettierrc.json） #

{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "bracketSpacing": true,
  "arrowParens": "avoid"
}

YAML格式（.prettierrc.yaml 或 .prettierrc.yml） #

semi: true
trailingComma: 'es5'
singleQuote: true
printWidth: 80
tabWidth: 2
useTabs: false
bracketSpacing: true
arrowParens: 'avoid'

JavaScript格式（.prettierrc.js 或 prettier.config.js） #

module.exports = {
  semi: true,
  trailingComma: 'es5',
  singleQuote: true,
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  bracketSpacing: true,
  arrowParens: 'avoid',
};

TOML格式（.prettierrc.toml） #

semi = true
trailingComma = "es5"
singleQuote = true
printWidth = 80
tabWidth = 2
useTabs = false
bracketSpacing = true
arrowParens = "avoid"

配置选项详解 #

基本格式选项 #

• printWidth (默认: 80)

  • 指定每行最大字符数
  • 当代码超过此限制时，Prettier会自动换行

• tabWidth (默认: 2)

  • 指定缩进空格数

• useTabs (默认: false)

  • 使用制表符而非空格缩进

代码风格选项 #

• semi (默认: true)

  • 在语句末尾添加分号

• singleQuote (默认: false)

  • 使用单引号而非双引号

• quoteProps (默认: 'as-needed')

  • 控制对象属性是否使用引号
  • 'as-needed': 按需添加
  • 'consistent': 保持一致
  • 'preserve': 保留原样

• jsxSingleQuote (默认: false)

  • 在JSX中使用单引号而非双引号

• trailingComma (默认: 'es5')

  • 'es5': 在ES5中有效的尾随逗号（对象、数组等）
  • 'none': 不添加尾随逗号
  • 'all': 在所有可能的地方添加尾随逗号

• bracketSpacing (默认: true)

  • 在对象的括号前后添加空格

• jsxBracketSameLine (默认: false)

  • 将多行JSX元素的>放在最后一行的末尾

• arrowParens (默认: 'avoid')

  • 'avoid': 尽可能避免箭头函数参数的括号
  • 'always': 始终为箭头函数参数添加括号

其他选项 #

• requirePragma (默认: false)

  • 要求在文件顶部包含特殊注释才能格式化

• insertPragma (默认: false)

  • 在格式化的文件顶部插入Pragma标记

• proseWrap (默认: 'preserve')

  • 'always': 总是换行
  • 'never': 从不换行
  • 'preserve': 保留原样

• htmlWhitespaceSensitivity (默认: 'css')

  • 'css': 尊重CSS的display属性
  • 'strict': 空白敏感
  • 'ignore': 空白不敏感

• endOfLine (默认: 'lf')

  • 'lf': Line Feed (Linux/macOS)
  • 'crlf': Carriage Return + Line Feed (Windows)
  • 'cr': Carriage Return (Classic Mac)
  • 'auto': 检测文件的换行符类型

忽略文件 #

创建一个.prettierignore文件来排除不需要格式化的文件：

node_modules/
dist/
build/
*.min.js
coverage/
.next/
.nuxt/
logs/

验证配置 #

安装完成后，可以使用以下命令验证配置是否正确：

# 检查所有文件是否已格式化
npx prettier --check "**/*.{js,jsx,ts,tsx,json,css,md}"

# 格式化所有文件
npx prettier --write "**/*.{js,jsx,ts,tsx,json,css,md}"

预设配置 #

Prettier提供了一些预设配置，您可以使用社区维护的配置：

npm install --save-dev prettier-config-standard

然后在.prettierrc.json中引用：

{
  "extends": ["prettier-config-standard"]
}

配置最佳实践 #

1. 团队一致：确保整个团队使用相同的配置
2. 版本锁定：使用--save-exact标志锁定版本
3. 文档化：在项目文档中说明Prettier配置
4. 集成工具：将Prettier与编辑器和构建工具集成
5. 定期审查：定期审查和更新配置以适应项目需求