【VSCode】Prettierでファイル保存時にコードを自動整形する設定方法

2024年3月22日

コードを見やすくするために、インデントや改行、スペースなどを適切に使うことは非常に重要です。
しかし、それらを一々手作業で行うのは非常に手間がかかります。

Prettierを導入すれば、コードを見やすく自動的に整形してくれるため、作業者はコードの見やすさを気にすることなく、コーディング作業に集中することが出来ます。

また、コードの書き方が統一されることで可読性が高まり、メンテナンス性や作業スピードの向上、チーム制作の効率化にも効果的です。

この記事では、非常に便利なコードフォーマッターであるPrettierを、VSCode（Visual Studio Code）で使うための方法を解説します。

Prettierの特徴

Prettierは、ソースコードを自動的に見やすく整形してくれるコードフォーマッターです。
対応する言語のファイルを保存した際に、コードのインデントや改行などを自動的に見やすく整えてくれます。

こんなにぐちゃぐちゃになったコードでも・・・

ファイルを保存するだけで一瞬でコードが整形され、見やすくなります。

対応言語は以下の通りで、フロントエンドで使用される言語にはほとんど対応しています。

JavaScript · TypeScript · Flow · JSX · JSON
CSS · SCSS · Less
HTML · Vue · Angular HANDLEBARS · Ember · Glimmer
GraphQL · Markdown · YAML

VSCode拡張機能「Prettier – Code formatter」

Prettierを導入するための方法はいくつかあります。

アプリケーション開発の現場や、チーム制作における規約を厳格に管理したい場合、npmやyarnのパッケージを使用するのが一般的ですが、導入手順や設定が複雑です。

個人での使用やWeb制作の場合、VSCodeの拡張機能「Prettier – Code formatter」がおすすめです。
こちらはVS Codeにインストールして簡単な設定を行うだけで、お手軽にPrettierを使用することが出来ます。

以降は、VSCode拡張機能「Prettier – Code formatter」の導入〜設定方法を解説します。

Prettier – Code formatterのインストール

まずは、VS Code左サイドメニューから、拡張機能のタブを開きます。

検索ボックスにPrettier - Code formatterと入力し、プラグインを検索します。
以下のプラグインが見つかったら、[インストール]をクリックしてください。

VS Codeで「Prettier - Code formatter」の拡張機能を検索し、インストール

インストール直後の状態では、Prettierは手動で指示しない限り実行されません。
ファイル保存時に自動でPrettierを実行させるためには、次の章で解説する設定が必要です。

ファイル保存時に自動でフォーマットさせる設定方法

ファイル保存時に自動でPrettierを実行させるため、VS Codeの設定を変更します。
VS Code画面左下の歯車マークをクリックし、[設定]を選択してください。

設定タブが開いたら、検索ボックスにeditor formatと入力します。
その後、検索結果から以下の項目を探し、それぞれ設定を変更してください。

「Editor: Default Formatter」を「Prettier – Code formatter」に変更
「Editor: Format On Save」にチェックを入れて有効化

VS Code設定にて、ファイル保存時に自動でPrettierが実行されるように設定変更

以上で、ファイルの保存時に自動的にPrettierが実行され、コードを綺麗に整えてくれるようになります。

フォーマットルールの設定変更

拡張機能を有効化した初期の時点で、コードの見た目を十分に綺麗にしてくれますが、
場合によってフォーマット（コード整形）のルールをカスタマイズしたい時があると思います。

その設定方法を、

VSCode共通の設定方法
プロジェクト毎の個別の設定方法

の２パターン紹介します。

VSCode共通の設定方法

ご自身がVSCode上で編集するファイル全てに対して適用される、デフォルトの設定になります。
プロジェクト毎に個別の設定を行わない場合は、ここでの設定内容が適用されます。

まずは、①左サイドメニューの拡張機能タブをクリック → ②インストール済みの拡張機能の中から「Prettier – Code formatter」を探し、右側の歯車マークをクリック → ③「拡張機能の設定」を選択します。

VSCodeからPrettier - Code formatterの設定画面に移動する手順

設定画面に移動するので、画面上部のタブが「ユーザー」になっていることを確認します。
（「ワークスペース」タブを選択すると、プロジェクト毎の個別の設定になります）

Prettierのフォーマットルールのオプション設定が一覧表示されています。
ここでは、主なオプション設定についてのみ、紹介します。

項目名	説明	初期値
Print Width	テキスト１行当たりの文字数	80
Semi	ステートメントの末尾にセミコロンを付ける	true
Single Quote	ダブルクォーテーションの代わりにシングルクォーテーションを使用する	false
Tab Width	インデントの文字サイズ	2
Use Tabs	スペースではなく、タブでインデントする	false

全てのオプション設定についての詳細は公式ドキュメントをご覧ください。

プロジェクト毎の個別の設定方法

プロジェクト毎に個別に設定を変更することも可能です。

まずは、プロジェクトのルート直下に.prettierrc.jsonという名前のファイルを新規作成します。
（※ファイル名最初のドット.を忘れずに）

.prettierrc.jsonファイルに、このプロジェクトのみ適用させたい設定項目をJSON形式で記述します。
（このファイルに記述しなかった項目は、先述したVSCode共通の設定内容が適用されます）

{
	"printWidth": 80,
	"semi": true,
	"singleQuote": false,
	"tabWidth": 2,
	"useTabs": false
}

ここでは、主なオプション設定についてのみ、紹介します。

項目名	説明	初期値
printWidth	テキスト１行当たりの文字数	80
semi	ステートメントの末尾にセミコロンを付ける	true
singleQuote	ダブルクォーテーションの代わりにシングルクォーテーションを使用する	false
tabWidth	インデントの文字サイズ	2
useTabs	スペースではなく、タブでインデントする	false