.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