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

到此这篇关于Prettier配置文件.prettierrc.js 和.prettierrc.json区别示例详解的文章就介绍到这了,更多相关Prettier配置文件.prettierrc.js 和.prettierrc.json区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！