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当：

• 配置简单，不需要注释

• 希望配置文件能被多种工具读取

• 注重安全性和稳定性

• 项目不依赖 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 格式更灵活