.prettierrc

.prettierrc

.prettierrcはPrettierの設定ファイルです。
プロジェクトルートに配置します。

Prettierの使い方

インストール

terminal

 npm i -D prettier

実行

CLIでの実行

terminal

//フォーマットされているか確認する(フォーマットは実行しない)
prettier --check .

//ファイルを指定してフォーマット
npx prettier --write js/main.js

//すべてのファイルを指定してフォーマット
npx prettier --write .

VS Codeでの実行

1.Prettier - Code formatterプラグインをインストールし、有効化します。

2.setting.jsonに追記します。
※ファイル保存時に自動整形されるようになります。

setting.json

{
  "editor.formatOnSave" : true
}

設定ファイルの書式

※設定ファイルを用意する他に、package.jsonの中のキー「prettier」として書くこともできます。

JSONの場合

ファイル名は.prettierrcか、.prettierrc.jsonにします。

.prettierrc

{
  "printWidth": 120,
  "tabWidth": 2,
  "singleQuote": true,
  "trailingComma": "none",
  "semi": false,
  "parser": "typescript"
}

JavaScriptの場合

ファイル名はprettier.config.jsか.prettierrc.jsにします。

.prettier.js

module.exports = {
  printWidth: 120,
  tabWidth: 2,
  singleQuote: true,
  trailingComma: "none",
  semi: false,
  parser: "typescript"
};

YAMLの場合

ファイル名は.prettierrcか、.prettierrc.yamlにします。

.prettierrc.yaml

printWidth: 120
tabWidth: 2
singleQuote: true
trailingComma: "none"
semi: false
parser: "typescript"

TOMLの場合

ファイル名は.prettierrc.tomlにします。(拡張子は必須です。)

.prettierrc.toml

printWidth = 120
tabWidth = 2
singleQuote = true
trailingComma = "none"
semi = false
parser = "typescript"

設定のオーバーライド

指定した拡張子、フォルダ、ファイルに対して別の設定を上書きできます。

.prettierrc

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

設定項目

Print Width

折り返す行の長さを指定

.prettierrc

//デフォルトは80
"printWidth": 数値

Tab Width

インデントのスペースの数を指定

.prettierrc

//デフォルトは2
"tabWidth": 数値

Tabs

スペースではなくタブで行をインデントする

.prettierrc

//スペースではなくタブを使う
"useTabs": true

//タブではなくスペースを使う(デフォルト)
"useTabs": false

Semicolons

ステートメントの最後にセミコロンを追加

.prettierrc

//最後にセミコロンを追加(デフォルト)
"semi": true

//セミコロンが無いとエラーになる箇所にだけセミコロンを追加
"semi": false

Quotes

ダブルクォートの代わりにシングルクォートを使用
JSX quotesはこの項目を無視する

.prettierrc

//シングルクォートを使う
"singleQuote": true

//ダブルクォートを使う(デフォルト)
"singleQuote": false

Quote Props

オブジェクトのプロパティが引用されるときに変更

.prettierrc

//必要な場合にのみ、オブジェクトプロパティを引用符で囲む(デフォルト)
"quoteProps": "as-needed"

//オブジェクトの少なくとも1つのプロパティに引用符が必要な場合は、すべてのプロパティを引用符で囲む
"quoteProps": "consistent"

//入力された引用符を尊重する
"quoteProps": "preserve"

JSX Quotes

JSXでダブルクォートの代わりにシングルクォートを使用

.prettierrc

//シングルクォートを使う
"jsxSingleQuote": true

//ダブルクォートを使う(デフォルト)
"jsxSingleQuote": false

Trailing Commas

末尾のカンマの設定

.prettierrc

//ES5で有効な末尾のカンマ(オブジェクト、配列など) デフォルト
"trailingComma": "es5"

//末尾にカンマをつけない(デフォルト)
"trailingComma": "none"

//可能な限り末尾にカンマを付ける(関数の引数含む) ※node 8かtransformが必要
"trailingComma": "all"

Bracket Spacing

オブジェクトリテラルの角かっこの内側にスペースを入れる

.prettierrc

//スペースを入れる(デフォルト)
"bracketSpacing": true

//スペースを入れない
"bracketSpacing": false

JSX Brackets

複数行のJSX要素の最終行の最後に「>」を置く

.prettierrc

//複数行のJSX要素の最終行の最後に「>」を置く
"jsxBracketSameLine": true

//複数行のJSX要素の「>」hは次の行に置く(デフォルト)
"jsxBracketSameLine": false

Arrow Function Parentheses

アロー関数の()が省略可能でも常に書く

.prettierrc

