VSCodeに入れている拡張機能紹介～実務・個人制作～

私は、テキストエディタはVSCodeを使用しています。
ショートカットキーが充実していることと、拡張機能でのカスタマイズ性が高いことは、VSCodeの魅力だと思います。

今回は、私が実務や自宅での制作・学習で使用しているVSCodeの拡張機能をご紹介したいと思います。

※VSCodeのショートカットキーについては、他の記事でも紹介していますので、そちらもよろしければご参考にどうぞ。

作業を一気に効率化！実務で使ってるショートカットキー一覧（VSCode編）

実務と自宅での制作・学習。拡張機能は使い分けています

実は、私は実務で使う拡張機能は必要最小限にしています。たとえば、タグの自動入力をしてくれるものや、タグのハイライト表示をしてくれるものなどに限定しています。
フォーマッター（コード整形）系やライブプレビュー系の拡張機能は使用していません。

会社やプロジェクトによって拡張機能の使用可否は違います。

その分、自宅で制作や学習に使っているVSCodeには、実務以上に拡張機能を入れています。ただ、そちらは訓練校在籍時に先生やクラスメイトなどから教えてもらった拡張機能をその場で入れたりしていたので、今になって「この拡張機能って何のために入れてるんだっけ？」と思うこともしばしば…。

というわけで、この記事は、自分のための拡張機能の棚卸し的な役割も果たしています（笑）。

実際に使用している拡張機能

それでは、実務で使用しているもの・自宅のVSCodeに入れているものを分けて紹介していきます。
ちなみに、実務で使用している拡張機能は、すべて自宅のVSCodeにもインストールしています。

実務でも使っている拡張機能

Auto Complete Tag

Auto Close TagとAuto Rename Tagがひとつになった拡張機能。

Auto Close Tag・・・閉じタグを自動挿入してくれます
Auto Rename Tag・・・タグ変更時、開始タグを修正するだけで閉じタグが自動修正されます

ちなみに、Auto Close TagとAuto Rename Tagはそれぞれ単体でも存在するので、別々にインストールすることもできます。

Bracket Pair Colorizer

CSSやJSで使用する { } や ( ) といったカッコを色分けし、セレクタやメディアクエリ、関数などの範囲の識別をしやすくしてくれます。

Highlight Matching Tag

HTMLで、カーソルを合わせた箇所に対応する開始タグ・閉じタグをハイライト表示（アンダーライン）してくれます。ラインのカラーなどは設定で変更可能です。

htmltagwrap

選択範囲を新しく追加するタグで囲むことができます。Auto Rename Tagと併用すれば、タグ追加→リネーム（タグ変更）を素早く行えます。

Japanese Language Pack for Visual Studio Code

VSCodeはデフォルトでは英語なので、日本語にするために入れています。

自宅のVSCodeにのみ入れている拡張機能

CSSComb

CSSのコードフォーマッター（整形）としてメインで使用している拡張機能。初期設定は少し大変ですが、一度設定してしまえば一発でコード整形ができるのでオススメです。ショートカットキーを付与すればさらに楽にコード整形ができます。初期設定方法は以前別の記事でまとめているのでそちらをご参照ください。

CSSCombの設定方法～初インストールから使えるようになるまで（VSCode）

CSSCombは、Comb（櫛）と付くその名の通り「CSSを、まるで櫛で髪をとかすように整形してくれる」拡張機能です。ですが、この拡張機能はただインストールしただけでは思ったように機能してくれません。いくつかの初期設定が必要になります。...

Prettier

HTMLやJSのコードフォーマットに使っています（CSSだけはCSSComb）。

Live Sass Compiler

VSCode内の機能としてSassをコンパイルしてくれるものです。CSSへの出力保存先や形式などをオプションで設定可能。

Live Server

ブラウザでファイルのプレビューが可能。リアルタイムではなく、ファイルを保存した段階で反映されます。Live Sass Compilerをインストールすると同時についてくるようです（後で知った）。

WakaTime

プロジェクトごと、ファイルごと、言語ごとなどの作業時間をログに残してくれる拡張機能です。アカウントを登録する必要はありますが、無料で二週間分の作業時間のログを残してくれます。二週間以前の記録については、毎週メールが届くのでそちらで残しておけます。

Material Icon Theme

VSCodeは、デフォルトではファイルの拡張子に応じた独自のアイコンが表示されます。この拡張機能を入れることでHTMLやCSSなど言語ごとのロゴアイコンを表示してくれ、ファイルの種類が一目瞭然になります。

CSSPeek

クラス単位などに指定したCSSの記述を、HTML上で参照できます。

CSSTree validator

CSSのスペルミスなどを、W3Cの規格にのっとってバリデート（チェック）してくれます。

HTML CSS Support

idやclassの補完機能です。

HTML Preview

ブラウザを使用せず、VSCode内でプレビューを確認できます。ただし背景色などが完全に表示されない時もあるので、基本的にはこちらよりも先述の「Live server」を使用しています。

HTMLHint

コード内のエラーを表示してくれます。

IntelliSense for CSS class names in HTML

HTMLタグにクラス名を指定する際に、CSSに定義されているクラス名を補完として表示してくれる拡張機能です。

Markdown All in One

私は個人制作の際に構想などをマークダウンで書いています。この拡張機能を入れることでマークダウン記法のショートカットキーなどが有効になるので入れています。

markdownlint

マークダウンの記述エラー出力。

まとめ

今回は、私がVSCodeで使用している拡張機能を、実務使用・個人使用に分けてまとめました。

実務で使用している拡張機能については、私にとってはとても重要度の高いものばかりです。これらがないと、限られた時間の中で修正や制作を行うことは難しいだろうな、と思わされるほどです。

自宅で使用している拡張機能については、冒頭にも書きましたが、この記事を作成したことで「これはこういう機能だったのか」とあらためて確認することができました。これから自宅での学習・制作に活かされることと思います（笑）。

もしこの中に、あなたのコーディングに役立てることができそうな拡張機能があれば、ぜひ試してみてくださいね。

ここまで読んでいただき、ありがとうございました。

VSCodeに入れている拡張機能を紹介します。