.prettierrc.js 和 .prettierrc.json的區(qū)別

.prettierrc.js 和 .prettierrc.json 都是 Prettier 的配置文件，主要區(qū)別在于格式和靈活性。

1. .prettierrc.json（JSON 格式）

json

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true
}

• 優(yōu)點(diǎn)：

  • 語法嚴(yán)格，不易出錯(cuò)

  • 可被其他工具輕松解析

  • 支持 JSON Schema 驗(yàn)證

• 缺點(diǎn)：

  • 不支持注釋

  • 不能使用動態(tài)配置

2. .prettierrc.js（JavaScript 格式）

javascript

module.exports = {
  printWidth: 80,
  tabWidth: 2,
  useTabs: false,
  semi: true,
  // 可以添加注釋
  overrides: [
    {
      files: "*.md",
      options: {
        printWidth: 60
      }
    }
  ]
}

• 優(yōu)點(diǎn)：

  • ? 支持注釋，方便解釋配置

  • ? 支持動態(tài)配置（條件邏輯、函數(shù)等）

  • ? 支持 ES modules（export default）

  • ? 可以引用環(huán)境變量或其他配置

• 缺點(diǎn)：

  • 需要 Node.js 環(huán)境來解析

  • 可能執(zhí)行惡意代碼（安全性考慮）

主要差異對比

使用場景建議

選擇 .prettierrc.json 當(dāng)：

• 配置簡單，不需要注釋

• 希望配置文件能被多種工具讀取

• 注重安全性和穩(wěn)定性

• 項(xiàng)目不依賴 Node.js 環(huán)境

選擇 .prettierrc.js 當(dāng)：

• 配置復(fù)雜，需要注釋說明

• 需要條件配置（不同環(huán)境不同格式）

• 需要?jiǎng)討B(tài)生成配置

• 想繼承或合并其他配置

• 項(xiàng)目本身就是 Node.js 項(xiàng)目

示例：.prettierrc.js 的高級用法

javascript

// 根據(jù)環(huán)境變量調(diào)整配置
const isProduction = process.env.NODE_ENV === 'production';

module.exports = {
  printWidth: isProduction ? 80 : 100,
  
  // 根據(jù)文件類型覆蓋配置
  overrides: [
    {
      files: '*.test.js',
      options: {
        printWidth: 120
      }
    }
  ],
  
  // 從其他文件導(dǎo)入配置
  ...require('./shared-prettier-config'),
  
  // 使用函數(shù)生成配置
  trailingComma: (() => {
    // 復(fù)雜的邏輯判斷
    return 'es5';
  })()
};

其他格式選項(xiàng)

Prettier 還支持：

• .prettierrc.yaml / .prettierrc.yml - YAML 格式，支持注釋

• prettier.config.js - 另一種 JS 配置文件名

• package.json 中的 prettier 字段

總結(jié)推薦

• 大多數(shù)項(xiàng)目：.prettierrc.json（簡單直觀）

• 復(fù)雜項(xiàng)目/團(tuán)隊(duì)項(xiàng)目：.prettierrc.js（注釋和靈活性更重要）

• 個(gè)人項(xiàng)目：按喜好選擇，JS 格式更靈活

到此這篇關(guān)于Prettier配置文件.prettierrc.js 和.prettierrc.json區(qū)別示例詳解的文章就介紹到這了,更多相關(guān)Prettier配置文件.prettierrc.js 和.prettierrc.json區(qū)別內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論