.prettierrc.js 和 .prettierrc.json的区别
.prettierrc.js 和 .prettierrc.json 都是 Prettier 的配置文件，主要区别在于格式和灵活性。
1. .prettierrc.json（JSON 格式）
json
{
"printWidth": 80,
"tabWidth": 2,
"useTabs": false,
"semi": true
}-
优点：
-
语法严格，不易出错
-
可被其他工具轻松解析
-
支持 JSON Schema 验证
-
-
缺点：
-
不支持注释
-
不能使用动态配置
-
2. .prettierrc.js（JavaScript 格式）
javascript
module.exports = {
printWidth: 80,
tabWidth: 2,
useTabs: false,
semi: true,
// 可以添加注释
overrides: [
{
files: "*.md",
options: {
printWidth: 60
}
}
]
}-
优点：
-
✅ 支持注释，方便解释配置
-
✅ 支持动态配置（条件逻辑、函数等）
-
✅ 支持 ES modules （
export default） -
✅ 可以引用环境变量或其他配置
-
-
缺点：
-
需要 Node.js 环境来解析
-
可能执行恶意代码（安全性考虑）
-
主要差异对比
| 特性 | .prettierrc.json |
.prettierrc.js |
|---|---|---|
| 注释 | ❌ 不支持 | ✅ 支持 |
| 动态配置 | ❌ 不支持 | ✅ 支持 |
| 环境变量 | ❌ 不支持 | ✅ 支持 |
| 条件逻辑 | ❌ 不支持 | ✅ 支持 |
| 导入其他配置 | ❌ 不支持 | ✅ 支持 |
| 工具兼容性 | ✅ 更好 | ❌ 需要 Node.js |
| 安全性 | ✅ 更安全 | ❌ 可能执行代码 |
使用场景建议
选择 .prettierrc.json 当：
-
配置简单，不需要注释
-
希望配置文件能被多种工具读取
-
注重安全性和稳定性
-
项目不依赖 Node.js 环境
选择 .prettierrc.js 当：
-
配置复杂，需要注释说明
-
需要条件配置（不同环境不同格式）
-
需要动态生成配置
-
想继承或合并其他配置
-
项目本身就是 Node.js 项目
示例：.prettierrc.js 的高级用法
javascript
// 根据环境变量调整配置
const isProduction = process.env.NODE_ENV === 'production';
module.exports = {
printWidth: isProduction ? 80 : 100,
// 根据文件类型覆盖配置
overrides: [
{
files: '*.test.js',
options: {
printWidth: 120
}
}
],
// 从其他文件导入配置
...require('./shared-prettier-config'),
// 使用函数生成配置
trailingComma: (() => {
// 复杂的逻辑判断
return 'es5';
})()
};其他格式选项
Prettier 还支持：
-
.prettierrc.yaml/.prettierrc.yml- YAML 格式，支持注释 -
prettier.config.js- 另一种 JS 配置文件名 -
package.json中的prettier字段
总结推荐
-
大多数项目：
.prettierrc.json（简单直观） -
复杂项目/团队项目：
.prettierrc.js（注释和灵活性更重要） -
个人项目：按喜好选择，JS 格式更灵活