VS Codeのプラグインとは？導入方法やおすすめの拡張機能も紹介

VS Codeとは

VS Code「Visual Studio Code」は、Microsoftを中心に開発されている、オープンソースの高機能コードエディタ―です。Windows／Linux／macOSのクロスプラットフォームに対応しており、世界中のエンジニアに利用されています。

VS Codeは高速性と安定性に優れたエディターで、コード編集や自動補完機能・フォーマッティング機能・デバッグ機能・Web構築に必要な処理の自動化（タスクランナー機能）・ソースコード管理のGitHubとの連携など、豊富な機能を有しています。

また、Azureクラウドを利用したリモート開発や共同開発にも対応しています。

【参考】：Azure

クラウドエンジニアを目指す方必見！Azureを分かりやすく紹介！

VS Code自体の豊富な機能に加えて、優れたプラグイン（Plug in）が豊富にあります。プラグインとは拡張機能のことで、プラグインをインストールすることで、VS Codeをさらに便利に活用することができます。

プラグインを使わずにVS Codeだけでもコーディングはできますが、プラグインを追加することでVS Codeの機能が拡張され、より効率的なコーディングが行えるようになります。VS CodeプラグインはVS Codeと一体と考えて利用した方がよいでしょう。

VS Codeのインストール手順

ここから、実際にVS Codeをインストールしていきます。以下の手順に従って、VS Codeをダウンロードし、ダウンロードが済んだらインストールを行います。

Visual Studio Code の専用サイトからVS Codeのダウンロードを行います。下記サイトにアクセスし、ここではWindows用のVS Codeをダウンロードします。MacやLinux用をダウンロードする場合は、ダウンロードボタンの右にあるドロップダウンマークをクリックしてOSを選択します。

【参考】：Visual Studio Code 公式サイト

［Download for Windows］ボタンをクリックすると次の画面に遷移し、ダウンロードが行われます。

2022年6月24日時点では「VSCodeUserSetup-x64-1.68.1.exe」が最新バージョンです。ダウンロードが済んだら、このexeファイルをダブルクリックするとインストールが始まります。

【画像】 img-vscodeprugin-04

VS Codeのインストールには途中でいくつかの確認画面がありますので、慎重に進めてください。

インストールが始まると、最初に「使用許諾契約書の同意」画面が表示されますので、同意できる場合には「同意する」を選択し、続いて［次へ（N）>］をクリックします。

インストール先のディレクトリ選択画面が表示されますので、デフォルト設定されている場所でよければ、［次へ（N）>］をクリックします。

Windows のスタートメニューに 「Visual Stddio Code」 のメニューを追加するか否かの選択画面です。追加は［次へ（N）>］をクリックします。追加しない場合は「▢スタートメニューフォルダを作成しない」にチェックを入れます。

追加タスクの選択画面です。デフォルトでは「サポートされているファイルの種類のエディタとして、Codeを登録する」と「PATHへの追加」にチェックが入っています。ここではデフォルトのままで問題ありませんが、必要に応じてタスクを選択してください。

設定が終わったら［次へ（N）>］をクリックします。

最終確認画面です。表示された内容でインストールしてもよければ［インストール（I）］をクリックしてください。

インストールが終了すると次の画面が表示されますので、［完了（F）］をクリックします。デフォルトではVS Codeが実行されます。

VS Codeのセットアップウィザードが完了して、VS Codeが使えるようになりました。

続いてVS Codeを起動すると、リリースノート（更新履歴）が表示されます。ここでは「May 2022（version 1.68）」となっています。

旧バージョンでは、メニューなどの表示言語が英語でしたが、Version1.58以降は日本語化されていますので、日本語プラグイン「Japanese Language Pack for Visual Studio Code」のインストールは不要です。

Visual Studio Marketplace

VS Codeには『Visual Studio Marketplace』というVS Codeの拡張機能（プラグイン）を紹介、提供している専用サイトがあります。

VS Codeから直接、『Visual Studio Marketplace』でプラグインを検索してインストールすることができますが、あくまでもキーワードで検索するだけですので、あらかじめMarketPlaceに何があるのか、一覧で確認しておいた方が効率的にプラグインを利用できます。

【参考】：Visual Studio Marketplace

