Prettier
PrettierはJavaScriptやTypeScriptなど、様々な言語をサポートするコードフォーマッタです。
Prettierの実行方法
CLI
後述するESLintとの連携により、ESLintの実行時にPrettierが実行されます。 ESLintの実行方法は、ESLint - ESLintの実行方法 - CLIを参照してください。
エディタ、IDE
エディタやIDEにプラグインなどを設定することで、コーディング中に自動でフォーマットしてくれます。
Visual Studio CodeでPrettierを有効にする方法については、Visual Studio Code - Lint、フォーマッタを参照してください。
その他のエディタやIDEについては、Prettierの公式ページにあるEditor Integrationを参照してください。
ESLintとの連携
eslint-plugin-prettierを導入して、ESLintの実行時にPrettierを実行します。 Prettierのルールに準拠していないコードは、ESLintの警告として表示されるようになります。
また、Prettierのいくつかのルールは、ESLintのルールと競合する場合があります。
競合を解決するために、eslint-config-prettierを導入します。eslint-config-prettierは、Prettierと競合するESLintのルールを無効化するためのESLintプラグインです。
eslint-plugin-prettierやeslint-config-prettierの設定は、eslint-config-universeのuniverse/nativeで実施されます。
このアプリでは、universe/nativeをextendsしているため、eslint-plugin-prettierやeslint-config-prettierの設定を個別に記載する必要はありません。
EditorConfigとの連携
Prettierのいくつかのルールは、EditorConfigのルールと同じものがあります。
同じルールに対して、PrettierとEditorConfigの両方に設定をした場合はPrettierの設定が優先されます。 EditorConfigにしか設定をしていない場合は、EditorConfigの設定をPrettierが使用します。
適用しているルール一覧
このアプリでは、Prettierのルールを.prettierrc.jsに定義しています。
適用している全てのルールは以下のとおりです。
| オプション | 設定値 | デフォルト値からの変更 |
|---|---|---|
| Print Width | EditorConfig（max_line_length）の設定値 | デフォルトは80です。 このアプリでは、120に変更しています。 |
| Tab Width | EditorConfig（indent_size）の設定値 | - |
| Tabs | EditorConfig（indent_style）の設定値 | - |
| Semicolons | true | - |
| Quotes | true | デフォルトはfalseです。 このアプリではダブルクオートではなく、シングルクオートに統一します。 |
| Quote Props | as-needed | - |
| JSX Quotes | false | - |
| Trailing Commas | all | - |
| Bracket Spacing | false | デフォルトはtrueです。 このアプリでは、 import {React} from 'React'のように、{}の間にスペースを含まないようにします。 |
| Bracket Line | true | デフォルトはfalseです。 JSXのタグが複数行になったときに、最後の >の前で改行しないようにします。 |
| [Deprecated] JSX Brackets | true | デフォルトはfalseです。 IntelliJ IDEAのPrettierプラグインなど、Bracket Lineがまだサポートされていないものがあるので設定しています。 |
| Arrow Function Parentheses | avoid | デフォルトはalwaysです。 アロー関数の引数に不要なカッコを付けないようにします。 |
| Range | rangeStart: 0rangeEnd: Infinity | - |
| Parser | None | - |
| File Path | None | - |
| Require Pragma | false | - |
| Insert Pragma | false | - |
| Prose Wrap | preserve | - |
| HTML Whitespace Sensitivity | css | - |
| Vue files script and style tags indentation | false | - |
| End of Line | EditorConfig（end_of_line）の設定値 | - |
| Embedded Language Formatting | auto | - |
| Single Attribute Per Line | false | - |