.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 格式更灵活
