概要
この記事では、Prettierとは何か、なぜ使うべきか、そしてどんなシチュエーションで使えるのか、どんなことが出来るのかを、初心者向けにわかりやすく解説します。
1. Prettierとは
Prettier（プリティアー）は、コードフォーマッターの一種で、コードを自動的に整形してくれるツールです。
多くの言語をサポートしており、手動でコードを整形する手間を省き、一貫したスタイルでコードを書くことができます。
Prettier公式サイト
- JavaScript (including experimental features)
- JSX
- Angular
- Vue
- Flow
- TypeScript
- CSS, Less, and SCSS
- HTML
- Ember/Handlebars
- JSON
- GraphQL
- Markdown, including GFM and MDX v1
- YAML
2. なぜPrettierを使うのか
公式サイトには 「スタイルをめぐる進行中の議論をすべて止めること」 と記載されています。
共通のコーディングスタイルを定義することは、プロジェクトでのチーム開発では非常に大切ですが、誰もが納得するコーディングスタイルを決めるまでは時間と労力がかかります。
「Prettier」を使用することで、あらかじめ用意されたスタイルをチームに簡単に適用させることができ、開発者はコーディングに集中することが出来ます。
また、「Prettier」の思想として、設定可能なオプションは必要最低限とする方針を謳っていますので、最低限のルール決めで使用することが可能です。（もちろん全てデフォルト設定で使用することも可能です。）
Prettierを使う理由として以下が考えられます。
- スタイルガイドの適用が容易: デフォルト設定を使用し、必要なスタイルのみ上書き設定することが可能です。
- 一貫したスタイル: チームで一貫したコードスタイルを保つことができます。
- 効率的な開発: 手動での整形作業を省略でき、開発効率が向上します。
- エラーレスなフォーマット: スタイルガイドに従ったフォーマットで、コードの品質を保ちます。
3. どんなシチュエーションで使うのか
Prettierは、たくさんのシチュエーションで役立ちます。
- 経験の浅い開発者を助ける: 経験の浅い開発者でも意識せずにスタイルを統一することが出来ます。
- チームでの共同作業: チームで協力してプロジェクトを進めるとき、Prettierがコードのスタイルを統一してくれます。
- 新しいプロジェクトのスタート: 新しいプロジェクトを始めるとき、最初からきれいなコードを書くことができます。
- 既存のプロジェクトに導入: 既存のプロジェクトにも導入できます。Prettierを使えば、すぐにコードを整形できます。
4. Prettierでできること
Prettierを使うことで以下のようなことが実現可能です。
フォーマッターの設定内容は「.prettierrc.js」(他の形式でも可能)に記載します。
4.1. コードの整形
Prettierは、コードの整形を自動的に行います。インデントのスタイルや改行の挿入、セミコロンの有無など、コードのルールを一貫したスタイルで整えます。
サンプルコードは以下となります。
// フォーマット前
function example() {const foo = 2;return foo+1;}
// フォーマット後
function example() {
const foo = 2;
return foo + 1;
}
4.2. 最適な折り返し
コードの折り返しや改行位置を適切に調整して、見やすく整えます。長い行を自動的に適切に折り返すことが可能です。
デフォルト値は80文字をなります。
以下の設定例では、１行の最大文字を100文字と設定しています。
module.exports = {
// 1行の最大文字数
printWidth: 100,
}
サンプルコードは以下となります。
// フォーマット前 (1行が長い)
const exampleObject = { a: 1, b: 2, c: 3, d: 4, e: 5, f: 6, g: 7, h: 8, i: 9, j: 10, };
// フォーマット後 (1行が長すぎるため折り返し)
const exampleObject = {
a: 1,
b: 2,
c: 3,
d: 4,
e: 5,
f: 6,
g: 7,
h: 8,
i: 9,
j: 10,
};
4.3. インデントの自動調整
異なるエディタや開発者が異なるインデントスタイルを使っていても、Prettierはコードを一貫したインデントスタイルに整えます。
デフォルト値は、タブでなくスペースを使用(false)・文字数2となります。
以下の設定例では、タブの文字数を２文字とし、タブではなくスペースでフォーマットします。
module.exports = {
// タブの幅
tabWidth: 2,
// タブではなくスペースを使用する
useTabs: false,
}
サンプルコードは以下となります。
// フォーマット前
function example() {
const a = 'hello';
const b = 'world';
return a + ' ' + b;
}
// フォーマット後
function example() {
const a = 'hello';
const b = 'world';
return a + ' ' + b;
}
4.4. セミコロンの自動挿入
セミコロンが必要な箇所で自動的にセミコロンを挿入します。プログラマがセミコロンを気にする必要がなくなります。
デフォルト値は、セミコロンを挿入しない(false)となります。
以下の設定例では、ステートメントの末尾にセミコロンがない場合に自動的にセミコロンを付与します。
module.exports = {
// ステートメントの末尾にセミコロンを出力する
semi: true,
}
サンプルコードは以下となります。
// フォーマット前
const foo = 42
const bar = 99
// フォーマット後
const foo = 42;
const bar = 99;
4.5. シングルクォートとダブルクォートの統一
文字列を囲むクォーテーションのスタイルを一貫したものに統一します。シングルクォートやダブルクォートの選択をプログラマが気にする必要がありません。
デフォルト値は、シングルクォートでなくダブルクォートを使用(false)となります。
以下の設定例では、文字列の囲みにはダブルクォートを使用します。
module.exports = {
// シングルクォートの代わりに二重引用符を利用する
singleQuote: false,
}
サンプルコードは以下となります。
// フォーマット前
const message = 'This is a message';
// フォーマット後
const message = "This is a message";
4.6. 最後の要素のカンマの自動挿入
オブジェクトや配列の最後の要素の末尾にカンマを付けるかどうかを指定します。
デフォルト値は、末尾のカンマを無効にする(none)となります。
- trailingComma: "none": 末尾のカンマを無効にする。
- trailingComma: "es5": ECMAScript 5（ES5）の構文規則に基づいて、末尾のカンマを有効にする。
- trailingComma: "all": 末尾のカンマを全ての要素に付ける。
以下の設定例では、すべての末尾の要素にカンマを付与します。
module.exports = {
// 末尾にカンマを入れる
trailingComma: "all",
}
サンプルコードは以下となります。
// フォーマット前
const exampleObject = {
a: 1,
b: 2
};
const exampleArray = [1, 2, 3]
// フォーマット後 (trailingComma: "all")
const exampleObject = {
a: 1,
b: 2,
};
const exampleArray = [1, 2, 3,]
4.7. その他設定可能な内容
これまでにあげた機能の他にもフォーマットの設定を行うことが可能です。
以下に設定可能な項目を記載します。
詳しくは公式サイトのオプション設定の内容を確認ください。
-
printWidth: 1行の最大文字数を指定します。デフォルトは80。 -
tabWidth: インデントに使うスペースの数またはタブの幅を指定します。デフォルトは2。 -
useTabs: インデントにタブを使用するかどうかを指定します。デフォルトはfalse。 -
semi: セミコロンの有無を指定します。デフォルトはtrue。 -
singleQuote: シングルクォートを使うかどうかを指定します。デフォルトはfalse。 -
quoteProps: オブジェクトのプロパティ名のクォートスタイルを指定します。デフォルトは"as-needed"。 -
jsxSingleQuote: JSXの属性値にシングルクォートを使うかどうかを指定します。デフォルトはfalse。 -
trailingComma: 配列やオブジェクトの末尾の要素の後にカンマを付けるかどうかを指定します。デフォルトは"none"。 -
bracketSpacing: オブジェクトリテラルのブラケット前後にスペースを入れるかどうかを指定します。デフォルトはtrue。 -
bracketSameLine: 複数行の HTML (HTML、JSX、Vue、Angular) 要素の>を閉じるか、新しい行にするかを指定します。デフォルトはfalse。 -
jsxBracketSameLine: 【非推奨】 複数行の JSX 要素の>を閉じるか、新しい行にするかを指定します。デフォルトはfalse。 -
arrowParens: アロー関数の引数が単一の識別子の場合に丸括弧で囲むかどうかを指定します。デフォルトは"always"。 -
rangeStart: コードフォーマットを適用する範囲の開始インデックスを指定します。デフォルトは0。 -
rangeEnd: コードフォーマットを適用する範囲の終了インデックスを指定します。デフォルトは"Infinity"。 -
parser: 使用するパーサーを指定します。デフォルトはnull。 -
filepath: どのパーサーを使用するかを特定するために使用するファイルパスを指定します。デフォルトはなし。 -
requirePragma: ファイルの先頭にプラグマと呼ばれる特別なコメントを含むファイルのみフォーマット対象とします。デフォルトはfalse。 -
insertPragma: ファイルが Prettier でフォーマットされていることを示す特別なマーカーをファイルの先頭に挿入します。デフォルトはfalse。 -
proseWrap: コード以外のテキストの折り返し方法を指定します。デフォルトは"preserve"。 -
htmlWhitespaceSensitivity: HTML、Vue、Angular、およびハンドルバーのグローバルな空白の取り扱いを指定します。デフォルトは"css"。 -
vueIndentScriptAndStyle: Vue ファイル内のコードscriptタグとstyleタグをインデントするかどうかを指定します。デフォルトはfalse。 -
endOfLine: 行末文字を指定します。デフォルトは"lf"。 -
embeddedLanguageFormatting: ファイルに埋め込まれた引用コードをフォーマットするかどうかを制御します。デフォルトは"auto"。 -
singleAttributePerLine: HTML、Vue、JSXの要素の属性を1行ごとに配置するかどうかを指定します。デフォルトは"false"。
5. VSCodeでの保存時に自動整形
Prettierをコードを保存するたびに自動的に実行するためには、コードエディタやIDEにPrettierを連携して保存時に実行する設定を行います。
以下に、Visual Studio Code（VSCode）でPrettierを保存時に自動実行する方法を示します。
-
Prettier拡張機能のインストール:
最初に、VSCodeの拡張機能マーケットプレースから「Prettier - Code formatter」拡張機能をインストールします。 -
設定ファイルの作成:
プロジェクトのルートディレクトリに.prettierrcまたはprettier.config.jsという名前のPrettierの設定ファイルを作成し、適切なPrettierの設定を記述します。 -
自動保存の有効化:
VS Codeの設定で、ファイルを保存すると自動的にフォーマットが実行されるように設定します。- VS Codeを開きます。
-
Ctrl + Shift + P（Windows/Linux）またはCommand + Shift + P（Mac）を押してコマンドパレットを開きます。 -
Preferences: Open Settings (JSON)を選択して、設定ファイルを開きます。 -
settings.jsonファイルに、以下の設定を追加します。
"editor.formatOnSave": trueこれにより、ファイルを保存すると自動的にPrettierが実行され、コードが整形されます。
これで、ファイルを保存するたびにPrettierが自動的に実行されるようになります。他のエディタやIDEでも同様の設定が可能ですが、手順は異なる場合があります。
まとめ
Prettierは、コードの一貫したフォーマットを保ちながら、効率的に開発するための強力なツールです。チームでの利用や新規プロジェクトの立ち上げ、他人のコードを読む際に特に役立ちます。ぜひ導入して、効率的な開発を実現しましょう。