Prettier 配置文件 .prettierrc.js 和 .prettierrc.json 的区别

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