Web制作を始めて、エディタとしてVisual Studio Code（VSCode）を利用している方は多いと思います。
VSCodeのメリットの一つは「便利な拡張機能が豊富」であることですが、あなたはどの拡張機能・プラグインを利用していますか。VSCodeをインストールして初期設定のまま利用している方もいるかもしれません。
このページでは、私が数多くのWeb制作案件を手がけてきた経験から、VSCodeのおすすめの拡張機能・プラグインを紹介します。
どれを追加すべきか迷っている方は、まず私のおすすめの拡張機能・プラグインを試してみてください。ぜひ、この情報を参考にしてください。
目次
プラグイン・拡張機能とは
プラグイン・拡張機能とは、通常の機能に加えて、さまざまな機能を補完できるツールのことです。
VSCodeのプラグインや拡張機能には、例として、自動で閉じタグを付与したり、パスを予測して候補を表示したりするものがあります。
これらを効果的に使用することで、制作や開発作業が容易になり、作業速度が大幅に向上します。
VSCodeおすすめプラグイン・拡張機能一覧
さっそく、私がおすすめするVSCodeのプラグインと拡張機能を紹介します。
紹介する順番は名前順で、特におすすめ度で並べているわけではありません。
それぞれ紹介していきます。
Auto Rename Tag
「Auto Rename Tag」は、タグを変更した際に、変更したタグ本体とそれに対応する閉じタグが自動的に同時に変更されるという機能を持つプラグインです。
このプラグインの最大の利点は、開始タグを変更すれば、対応する終了タグも自動的に一緒に変更されるという点にあります。
これにより、一つ一つ手動で変更する必要がなく、大幅な時間短縮が可能となります。特に複雑なコードを取り扱う際や、大量のタグを一度に変更する必要がある場合に非常に役立ちます。
Duplicate Action
「Duplicate Action」は、選択したファイルやディレクトリを簡単に複製するためのプラグインです。
テンプレートとして作成したファイルをコピーして使い回したい場合などに非常に便利なツールです。
これにより、新たなファイルやディレクトリをゼロから作成する手間を省き、効率的な作業が可能となります。
GitHub Copilot
「GitHub Copilot」は、AI技術を活用したプログラミング支援ツールで、その機能は多岐にわたります。コードの自動補完や予測、提案などといった特性を備えており、これらの機能はプログラミング作業を大幅に効率化してくれます。
たとえば、あなたがコードを打ち始めると、GitHub Copilotはその次にどのようなコードが適切かを予測し、それを提案します。
GitHub Copilotの利用は、登録後最初の60日間は無料で、その後は月額10ドル、または年間100ドルの料金が発生します。
そのため、まずは無料期間中に試してみることをおすすめします。
実際に私自身も、このツールがなければプログラミングを行うのは考えられないほど、助けてもらっています。
Japanese Language Pack for Visual Studio Code
VSCode内の文章を日本語に変換します。デフォルト設定が英語なので、インストールしておくと便利です。
Path Intellisense
「Path Intellisense」は、コード内でファイルパスを指定する際に便利なプラグインです。
パスの入力を開始すると、存在するファイルやディレクトリの名前を自動的に候補として表示してくれます。
これにより、タイプミスを防ぎつつ、必要なパスを素早く正確に入力できます。特に大規模なプロジェクトで多数のファイルやディレクトリを管理している場合、このプラグインは時間の節約になります。
Prettier – Code formatter
「Prettier – Code formatter」はコードフォーマッターの一種で、コードをきれいに整形してくれるプラグインです。
一貫性のあるコードスタイルを維持するのに役立つ上に、JavaScript、TypeScript、CSSなど、さまざまな言語をサポートしています。
コードを書いた後、保存時に自動的にフォーマットを整えてくれるので、コーディングがよりスムーズになります。
Trailing Spaces
「Trailing Spaces」は、行の最後に不要な半角スペースが挿入されている場合に、それをハイライトで表示します。
これにより、余計なスペースの存在が一目で確認でき、迅速に修正できます。
vscode-icons
「vscode-icons」は、VSCodeのファイルエクスプローラーに表示される各ファイルやディレクトリのアイコンを変更するプラグインです。
これらのアイコンは、ファイルの種類（拡張子）に基づいて自動的に割り当てられます。
カラフルで視覚的にわかりやすいアイコンにすることで、ファイルの種類をすばやく識別し、効率的に作業を行うことが可能になります。
zenkaku
「zenkaku」は、VSCodeでのコーディング中に全角スペースを非常に視覚的に確認できるようにするプラグインです。
全角スペースは目視だけでは確認が難しいため、このプラグインを使用することで全角スペースがコード内にあることを明確に確認でき、不要な全角スペースを素早く見つけて削除することが可能となります。
インストールしていたが結局使うのをやめたプラグイン・拡張機能
VSCodeのプラグインの紹介について、人気が高いものは数多く存在します。
しかし、それぞれのプラグインの特性や機能がすべてのユーザーに適しているわけではありません。
私自身が経験した中で、一度は試してみたものの、最終的には自分の作業スタイルとは合わなくて使用をやめてしまったプラグインの中には以下のようなものがあります。
これらのプラグインが私には合わなかったとはいえ、それぞれには確かに魅力的な機能が備わっています。
そのため、これらのプラグインについては一度インストールしてみて、自分自身で試してみて、自分の作業スタイルやニーズに合うかどうかを判断してみてください。
もしかしたら、これらのプラグインがあなたのコーディング作業を大いに助けてくれるかもしれません。
indent-rainbow
「indent-rainbow」は、インデントの深さを視覚的に識別しやすくするプラグインです。
このプラグインは、各インデントレベルを色分けして表示し、ネストされたコードが一目で理解できるようにします。
これは便利な機能だとは思いますが、私にとってはコードの見やすさが減少しました。色が多すぎてコードが読みにくく感じ、結局使わなくなってしまいました。
Auto Close Tag
「Auto Close Tag」は、ソースコード内で開始タグを入力すると、対応する閉じタグを自動で生成するプラグインです。この機能を活用すれば、手動で閉じタグを入力する手間が省けます。
しかし、Emmetによる記述が主になったため、私の使用頻度は大幅に減少し、結果的にアンインストールしました。
Bracket Pair Colorizer 2
「Bracket Pair Colorizer 2」はコード内の対応する括弧を色分けし、見やすくする拡張機能です。これは対応する括弧を同じ色でハイライトします。
その結果、どの開始括弧がどの終了括弧と対応しているかが一目でわかり、ネストが深いコードでも追跡しやすくなります。
ただし、現在のVSCodeのデフォルトの機能では括弧の色付けが可能になったため、特別な理由がない限り、この拡張機能のインストールは必要ないかもしれません。
VSCodeプラグイン・拡張機能の入れ方、インストール方法
VSCodeのプラグインのインストール方法を紹介します。
- VSCodeを開き、左側サイドバーの一番下にあるボタン（プラグイン）をクリックします。
- 上部の検索窓に、インストールしたいプラグイン名を入力します。
- 希望のプラグインの「INSTALL」（日本語化していれば「インストール」）ボタンをクリックします。少し待つとインストールが完了します。
プラグインの横にある「INSTALL」の文字が消えていれば、そのプラグインは既にインストールされていることを示します。
インストール済みVSCodeプラグイン・拡張機能の確認方法
インストール済みのプラグインを「一覧」で確認する方法を紹介します。
- VSCodeを開き、左側サイドバーの一番下のボタン（プラグイン）をクリックします。
- 「INSTALLED」（日本語化している場合、「インストール済み」）メニューバーをクリックします。
- そこでインストール済みのプラグインが全て確認できます。
プラグインの無効化やアンインストールは、各プラグインの歯車マークから可能です。また、プラグイン名をクリックすると、そのプラグインの詳細な機能を確認できます。
インストールはしているが無効化されているプラグインは、一覧の中で薄く表示されています。ここから有効に変更することも可能です。
オフライン環境でVSCodeプラグインをインストールする方法
オフライン環境でVSCodeのプラグインをインストールする方法は以下の通りです。
- まず、オンライン環境でVisual Studio Code Marketplaceにアクセスします。
- インストールしたい拡張機能のページを開きます。
- ページの右側にある「Download Extension」（拡張機能をダウンロード）をクリックします。これにより、拡張機能は
.vsix形式のファイルとしてダウンロードされます。 - この
.vsixファイルをオフラインの環境に転送します。 - オフラインのVisual Studio Codeを開き、左のアクティビティバーにある拡張機能のアイコンをクリックします。
- 上部にある「…」メニューをクリックし、「Install from VSIX…」（VSIXからインストール）を選択します。
- ダウンロードした
.vsixファイルを選択し、「Open」（開く）をクリックします。
以上の手順で、オフライン環境でもVSCodeのプラグインをインストールすることができます。
まとめ
以上、私がVSCodeで利用しているおすすめのプラグインを紹介しました。
コーディング作業を効率化するもの、視覚的にコードをわかりやすくするもの、そしてあなたの作業をより快適にするものなどを紹介させていただきました。
これからも素晴らしいプラグインを見つけたらこちらのページに随時追加していきます。
また、一度は試してみたものの、最終的には自分の作業スタイルとは合わなくて使用をやめてしまったプラグインも紹介しました。これらのプラグインも、あなたのニーズに合えば大いに役立つかもしれません。
プラグインの選択は、あなた自身の作業スタイルやニーズ、あなたがどのようにコーディングを行うかに大きく依存します。それぞれのプラグインを試してみて、自分の作業に最適なものを見つけてください。
