【VSCode】Prettierの使い方＆おすすめ設定を紹介

こんにちは、たけはんです。

自動整形フォーマッターをプロジェクトで導入してみたところ、めちゃくちゃ便利だったのでPrettierプラグインの使い方をまとめてみました。

Prettierとは

Prettierとは、ソースコードを自動で整形してくれるツールです。
ソースを保存すると自動で整形してくれるため、タブのサイズや位置、さらにセミコロンやシングルクォーテーションなども整形してくれます。
主なフロントエンド開発に対応しているため、静的なHTML、CSS、JS（jQuery）での開発時にも、かなり使えますし、
JSのフレームワーク、vue.jsやAngularでの開発時にもオススメです。

自動整形イメージ

インデントが一切ないソースでも、ソースを保存（Ctrl+s）するとキレイなコードになります。

そのためブロックを下に変更してくて、切り取り→貼り付けした後も保存をすればキレイになるので、個人的にはこれがかなり嬉しいです。

Prettierの使い方

Prettierの使い方はすごく簡単です。
プラグインをインストールし、少し設定をすればすぐにでも使えるようになります。

インストール方法

まずは、VSCodeにPrettierプラグインをインストールします。下記の手順で進めればサクッとインストールが可能です。

①をクリックし、プラグインをインストール画面を開きます。
②へ「Prettier」を入力する
③1番上に表示される「Prettier – Code formatter」をクリックする
④「インストール」をクリックする
※画像は既にインストール済みのため「アンイストール」と表示されています

これでPrettierプラグインが、VSCodeへインストールされました。

設定方法

次にPrettierフォーマッターの設定をしていきます。

保存時の自動フォーマッター設定

▲左下の歯車アイコンをクリックし、設定画面を開きます。
保存時に自動でフォーマットをかけるには、このように設定します。

▲「save」と入力すると、「Editor:Format On Save」が表示されるのでチェックを入れます。
これで保存時に自動でフォーマッターが動くようになります。

オススメの設定

▲タブサイズやセミコロンの有無設定等の詳細な設定は、プロジェクトのルート直下に「.prettierrc」ファイルを作成し、JSON形式で設定してきます。


	{
		"printWidth": 100,
		"trailingComma": "es5",
		"tabWidth": 2,
		"semi": true,
		"singleQuote": true,
		"endOfLine": "lf"
	}

作成した「.prettierrc」ファイルに、上記をコピー＆ペーストし保存します。自動整形したいファイルで保存をすると、自動整形ができるようになります。

なお、自動フォーマットがされない場合は、ファイルを開き直すもしくは、VSCode再起動するとできるようになります。

以下、オススメ設定の内容になります、

printWidth	自動折返し文字数
trailingComma	複数行の場合、可能な限り末尾のコンマを出力
tabWidth	タブサイズ
semi	ステートメントの最後にセミコロンを付与
singleQuote	二重引用符の代わりに単一引用符を使用
endOfLine	改行の文字コードを指定

デフォルトの設定


	{
		"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",
	}

「.prettierrc」ファイルを作成していない場合は、上記の設定が適用されます。

1つ1つの説明および使い方は、Prettierの公式サイトをご確認ください。
サンプル付きでとても丁寧に解説しているので、Prettierの公式がわかりやすいと思います。
Prettier公式URL