穩定版

編輯

設定檔

您可以透過以下方式設定 Prettier（按優先順序排列）

  • 在您的 package.json 或 package.yaml 檔案中使用 "prettier" 鍵值。
  • 使用 JSON 或 YAML 格式撰寫的 .prettierrc 檔案。
  • 使用 .prettierrc.json、.prettierrc.yml、.prettierrc.yaml 或 .prettierrc.json5 檔案。
  • 使用 export default 或 module.exports 匯出物件的 .prettierrc.js 或 prettier.config.js 檔案（取決於您 package.json 中的 type 值）。
  • 使用 export default 匯出物件的 .prettierrc.mjs 或 prettier.config.mjs 檔案。
  • 使用 module.exports 匯出物件的 .prettierrc.cjs 或 prettier.config.cjs 檔案。
  • 使用 .prettierrc.toml 檔案。

設定檔將從要格式化的檔案位置開始解析，並向上搜尋檔案樹，直到找到（或找不到）設定檔。

Prettier 刻意不支援任何形式的全域設定。這是為了確保當專案複製到另一台電腦時，Prettier 的行為保持一致。否則，Prettier 無法保證團隊中的每個人都能獲得相同的結果。

您可以在設定檔中使用的選項與 API 選項 相同。

基本設定

JSON

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

JS (ES 模組)

// prettier.config.js, .prettierrc.js, prettier.config.mjs, or .prettierrc.mjs

/**
 * @see https://prettier.dev.org.tw/docs/en/configuration.html
 * @type {import("prettier").Config}
 */
const config = {
  trailingComma: "es5",
  tabWidth: 4,
  semi: false,
  singleQuote: true,
};

export default config;

JS (CommonJS)

// prettier.config.js, .prettierrc.js, prettier.config.cjs, or .prettierrc.cjs

/**
 * @see https://prettier.dev.org.tw/docs/en/configuration.html
 * @type {import("prettier").Config}
 */
const config = {
  trailingComma: "es5",
  tabWidth: 4,
  semi: false,
  singleQuote: true,
};

module.exports = config;

YAML

# .prettierrc or .prettierrc.yaml
trailingComma: "es5"
tabWidth: 4
semi: false
singleQuote: true

TOML

# .prettierrc.toml
trailingComma = "es5"
tabWidth = 4
semi = false
singleQuote = true

設定覆寫

覆寫功能讓您可以針對特定檔案類型、資料夾和特定檔案使用不同的設定。

Prettier 沿用 ESLint 的 覆寫格式。

JSON

{
  "semi": false,
  "overrides": [
    {
      "files": "*.test.js",
      "options": {
        "semi": true
      }
    },
    {
      "files": ["*.html", "legacy/**/*.js"],
      "options": {
        "tabWidth": 4
      }
    }
  ]
}

YAML

semi: false
overrides:
  - files: "*.test.js"
    options:
      semi: true
  - files:
      - "*.html"
      - "legacy/**/*.js"
    options:
      tabWidth: 4

每個覆寫都必須包含 files，可以是字串或字串陣列。可以選擇性地提供 excludeFiles 來排除特定規則的檔案，也可以是字串或字串陣列。

設定 parser 選項

預設情況下，Prettier 會根據輸入檔案的副檔名自動推斷要使用的解析器。結合 overrides，您可以教 Prettier 如何解析它無法辨識的檔案。

例如，要讓 Prettier 格式化它自己的 .prettierrc 檔案，您可以這樣做

{
  "overrides": [
    {
      "files": ".prettierrc",
      "options": { "parser": "json" }
    }
  ]
}

您也可以將 .js 檔案的解析器從預設的 babel 切換到 flow

{
  "overrides": [
    {
      "files": "*.js",
      "options": {
        "parser": "flow"
      }
    }
  ]
}

**注意：** _絕對不要_ 將 parser 選項放在設定的最上層。 _只_ 在 overrides 內使用它。否則，您實際上會停用 Prettier 基於檔案副檔名的自動解析器推斷。這會強制 Prettier 對 _所有_ 類型的檔案使用您指定的解析器——即使在沒有意義的情況下，例如嘗試將 CSS 檔案解析為 JavaScript。

設定綱要

如果您需要 JSON 綱要來驗證您的設定，可以參考這裡：https://json.schemastore.org/prettierrc。

EditorConfig

如果您的專案中有 .editorconfig 檔案，Prettier 將會解析它並將其屬性轉換為相對應的 Prettier 設定。此設定將會被 .prettierrc 等檔案覆寫。

以下是不同屬性如何對應到 Prettier 行為的說明

# Stop the editor from looking for .editorconfig files in the parent directories
# root = true

[*]
# Non-configurable Prettier behaviors
charset = utf-8
insert_final_newline = true
# Caveat: Prettier won’t trim trailing whitespace inside template strings, but your editor might.
# trim_trailing_whitespace = true

# Configurable Prettier behaviors
# (change these if your Prettier config differs)
end_of_line = lf
indent_style = space
indent_size = 2
max_line_length = 80

如果您使用預設選項，這裡有一個可直接複製貼上的 .editorconfig 檔案

[*]
charset = utf-8
insert_final_newline = true
end_of_line = lf
indent_style = space
indent_size = 2
max_line_length = 80
← 選項分享設定 →