今回は現場でVSCodeを使用することが多かった為、あると便利な機能を紹介していく。

①：「Prettier」／②：「Bracket Pair Colorization」で分けて、インストール方法や使用方法を記載する。

※：②：「Bracket Pair Colorization」についてはVSCodeのバージョン（1.67以降）によっては、

デフォルトで{} () [] のペアが、カラー表示されるようになっている為、対応不要の可能性がある。

バージョンの確認は以下の方法で確認できる。

1. メニューバーから
   • Windows/Linuxの場合：ヘルプ → バージョン情報
   • macOSの場合：Code → バージョン情報
2. ポップアップで現在のバージョンが表示される（例：Version: 1.82.0）

①：「Prettier」

・Prettierについて

「Prettier」とは、VSCodeの拡張機能のひとつであり、
インデントがバラバラになってしまっているコードを、自動で整えてくれる。

（余談：自身もインデントの整備漏れが多く、この機能で自動でフォーマットされる為、製作時に漏れがなくなりました！）

・Prettierのインストール方法

VSCodeを起動する。

上の画像のように操作していく。
画面左側の「拡張機能」ボタンをクリック。

検索欄に「prettier」と入力。

検索結果の中に「Prettier - Code formatter」というものがある。
「Prettier - Code formatter」のインストールボタンをクリック。

これで、Prettierのインストールは完了。

Prettierの使用方法

1.Format On Saveを有効にする

画面左下の歯車マークをクリック。
表示される項目の中から「設定」をクリック。

「設定タブ」が開く。

検索欄に「onsave」と入力すると、検索結果に「Format On Save」という項目が表示される。
「Format On Save」にチェックを入れる。

これにより、コードを書いてファイルを保存したときに自動で「フォーマット」が行われる。

2.Default FormatterをPrettierに設定する

先ほどインストールした「Prettier」を使ってフォーマットを行う為、以下の設定を行っていく。

続けて設定の検索欄に「format」と入力。
すると、検索結果に「Default Formatter」という項目が表示される。

「Default Formatter」の中のプルダウンから、「Prettier - Code formatter」を選択する。

これで、コードを書いてファイルを保存した時、Prettierを使って自動でフォーマットを行ってくれる設定になる。

Prettierを実際に使ってみる

②：「Bracket Pair Colorization」

・Bracket Pair Colorizationについて

Bracket Pair Colorization: Enabled は、

{} や () や [] 、ブラケット や 丸カッコ や 角カッコ のペアを、カラー表示してわかりやすくしてくれる設定。

（余談：{}や()の対応関係が見づらいと混乱を招き、自身も困っていました。。そんな時に使える機能です！）

・Bracket Pair Colorizationの設定方法

VSCodeを起動する。

画面左下の歯車マークをクリック。
表示される項目の中から「設定」をクリック。

「設定タブ」が開く。

検索欄に「Bracket Pair Colorization」と入力すると、検索結果に「Bracket Pair Colorization: Enabled」という項目が表示される。
「Bracket Pair Colorization: Enabled」にチェックを入れる。

これにより、{} や () や []、ブラケット や 丸カッコ や 角カッコ のペアが、

カラーで表示される。

・Bracket Pair Colorizationの確認

任意のソースコードを開いて、以下のように、{} や () や []、ブラケット や 丸カッコ や 角カッコ のペアが、

カラーで表示されていればOK。

以上

VScodeに入れると便利な機能の紹介（①：「Prettier」／②：「Bracket Pair Colorization」）

でした！