Prettier 支持哪些配置文件格式?如何配置 Prettier?

Prettier 配置文件详解

Prettier 支持多种配置文件格式,开发者可以根据项目需求选择合适的配置方式。

配置文件类型

1. .prettierrc - JSON 格式配置文件

   json
   {
     "semi": true,
     "singleQuote": true,
     "tabWidth": 2,
     "trailingComma": "es5"
   }

2. .prettierrc.json - 显式 JSON 格式

   json
   {
     "printWidth": 80,
     "tabWidth": 2,
     "useTabs": false
   }

3. .prettierrc.js - JavaScript 格式,支持动态配置

   javascript
   module.exports = {
     semi: true,
     singleQuote: true,
     tabWidth: 2,
   };

4. .prettierrc.cjs - CommonJS 格式

   javascript
   module.exports = {
     semi: true,
     singleQuote: true,
   };

5. prettier.config.js - 项目根目录的配置文件

   javascript
   export default {
     semi: true,
     singleQuote: true,
   };

6. package.json - 在 package.json 中配置

   json
   {
     "prettier": {
       "semi": true,
       "singleQuote": true
     }
   }

常用配置选项

• printWidth: 指定行宽,默认 80
• tabWidth: 指定缩进空格数,默认 2
• useTabs: 是否使用 tab 缩进,默认 false
• semi: 是否在语句末尾添加分号,默认 true
• singleQuote: 是否使用单引号,默认 false
• trailingComma: 是否添加尾随逗号,可选 "es5"、"none"、"all"
• bracketSpacing: 对象字面量括号内是否添加空格,默认 true
• arrowParens: 箭头函数参数是否使用括号,可选 "always"、"avoid"

配置优先级

Prettier 会按照以下顺序查找配置文件:

1. package.json 中的 prettier 字段
2. .prettierrc (JSON/YAML)
3. .prettierrc.json
4. .prettierrc.yaml
5. .prettierrc.yml
6. .prettierrc.js
7. .prettierrc.cjs
8. prettier.config.js
9. prettier.config.cjs

忽略配置

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

shell
node_modules
dist
build
*.min.js

合理配置 Prettier 可以让团队代码风格保持一致,提高代码可读性和维护性。