//()を常に書く
"arrowParens": "always"

//省略可能なときは()を書かない(デフォルト)
"arrowParens": avoid

Range

ファイルの一部のセグメントのみフォーマットさせます。

.prettierrc

//(デフォルトは0)
"rangeStart": 数値

//(デフォルトは"inifinity)
"rangeEnd": 数値

Parser

使用するパーサーを指定
※Prettierは入力ファイルパスから自動的に推測するのでこの設定を変更する必要ない

.prettierrc

"parser": "babel"
"parser": "babel-flow"
"parser": "babel-ts"
"parser": "flow"
"parser": "typescript"
"parser": "css"
"parser": "scss"
"parser": "less"
"parser": "json"
"parser": "json5"
"parser": "json-stringify"
"parser": "graphql"
"parser": "markdown"
"parser": "mdx"
"parser": "html"
"parser": "vue"
"parser": "angular"
"parser": "lwc"
"parser": "yaml"

//指定しない(デフォルト)
"parser": "none"

File Path

使用するパーサーを推測するために使用するファイル名を指定

.prettierrc

//ファイル名を指定
"filepath": "文字列"

//指定しない(デフォルト)
"filepath": "none"

Require Pragma

ファイルの先頭にプラグマ(/** @format */)を含むファイルのみをフォーマットするように指定

.prettierrc

//プラグマ必須にする
"requirePragma": true

//プラグマを必須にしない(デフォルト)
"requirePragma": false

Insert Pragma

ファイルの先頭にプラグマ(/** @format */)を挿入する

.prettierrc

//プラグマを挿入する
"insertPragma": true

//プラグマを挿入しない(デフォルト)
"insertPragma": false

Prose Wrap

markdownの折返しの設定

.prettierrc

//Print Widthで指定した値を超える時は折り返す
"proseWrap": "always" 

//折り返さないしない
"proseWrap": "never"

//そのまま折り返す(デフォルト)
"proseWrap": "preserve"

HTML Whitespace Sensitivity

HTMLファイルのグローバルな空白の感度を指定

.prettierrc

//displayプロパティのデフォルト値を尊重(デフォルト)
"htmlWhitespaceSensitivity": "css"

//空白を区別する
"htmlWhitespaceSensitivity": "strict"

//空白は区別しない
"htmlWhitespaceSensitivity": "ignore"

Vue files script and style tags indentation

Vueファイル内の<script>と<style>をインデントするかどうかの指定

.prettierrc

//インデントする
"vueIndentScriptAndStyle": true

//インデントしない
"vueIndentScriptAndStyle": false(デフォルト)

End of Line

改行の文字コードを指定

.prettierrc

//Linux、MacOS、gitリポジトリで一般的な、ラインフィード(\n)のみ
"endOfLine": "lf"

//Windowsで一般的な、キャリッジリターン + ラインフィード文字(\r\n)
"endOfLine": "crlf"

//キャリッジリターン文字(\r)のみ
"endOfLine": "cr"

//既存の行末を維持(デフォルト)
"endOfLine": "auto"

Embedded Language Formatting

Prettierがファイルに埋め込まれた引用コードをフォーマットするかどうかを制御

.prettierrc

//埋め込まれたコードを自動的にフォーマットしない
"embeddedLanguageFormatting": "off"

//Prettierが自動的に識別できる場合、埋め込みコードをフォーマットする(デフォルト)
"embeddedLanguageFormatting": "auto"

.prettierrcのデフォルト設定

.prettierrcが存在しない場合、存在しても設定を書いていない項目があるときに適用されるデフォルト値です。

.prettierrc

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": false,
  "quoteProps": "as-needed",
  "jsxSingleQuote": false,
  "trailingComma": "none",
  "bracketSpacing": true,
  "jsxBracketSameLine": false,
  "arrowParens": "avoid",
  "rangeStart": 0,
  "rangeEnd": Infinity,
  "parser": "none",
  "filepath": "none",
  "requirePragma": false,
  "insertPragma": false,
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css",
  "vueIndentScriptAndStyle": false,
  "endOfLine": "auto",
  "embeddedLanguageFormatting": "auto"
}

editorconfigとの併用

.editrConfigと.prettierrcの両方で指定できる設定項目

EditorConfigとPrettierを併用する場合は注意しましょう。

Editorconfigの設定	Pritterの設定
end_of_line	endOfLine
indent_style	useTabs
indent_size/tab_width	Tab Width
max_line_length	printWidth

Prettierから除外するファイルの指定

プロジェクトルートに.prettierignoreを作成します。

.prettierignore

package.json
package-lock.json