当前位置：首页 > news >正文

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

news 2026/7/7 8:53:25

.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'; })() };