Visual Studio Code（VS Code）で、プラグイン（拡張機能）を追加する方法について解説していきます。
VS Codeは通常の機能のままでも十分に使いやすいテキストエディターですが、真の魅力は豊富なプラグイン（拡張機能）を活用することで、単なるエディタを超えた強力な統合開発環境（IDE）へと進化する点にあります。
プラグインを使用することで、開発の効率性、生産性、柔軟性が大幅に向上します。
この記事では、VS Codeでプラグインをインストールし、プラグインを利用する方法を解説します。
INDEX
VS Codeのプラグインとは？
VS Codeのプラグイン（拡張機能）は、VS Codeの機能を拡張し、特定の開発ニーズに対応するためのツールです。
これにより、開発者は自分の作業スタイルやプロジェクトの要件に合わせて、エディターをカスタマイズできます。
VS Codeのプラグインは種類が豊富で、以下のようにさまざまな機能に対応するプラグインがあります。
- 言語サポート：JavaScriptやPHPなどのコード補完など
- 開発ツール：ローカルサーバーの立ち上げなど
- コードフォーマッター：Prettierなど
- UIのカスタマイズ：エディターの見た目を変更するテーマなど
- その他の開発サポートツール
今回は、Web制作では欠かせない、ローカルサーバーを簡単に立ち上げることができる「Live Server」を例に、インストール方法から使用方法について解説します。
また、プラグインにはインストールと同時に有効になるものと、利用する際に有効にする必要があるものがあります。
今回取り上げる「Live Server」は、利用するたびに有効にする必要があるプラグインです。
今回はプラグインを有効にする方法についても詳しく解説していきます。
プラグインのインストール
STEP1：プラグインを検索
まずはVS Codeを開き、左メニューの下側にある拡張機能（⌘⇧X）を開きます。
STEP2：検索フォームに「プラグイン名」入力
検索フォームに対象のプラグイン「live server」と入力します。
STEP3：対象のプラグインをインストール
検索結果に候補のプラグインが表示されるので、インストールボタンを押します。
STEP4：プラグインがインストールされているか確認
検索フォームに入力したテキストを削除し、「インストール済み」の中にインストールしたプラグインが追加されていればインストール成功です。
インストールしたプラグインを起動する
インストールが完了したら、プラグインを起動してみましょう。
「live server」はVS Codeで開いているプロジェクトフォルダをルートディレクトリとして、ローカルサーバーを立ち上げるプラグインです。
そのため事前にプロジェクトフォルダをVS Code上に開いておく必要があります。
以下のようなプロジェクトファイルを作成し、VS Codeにドラック&ドロップして、プロジェクトフォルダを開いておきましょう。
htdocs
└index.html<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Live Server 起動テキスト</h1>
</body>
</html>プラグインを起動する
起動方法は右下にある「Go Live」をクリックします。クリックすると「Go Live」が「Port：5500」というテキストに変わります。
その後、自動でローカルサーバーが立ち上がります。
プラグインを停止する
プラグインをを停止するには、「Port：5500」をクリック、またはVS Code自体を閉じると停止します。
プラグインを無効・アンインストールする方法
最後にインストールしたプラグインを無効、またはアンインストールする方法について解説します。
プラグインが多いと動作が重くなる原因にもなりますので、不要なプラグインは削除しておくことをお勧めします。
STEP1：拡張機能のインストール済みから対象のプラグインをクリックする
左メニューの下側にある拡張機能（⌘⇧X）を開き、対象のプラグインをクリックします。
STEP2：無効にする、またはアンインストールボタンをクリック
クリックしたプラグインのウィンドウが開くので、「無効にする」または「アンインストール」ボタンをクリックします。
「無効にする」を押した場合は、「拡張機能の再起動」が表示されますので、再度クリックするか、VS Codeを再起動すると無効化されます。
「アンインストール」の場合もクリックした後にVS Codeを再起動すると完全にアンインストールされます。
まとめ
VS Codeのプラグインをインストールすることで、エディタの機能を大幅に拡張し、開発効率を高めることができます。
この記事では、VS Codeのインストールから始まり、プラグインの検索とインストール方法、さらに「Live Server」の具体的な利用方法について解説しました。
プラグインの活用により、コードの自動補完やフォーマット、デバッグ、バージョン管理、UIカスタマイズなど、さまざまなニーズに対応した開発環境を構築できます。
自分のプロジェクトに最適なプラグインを見つけて、VS Codeを最大限に活用しましょう。
