Visual Studio Code Editorの利用を便利するプラグイン

記事

デザイン・イラスト

ウェブ制作に使えるオープンソースの高機能コードエディター「Visual Studio Code Editor」には、作業効率を上げてくれる便利なプラグインが搭載されています。

本記事では、VS Codeの利用を便利するプラグインを9つ紹介します。

Auto Close Tag

Auto Close Tagは、自動でHTMLとXMLの終了タグを補完してくれるプラグインです。タグを書く際に開始タグを入れると、自動で終了タグが作成されます。終了タグを入力する必要がなくなるため、コーディング作業が効率化されます。

Auto Rename Tagは、開始タグを修正する時に一緒に閉じタグを修正してくれるプラグインです。入力の手間が大きく減るため、Auto Close Tagと同様にコーディング作業が効率化されます。

Highlight Matching Tagは、対となる開始タグと終了タグをハイライトしてくれるプラグインです。HTMLでタグの相互位置を把握しやすくなるメリットがあります。

HTML CSS Supportは、HTMLでClass名を入力する時に、CSSファイルで定義されているClass名を読み込んで、補完してくれるプラグインです。使い回しするスタイルのブロックがある場合、Class名の打ち間違いを防げたりするメリットがあります。

indent-rainbowは、インデント数に応じて色分けし、ソースコードを見やすくするプラグインです。インデントを色分けしてくるため、階層の違いが視認しやすくなるメリットがあります。

Japanese Language Pack for Visual Studio Codeは、VS Codeを日本語化してくれるプラグインです。

Live Serverは、HTML／CSS／JavaScriptのファイルを更新した際に、ブラウザ画面に更新を自動的に反映してくれるプラグインです。コーディング時に必須の機能とされています。

Path Intelisenseは、入力中のファイル名を予測しオートコンプリートしてくれるプラグインです。ファイルパスの入力ミスが劇的に少なくなるメリットがあります。

いかがでしたでしょうか。ぜひコーディング作業の参考にしていただけますと幸いです。