更新情報
- 25/4/15 「サイト制作時に便利な拡張機能」項目内に「Project Manager」の紹介を追加しました
本記事では、VS Code(Visual Studio Code)で利用できるサイト制作の際に便利な拡張機能について紹介しています。VS Codeそのものの設定や各拡張機能の設定・使い方について、詳細は解説していません。
VS CodeはMicrosoftが開発している個人・商用とも無償のコードエディタです。Windowsに限らず、MacやLinuxでも利用可能です。
カスタマイズ次第でかなり自分好みのエディタに設定できるので、使用するエディタに迷っている、現在使用しているエディタとは別のものを試してみたいとなったときに、一度使ってみるとよいと思います。
VS Codeは初期状態の言語は英語のため、日本語に限らず他の言語で利用するためには拡張機能を別途インストールする必要があります。
VS Codeの拡張機能の入手方法と注意点など
VS Codeの拡張機能は公式のマーケットプレイスで公開されているほか、VS Codeエディタ上からも直接探してインストールが可能です（エディタのサイドメニューから拡張機能を検索できます）
基本的には英語ですが、拡張機能によっては日本語で説明が書かれているものもあります。
留意事項
拡張機能はMicrosoftや各言語の公式に限らず、企業や個人開発者が開発・公開されています。拡張機能の開発元に青バッジがついているものがありますが、「VS Code公式のお墨付き」という解釈で問題ありません。
拡張機能の中には稀にマルウェアなどが混入しているものがあるので、上記青バッジの有無にかかわらず、事前に複数サイトの記事（できるかぎり日付の新しいもの）を調べるなど、かならず自分でも確認のうえインストールの判断をしてください。
以下は筆者のVS Code拡張機能のキャプチャ画像です（インストールしている拡張機能部分を加工しています）
VS Codeからは「拡張機能」タブから、検索フォームで拡張機能を検索・インストールが可能です。各拡張機能は歯車アイコンをクリックすると、アンインストールや無効化、また設定画面が表示されます。
Webサイトのマーケットプレイスでは、各拡張機能ページの「Install」ボタンを押下すると、VS Codeを開いて拡張機能をインストールするかを尋ねるダイアログが表示されます。
また、拡張機能はVS Codeインストール時に初期状態でインストールされているものもあります。これらは基本的に削除や無効化はせず、そのままにしておいた方がよいです（独自にインストールした拡張機能の関係で設定を変更することはあります）
サイト制作時に便利な拡張機能
サイト制作時に便利な拡張機能を紹介しています。個別の設定などについては解説していません。
各拡張機能のURLは、Webサイトのマーケットプレイスにリンクしています。
Japanese Language Pack for Visual Studio Code
VS Codeのメニューなどを日本語化します。VS Codeをインストールしたら、とりあえず入れておくとよいです。
indent-rainbow
インデントの階層ごとに色をつけてくれます。色の指定も可。
上記は筆者の環境で使用したキャプチャ画面です。コードは適切にインデントすると見やすくなりますが、インデントが多いとわけがわからなくなるので、この拡張機能でそのわけのわからなさが軽減されます。
Rainbow CSV
CSVファイルをデータごとに色分けしてくれるので、CSVファイルが見やすくなります。また、表形式で確認することもできます。
Bracket Lens
JavaScriptやPHPファイルなどで、閉じ括弧の後ろにそのはじまりの関数情報などを表示してくれます。「indent-rainbow」同様、長くなってしまったコードのわけのわからなさが軽減されます。
Prettier - Code formatter
コードの整形ツール（フォーマッター）です。コードをインデント処理して見やすくしてくれます。
インストール後、VS Codeの設定「Editor: Default Formatter」の項目でこの拡張機能を指定して利用します。
Zenkaku-Hankaku
日本語の全角文字と半角文字を変換します。これ以外にもひらがなとカタカナなどいろいろなタイプの日本語変換に対応しています。
ESLint
JavaScriptの検証ツール。エラー箇所を提示してくれます。
Project Manager
サイト単位など複数の作業フォルダが存在する場合に、フォルダごとに名前をつけて管理できます（ファイル単体でも可）
VS Codeは作業フォルダ（ワークスペース）をブックマークのように登録しておくことができないため、複数の作業フォルダがある場合は履歴を辿ったり逐次ファイルメニューからフォルダを呼び出す必要がありますが、この拡張機能により、左サードバーから登録したフォルダを呼び出すことが可能になります。
Material Icon Theme
サイト制作には直接関係ないですが、インストールするとVS Code左メニューに表示されるファイル・フォルダ一覧において、ファイルの拡張子やフォルダごとに対応するアイコンを表示してくれます。ファイル・フォルダ一覧の可読性や探しやすさが向上します。
テキスト校正くん
こちらもサイト制作には直接関係ないですが、インストールすると文章の校正を行ってくれます。
誤字脱字をすべて拾うというわけではなく、また提示されたものを必ずしも修正する必要はないですが、うっかりミスなど気づけるので、VS Codeを利用して文章を書く際におすすめです。
以下、開発元の記事もご参考ください。
番外編：VS Codeのテーマ（外観・スキン）を変更する
VS Codeはデフォルトで利用できるテーマ（外観・スキン）以外にもいくつかテーマが用意されており、また個人など有志の方々がたくさんのテーマを作成・配布されています。テーマも拡張機能同様、インストールして利用可能です。
下記サイトではVS Codeで利用できるテーマが常時多数公開されています。プログラミング言語ごとのプレビュー機能があるので、イメージがしやすいです。
各テーマの「VS Code」ボタンを押下すると、VS Codeが開いてテーマをインストールできます。
余談ですが、筆者は現在「Spacemacs」のライトテーマを利用しています。
本記事の内容は以上です。