「VScode」が使いやすくなるおすすめ拡張機能8選！

Microsoftによって開発された、プログラミングやコーディングなどに利用できる無料のソースコードエディタであるVScodeは、様々なプログラミングコードに対応しているため、利用している人も多いでしょう。

そのVScodeを利用するにあたり使うと便利なのが拡張機能です。

VScodeの拡張機能とはプログラミングやコーディングを行っていくうえで便利な追加機能を指します。作業の効率化を行うことができるため、VScodeがより便利で使いやすくなる機能を追加することができます。

拡張機能は、VScode左側のメニューの四角が4つ並んでいるマークから確認や検索、インストールが可能です。

さて、VScodeの拡張機能を追加する前に、VScodeでのプログラミングやコーディングが効率的に使いやすくなるおすすめの設定方法の説明から始めます。

プログラミングやコーディング時にもたいへ便利な設定ですので、VSCodeで利用すると思われる設定だけでも反映しておくと役に立つこと間違いなしです。

VScodeのおすすめの初期設定方法ですが、まず[Ctrl（MacはCommnd）]+[Shift]+[P]を押してコマンドパレットを表示させ、「>open settings json」と入力してください。

いくつか項目が表示されますので、そのうちの「Preference : Open Settings(JSON)」（基本設定：設定）を開きます。

下記のコードを、ここの一番下の、「}」の前に貼り付けましょう。

コピペ前に記載されているものがあれば、その一番最後に記載されていた部分の後ろに「,（コンマ）」を付け足すのを忘れないようにしましょう。エラーが表示されてしまいます。

なお、不要なものは後述の説明を参考にして削除してもらえれば問題ありませんが、一番最後の行には「,（コンマ）」を入れないようにだけ注意してください。

さて、VScodeの初期設定の説明も終わりましたので、ここからはVScodeでのプログラミングやコーディングが使いやすくなる拡張機能について説明していきましょう。

VScodeの拡張機能の利用方法は、拡張機能の説明と一緒にリンクがありますので、そこからインストールを行う形でVScodeに反映させることとなります。

まず最初に紹介するのは「Japanese Language Pack」です。日本人であればVScode利用時に必ず入れたい各緒機能です。インストールは下記リンクから行ってください。

この拡張機能は、VScodeの表示がデフォルトで英語になっているのを日本語表記にする拡張機能になります。インストール後、一度VScodeを再起動しなければなりません。

再起動しても英語表記になっている場合は、コマンドパレットから設定を変更しましょう。コマンドパレットを開いて（[Ctrl（MacはCommnd）]+[Shift]+[P]）、「>Configure Language」と入力してください。

言語の選択肢に「ja」（日本語）が増えますので、「ja」をクリックして日本語に変更しましょう。VScodeを再起動すれば、今度こそ日本語表記に変更されます。

次に紹介するのは「Bracket Pair Colorizer」という拡張機能です。インストールは下記リンクから行ってください。

このVScodeの拡張機能は、SCSSやjsでカッコが多くなり、どれがどれに対応するか分からなくなった時に重宝する拡張機能です。

開始と終了を線でつないでくれるほか、カッコごとに色分けをしてくれるため、対応するものを探す際、視認性が高くなることにより楽になるため効率的な利用が可能となります。

デフォルトで対応しているカッコは()、{}、[]の3種類ですが、他のカッコを設定で追加することもできます。

次に紹介するのは「Color Highlight」という拡張機能になります。コーディング時に特に便利な各緒機能です。インストールは下記リンクから行ってください。

このVScodeの拡張機能は、カラーコードやRGBの箇所を、その色を可視化して分かりやすくしてくれます。VScodeではデフォルトでカラーコードなどの横に色のついた四角が表示されますが、より色が分かりやすくなります。

次に紹介するVScodeの拡張機能は、「EvilInspector」と呼ばれるものです。こちらもコーディング時などに表示が分かりやすくなるものです。インストールは下記リンクから行ってください。

このVScodeの拡張機能は、コード上にある全角スペースを分かりやすくしてくれるものです。

コーディングしたタグ内にスペースを利用している場合、半角スペース2つなのか全角スペース1つなのかの判断が分かりにくいため、そういった意味で可視化できる拡張機能と言えます。

次に紹介するのは「Trailing Spaces」というVScodeの拡張機能です。インストールは下記リンクから行ってください。

このVScodeの拡張機能は、行末のスペースを分かりやすくしてくれるものです。

プログラミングやコーディングを行っているといつの間にか行末に余分なスペースが入ること、改行したまま忘れて不要なスペースが入ることなどがあり、それの有無は簡単に見ることができませんが、この拡張機能があれば可視化が可能となります。

拡張機能の設定変更を行うことで、保存する際にそのスペースを削除してくれます。拡張機能の歯車マークから「拡張機能の設定を構成します」を開けば設定画面になりますので、そこで「Trailing-spaces：Trim On Save」にチェックを入れれば設定できます。

これまではVSCodeの表示関係の拡張機能の説明を行ってきましたが、ここではVSCodeを効率よく使いやすくなる機能方面の拡張機能になります。こちらの拡張機能もリンク先からインストールするという方法で利用することができます。

まず紹介するVSCodeの機能系の拡張機能は「Auto Rename Tag」です。インストールは下記リンクから行ってください。

このVSCodeの拡張機能は、開始タグを編集すると終了タグも自動的に同時編集してくれる拡張機能です。

例えば「<strong>てすと</strong>」の内容を「<em>てすと</em>」にしたい場合、開始タグである<b>を<u>に編集すると、終了タグも自動的に</strong>から</em>になるといった形です。

HTMLタグを利用する際に効率的な利用ができるようになる便利な拡張機能になります。

次に紹介するのは「Auto-Open Markdown Preview」というVScodeの拡張機能になります。インストールは下記リンクから行ってください。

このVScodeの拡張機能は、マークダウンファイル（拡張子.md）を開くと、自動的にプレビュー画面を表示してくれるものになります。

マークダウンファイルを開いたときに画面を分割して利用していると、片方の分割画面のタブがすべて閉じられてしまう点にだけ注意してください。

次に紹介するのは「Bookmarks」というVScodeの拡張機能になります。長いプログラミングやコーディングを行っている際に重宝する拡張機能です。インストールは下記リンクから行ってください。

このVScodeの拡張機能は、行ごとにブックマークを付け、ショートカットキーを用いてそこへ移動することができるというものになります。

長いコードを目的の場所まで移動するのは、場合によっては非効率なことになりかねませんので、それを防ぐことができる画期的な拡張機能と言えます。

なお、デフォルトで設定されているショートカットキーは下記の通りとなります。
 

VScodeに関わらずあったら楽なのがクリップボードです。このVScodeの拡張機能も、クリップボード関係のものになります。インストールは下記リンクから行ってください。

このVScodeの拡張機能は、エディター上でコピーや切り取りを行ったテキストをクリップボードに保存し、それを自由に出すことができるものになります。初期設定では10件の保存が可能です。

貼り付ける際は[Ctrl]+[Shift]+[V]（Macの場合は[Command]+[Shift]+[V]）で最期にコピーしたテキストを貼り付けし、そのショートカットを繰り返すことでクリップボードの履歴をさかのぼることができます。