知识库

Appearance

Return to top
On this page

Prettier配置文件

Prettier提供了多种配置文件格式，让您可以自定义代码格式化规则。本指南详细介绍了各种配置文件的使用方法和最佳实践。

配置文件格式

Prettier支持以下配置文件格式，按优先级顺序排列：

  1. .prettierrc (JSON或YAML)
  2. .prettierrc.json
  3. .prettierrc.yaml
  4. .prettierrc.yml
  5. .prettierrc.js
  6. .prettierrc.cjs
  7. prettier.config.js
  8. prettier.config.cjs
  9. .prettierrc.toml

Prettier会从目标文件的目录开始向上查找，直到找到配置文件或到达根目录。

JSON配置文件

.prettierrc.json

这是最常用的配置文件格式：

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

YAML配置文件

.prettierrc.yaml 或 .prettierrc.yml

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

JavaScript配置文件

.prettierrc.js 或 prettier.config.js

JavaScript配置文件允许您使用动态逻辑：

javascript
// prettier.config.js
module.exports = {
  semi: true,
  trailingComma: 'es5',
  singleQuote: true,
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  bracketSpacing: true,
  arrowParens: 'avoid',
  endOfLine: 'lf',
  // 根据环境动态设置
  ...(process.env.NODE_ENV === 'production' && {
    printWidth: 100,
  }),
};

TOML配置文件

.prettierrc.toml

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

package.json中的配置

您也可以在package.json文件中直接配置Prettier：

json
{
  "name": "my-project",
  "version": "1.0.0",
  "prettier": {
    "semi": true,
    "trailingComma": "es5",
    "singleQuote": true,
    "printWidth": 80,
    "tabWidth": 2
  }
}

配置继承和扩展

使用扩展

Prettier支持通过overrides字段对特定文件类型应用不同的配置：

json
{
  "semi": true,
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 80,
  "tabWidth": 2,
  "overrides": [
    {
      "files": "*.test.js",
      "options": {
        "semi": false
      }
    },
    {
      "files": ["*.html", "legacy/**/*.js"],
      "options": {
        "tabWidth": 4
      }
    },
    {
      "files": "*.json",
      "options": {
        "printWidth": 120
      }
    }
  ]
}

项目级配置

在大型项目中，您可能需要多个配置文件：

project/
├── .prettierrc.json          # 项目默认配置
├── frontend/
│   └── .prettierrc.json      # 前端特定配置
└── backend/
    └── .prettierrc.json      # 后端特定配置

配置文件最佳实践

1. 使用版本控制

将配置文件添加到版本控制中，确保团队成员使用相同配置：

bash
echo ".prettierrc.json" >> .gitignore  # 错误示例
# 应该将配置文件加入版本控制，而不是忽略

2. 配置文件验证

使用以下命令验证配置文件是否有效：

bash
npx prettier --check .prettierrc.json

3. 项目级配置一致性

在多包项目中，可以使用共享配置：

javascript
// packages/prettier-config/index.js
module.exports = {
  semi: true,
  trailingComma: 'es5',
  singleQuote: true,
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  bracketSpacing: true,
  arrowParens: 'avoid',
  endOfLine: 'lf',
};

然后在各个包中引用：

json
{
  "extends": "@myorg/prettier-config"
}

4. 特定文件类型的配置

使用overrides为特定文件类型设置不同配置：

json
{
  "semi": true,
  "singleQuote": true,
  "printWidth": 80,
  "overrides": [
    {
      "files": ["*.md", "*.markdown"],
      "options": {
        "printWidth": 120,
        "proseWrap": "always"
      }
    },
    {
      "files": "*.json",
      "options": {
        "printWidth": 120
      }
    },
    {
      "files": "*.graphql",
      "options": {
        "printWidth": 120
      }
    }
  ]
}

配置文件的共享和重用

发布配置包

您可以创建并发布一个包含Prettier配置的npm包：

json
{
  "name": "@myorg/prettier-config",
  "version": "1.0.0",
  "main": "index.js",
  "files": [
    "index.js"
  ]
}
javascript
// index.js
module.exports = {
  semi: true,
  trailingComma: 'es5',
  singleQuote: true,
  printWidth: 100,
  tabWidth: 2,
  useTabs: false,
  bracketSpacing: true,
  arrowParens: 'avoid',
  endOfLine: 'lf',
};

使用社区配置

安装和使用社区维护的配置：

bash
npm install --save-dev prettier-config-standard
json
{
  "extends": ["prettier-config-standard"]
}

配置文件的性能考虑

避免复杂的配置

复杂的配置可能会影响格式化性能，因此建议：

  1. 使用简单的配置选项
  2. 避免过多的覆盖规则
  3. 定期审查配置以保持简洁

缓存配置

Prettier会缓存配置以提高性能，但如果您遇到配置问题，可以清除缓存：

bash
npx prettier --write --cache-clear "**/*.{js,jsx,ts,tsx,json,css,md}"

配置文件的安全考虑

  1. 避免在配置文件中存储敏感信息
  2. 审查第三方配置包的源代码
  3. 定期更新配置包以获得安全修复