VS Codeプラグインを使う

VS Codeが使えるようになったら、早速プラグインを利用してみましょう。VS Codeは非常に多くのプラグインがあり、その大半は無償提供されています。プラグインの入れ方ですが、VS Code上から検索して、インストールボタンを押すだけでインストールができます。

ではさっそくプラグインのインストール方法について解説をします。

VS Codeの左メニューバー（黒の縦帯）の「プラグイン拡張ボタン」をクリックし、左上の検索ボックスにプラグインの名称を入れて検索をします。

たとえばPython関係のプラグインを見つけたい場合は、pytと一部だけ入力しても、候補のプラグインが一覧表示されます。目的のプラグインを選んだら、後はインストールボタンをクリックするだけです。

VS Codeおすすめのプラグイン7選

ここでは基本的なプラグインの中から、よく使われるプラグインを7つご紹介をします。実際にインストールして試してみましょう。気に入らなければ簡単にアンインストールができます。

vscode-iconsは、ディレクトリやファイルをアイコン付きで表示ができるプラグインです。このプラグインをインストールしておくと、一目でファイルを識別することができ、作業の効率を上げてくれる人気の拡張機能です。

vscode-iconsをインストールすると、次のようにファイルがアイコン表示されます。

Code Spell Checkerは、コード内のスペルミスが検出できるプラグインです。この機能を使うと、スペルミスをした個所に下線が引かれることで、タイプミスに気付くことができます。ミスした箇所を修正すると下線が消えます。

Auto Rename Tagは、HTMLタグなどの編集をした際、対応するタグの名前まで自動的に変更してくれるプラグインです。このため、入力の手間が大きく減り、コーディング作業を効率化することができます。

またHTML以外にも、ReactやVueなどのテンプレートでも同様にタグの自動変更ができます。HTML・React・Vueなどのテンプレートを編集する機会が多い方は、ぜひインストールしておきたいプラグインの1つです。

HTML入門：基本から学ぶHTMLの構造と構成要素を解説！

Reactの将来性はVue超え？できることやメリット・デメリットも解説

Auro Close Tagは、自動的に終了タグを生成してくれるプラグインです。タグを書くときに開始タグを入れると、自動で終了タグが作成されます。このプラグインをインストールしておけぱ、終了タグを打つ必要がないためコーディングの効率化が図れます。

Live Serverは自分のパソコン上でブラウザのプレビューができるようになるプラグインです。

このプラグインを使わなくとも、ブラウザでローカルアドレスを指定すれば、プレビューをすることは可能ですが、コーディングの保存・修正の度に、該当ファイルを開いたり、ページのリロードをしなければならず、余分な手間が掛かります。

Live Serverではコーディングをしながら、ボタン1つで結果を確認できるため、コーディング作業がはかどります。プログラマー、コーダーの方にはおすすめのプラグインです。

ZenkakuはVS Code上で「全角スペース」を可視化してくれるプラクインです。

プログラミングを始めた頃にありがちなミスで、半角スペースの代わりに誤って全角スペースを打ち込んでしまい、プログラムが動かないというケースがあります。こうしたミスは熟練者でも起こしてしまうことがありますが、こうしたミスを防いでくれるのがZenkakuです。

Pythonエンジニアには必須のプラグインです。これをインストールすることで、VS CodeがPythonエディタとなります。このプラグインを使うことで、構文を強調表示したり、コードナビゲーションやコードの書式設定などのサポート機能が提供されます。

PHP関連のプラグインも豊富にありますので、PHPを利用されている方は、検索で「PHP」と入れてみてください。

Pythonでできることは？仕事で活かせる領域や職種を紹介！

PHPでできることを解説！機械学習やスマホアプリ開発はできる？

プラグインを活用してオリジナルのVS Code

ここまでVS Codeの概要、VS Codeのダウンロードトインストール方法、VS Codeのプラグインを集めた「Visual Studio MarketPlace」の紹介、VS Codeプラグインのインストール方法、おすすめのプラグイン7選を紹介してきました。

VS Codeは無料ながら非常に優れたコードエディタで、プログラマーやエンジニアには必提のツールです。豊富なプラグインをインストールして、VS Codeを自分専用のエディタにカスタマイズし、仕事の効率アップを図ってみてください。