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

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

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

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

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

目次

Prettierの特徴

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左サイドメニューから、拡張機能のタブを開きます。

VS Codeの「拡張機能」タブをクリック

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

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

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

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

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

VS Codeの設定画面を開く

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

  • 「Editor: Default Formatter」を「Prettier – Code formatter」に変更
  • 「Editor: Format On Save」にチェックを入れて有効化
VS Code設定にて、ファイル保存時に自動でPrettierが実行されるように設定変更

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

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

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

その設定方法を、

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

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

VSCode共通の設定方法

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

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

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

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

Prettier - Code formatter拡張機能の設定画面

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

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

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

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

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

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

プロジェクトのルート直下に「.prettierrc.json」ファイルを作成

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

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

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

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

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

また、この記事ではJSONファイルでの設定方法を解説しましたが、それ以外の形式で設定ファイルを作成することも可能です。

1つのプロジェクトをチームで共同制作する場合、Prettierの設定が作業者ごとに異なっていると、コードのフォーマットがバラバラになってしまいます。
.prettierrc.jsonなどの設定ファイルを共有することで、フォーマットのルールをチームで統一することが可能です。

まとめ:Prettierでコーディング作業を効率化しよう

Prettierの特徴と、VSCodeで使える「Prettier – Code formatter」のインストール&設定方法について解説しました。
コードの整形をツールで自動化することで、コーディング作業を効率化しましょう。

VSCodeには他にもコーディング作業の効率を格段に高めてくれる拡張機能が豊富に公開されています。
「Web制作コーダーに絶対使って欲しい拡張機能」を以下の記事で紹介しているので、是非ご覧ください。

内容が良かったらSNSでシェアしていただけると嬉しいです!
目次