VSCode拡張機能を使ってみよう！【フロントエンド開発者向け】

Visual Studio Code（以下、VSCode）は多くの技術者に愛用されているコードエディターです。
VSCodeは向けに提供されている様々な拡張機能をインストールすると、さらに便利で強力なツールとなります。この記事では主にフロントエンドでの開発に役立つ拡張機能をいくつか紹介しますので、ぜひご活用ください。

そもそも拡張機能とは？

VSCodeの拡張機能とは、その名の通りVSCodeの機能を追加、拡張するためのプラグインです。
拡張機能はユーザーによる特定のプログラミング言語での開発をサポートしたり、開発効率を向上させたりすることを主な目的として使用されます。
大きく分けると、次のような特徴に分けられます。

言語サポート
多くのプログラミング言語（JavaScript、Python、C++など）のシンタックスハイライト、コード補完、デバッグ機能を追加する拡張機能です。コードを見やすくする、わかりやすくする、といったことが主な目的です。

ツールの統合
GitやDocker、データベースツールなど、外部の開発ツールとVSCodeを連携させることを目的とした拡張機能です。

テーマ・カスタマイズ
エディタの外観をカスタマイズするためのテーマやアイコンパックなどのデザイン系拡張機能です。技術的なサポート目的ではなく、デザイン目的の拡張機能です。

作業効率向上
コードの自動整形やタスク管理ツールなど、作業を効率化するための機能を追加する拡張機能です。

拡張機能をインストールするには

拡張機能はVSCode内の「拡張機能」タブから簡単にインストールできます。一般的に、拡張機能は以下の手順でインストールします。

1. VSCodeを起動します。
2. 左サイドバーにある四角いアイコンが積み重なったような「拡張機能」アイコンをクリックします。（またはキーボードショートカット: Ctrl + Shift + X / Cmd + Shift + X）
3. 上部にある検索バーに、インストールしたい拡張機能の名前やキーワードを入力します。基本的に拡張機能の名称を入力して検索しますが、開発言語を入力して検索することも可能です。
   例えば、JavaScriptの開発サポートを目的とした拡張機能を検索したい場合は「JavaScript」と入力して検索します。
4. 検索結果に表示された拡張機能のリストから、目的の拡張機能を選択します。各拡張機能にはレビューやインストール数が表示されるため、その拡張機能が信頼できるかどうかを判断する基準のひとつとなります。
5. 選択した拡張機能の詳細ページが表示されたら、青色の「インストール」ボタンをクリックします。
   
   インストールが完了すると、自動的に機能が有効化されます。
   
6. 一部の拡張機能では、VSCodeを再起動する必要があります。その場合は、再起動を求める通知が表示されるので、指示に従います。

インストールした拡張機能の設定変更

拡張機能の設定は、以下の手順でVSCode共通の設定から変更できます。

1. VSCodeの「設定」を開きます（Ctrl + , または Cmd + ,）。
2. 検索バーに拡張機能の名前を入力して設定を表示します。
3. 表示された項目を変更します。

インターフェースを日本語に変更する – Japanese Language Pack for Visual Studio Code

Japanese Language Packは、VSCodeのインターフェースを日本語に翻訳してくれる拡張機能です。英語が苦手な方や、より直感的に日本語で操作したい場合に非常に便利です。VSCodeのメニューやメッセージがすべて日本語化され、作業がスムーズに進みます。

使い方
特に設定は不要で、拡張機能をインストールするだけでVSCodeのインターフェースが日本語化されます。もしも英語に戻したい場合は、設定メニューから言語を再設定することができます。Ctrl + Shift + Pを押して、”Configure Display Language”と入力し、リストからenを選択すると英語に戻すことができです。

リアルタイムでページプレビューを表示する – Live Preview

Live Previewは、VSCode内で直接HTMLやWebアプリケーションのプレビューを確認できる拡張機能です。ブラウザを開かなくても、VSCodeのサイドパネルでライブプレビューが可能になり、コードの変更をリアルタイムで確認できるため、効率的に開発が進められます。特に静的なHTMLサイトやCSS、JavaScriptの動作確認に役立ちます。

使い方
拡張機能をインストール後、HTMLファイルを開き、右上に表示される「Live Preview」ボタンをクリックするだけでプレビューが開始されます。

エクスプローラービューからHTMLファイルを右クリックし、「プレビューの表示」をクリックしてもプレビューが開始されます。

SassやSCSSファイルをリアルタイムでCSSにコンパイル – Live Sass Compiler

Live Sass Compilerは、SASSまたはSCSSファイルをリアルタイムでCSSにコンパイルしてくれる拡張機能です。保存するたびに自動的にコンパイルされるため、手動でコンパイルする手間が省け、効率的なスタイルシートの管理が可能です。

使い方
拡張機能をインストール後、SASSまたはSCSSファイルを開くとVSCode画面下部にWatch Sassという項目が表示されるので、これをクリックします。

クリックするとWatch Sassとなります。この状態でSASSまたはSCSSファイルを保存すると自動的にCSSファイルが生成されます。

JavaScript構文を素早く入力 – JavaScript (ES6) code snippets

JavaScript (ES6) code snippetsは、JavaScript ES6の構文を素早く入力するためのスニペット集を提供してくれる拡張機能です。頻繁に使うコードを簡単に自動補完することができ、手入力の手間と入力ミスを減らし、開発の効率を向上させます。

使い方
インストール後、JavaScriptやTypeScriptファイル内で以下のスニペットが利用可能になります。コードを入力し始めると、候補が表示され、Tabキーで補完が確定されます。
スニペットの例は拡張機能のページで紹介されています。

console.logの入力例：

1. clgと入力
   
2. clgと入力したのち、タブキーを押下（console.logのコードスニペットが出力される）
   

ファイルパスを自動補完 – Path Intellisense

Path Intellisenseは、ファイルパスを自動補完してくれるプラグインです。特に大規模なプロジェクトで、ファイルパスを正確に書く手間を省き、効率的な開発をサポートします。

使い方
ファイルパスを記述する際に自動補完候補が表示され、入力中にTabキーを押すことで補完が確定されます。特にモジュールのインポートや画像ファイルの指定に便利です。

お問い合わせ

株式会社HumAInではフロントエンド開発、バックエンド開発、インフラ構築などを通じて様々なサービスやウェブサイトの制作を行っています。詳しくはお問合せください。