stable

編集

設定ファイル

Prettierは以下の方法で設定できます（優先順位順）。

  • package.json 内の "prettier" キー、または package.yaml ファイル。
  • 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.dokyumento.jp/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.dokyumento.jp/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
← オプション設定の共有 →