【VSCode】Prettierでファイル保存時にコードを自動整形する設定方法
コードを見やすくするために、インデントや改行、スペースなどを適切に使うことは非常に重要です。
しかし、それらを一々手作業で行うのは非常に手間がかかります。
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
と入力し、プラグインを検索します。
以下のプラグインが見つかったら、[インストール]をクリックしてください。
インストール直後の状態では、Prettierは手動で指示しない限り実行されません。
ファイル保存時に自動でPrettierを実行させるためには、次の章で解説する設定が必要です。
ファイル保存時に自動でフォーマットさせる設定方法
ファイル保存時に自動でPrettierを実行させるため、VS Codeの設定を変更します。
VS Code画面左下の歯車マークをクリックし、[設定]を選択してください。
設定タブが開いたら、検索ボックスにeditor format
と入力します。
その後、検索結果から以下の項目を探し、それぞれ設定を変更してください。
- 「Editor: Default Formatter」を「Prettier – Code formatter」に変更
- 「Editor: Format On Save」にチェックを入れて有効化
以上で、ファイルの保存時に自動的にPrettierが実行され、コードを綺麗に整えてくれるようになります。
フォーマットルールの設定変更
拡張機能を有効化した初期の時点で、コードの見た目を十分に綺麗にしてくれますが、
場合によってフォーマット(コード整形)のルールをカスタマイズしたい時があると思います。
その設定方法を、
- VSCode共通の設定方法
- プロジェクト毎の個別の設定方法
の2パターン紹介します。
VSCode共通の設定方法
ご自身がVSCode上で編集するファイル全てに対して適用される、デフォルトの設定になります。
プロジェクト毎に個別の設定を行わない場合は、ここでの設定内容が適用されます。
まずは、①左サイドメニューの拡張機能タブをクリック → ②インストール済みの拡張機能の中から「Prettier – Code formatter」を探し、右側の歯車マークをクリック → ③「拡張機能の設定」を選択します。
設定画面に移動するので、画面上部のタブが「ユーザー」になっていることを確認します。
(「ワークスペース」タブを選択すると、プロジェクト毎の個別の設定になります)
Prettierのフォーマットルールのオプション設定が一覧表示されています。
ここでは、主なオプション設定についてのみ、紹介します。
項目名 | 説明 | 初期値 |
---|---|---|
Print Width | テキスト1行当たりの文字数 | 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 | テキスト1行当たりの文字数 | 80 |
semi | ステートメントの末尾にセミコロンを付ける | true |
singleQuote | ダブルクォーテーションの代わりにシングルクォーテーションを使用する | false |
tabWidth | インデントの文字サイズ | 2 |
useTabs | スペースではなく、タブでインデントする | false |
全てのオプション設定についての詳細は公式ドキュメントをご覧ください。
また、この記事ではJSONファイルでの設定方法を解説しましたが、それ以外の形式で設定ファイルを作成することも可能です。
1つのプロジェクトをチームで共同制作する場合、Prettierの設定が作業者ごとに異なっていると、コードのフォーマットがバラバラになってしまいます。
.prettierrc.jsonなどの設定ファイルを共有することで、フォーマットのルールをチームで統一することが可能です。
まとめ:Prettierでコーディング作業を効率化しよう
Prettierの特徴と、VSCodeで使える「Prettier – Code formatter」のインストール&設定方法について解説しました。
コードの整形をツールで自動化することで、コーディング作業を効率化しましょう。
VSCodeには他にもコーディング作業の効率を格段に高めてくれる拡張機能が豊富に公開されています。
「Web制作コーダーに絶対使って欲しい拡張機能」を以下の記事で紹介しているので、是非ご覧ください。