Visual StudioCode（以下VSCode）の拡張機能は種類が多く、どれをインストールすればいいか分からなかったり、入れすぎると競合してしまったり……なんてことも。
今回はHTML/CSSを使用するときに便利な張機能をご紹介したいと思います。
関連記事
VSCodeのインストールに関してはこちらをご覧ください！
言語やフレームワークに関係なく、汎用的に使用できる拡張機能はこちらをご覧ください！
拡張機能のインストール方法
左のメニューの一番下、□が４つのアイコンをクリックしてください。
画面左上にある検索ボックスにプラグイン名を入力し、該当の項目をクリック
緑色の「Install」ボタンをクリック
拡張機能のインストールはこれで完了です。
HTML
コーディングを補助してくれる便利な拡張機能をご紹介したいと思います！
Auto Close Tag
開始タグを入力した際、自動的に対になる終了タグを挿入してくれる拡張機能です。
少し複雑なHTML構造になるとタグを閉じ忘れてしまうと探して修正するのは一苦労ですが、この拡張機能があればそもそも閉じ忘れることがなくなります！
コーディングする際にはぜひ入れておきたいおすすめの拡張機能です。
次にご紹介するAuto Rename Tagとセットで導入することをおすすめします。
Auto Rename Tag
開始タグを修正した際、自動的に対になる終了タグを修正してくれる拡張機能です。
<div>テスト</div>divをaに変更する際、開始タグを修正するだけで自動的に
<a>テスト</a>となります。終了タグを修正し忘れることがなくなりますので、予期せぬデザイン崩れを防ぐことができますよ！
HTML Snippets
HTML用の追加コードスニペットです。入力中に、入力内容に応じたHTMLスニペットが表示されるようになります。
h2やdivなど、頻繁に使うタグにこの拡張機能は必要ありませんが、articleやaside、figureなど、少し使用頻度の低いタグを入力する際にとても便利です。「あれ？これで合ってたっけ？」と不安になって調べる機会が減りました。
確認時間やスペルミスが減るので、コーディングの時間削減にも繋がります。
IntelliSense for CSS class names in HTML
HTMLにCSSクラスを指定する際、入力補完してくれる拡張機能で、ワークスペースの中のCSSを読み込み、HTML上でクラス指定するときに入力候補を表示してくれます。
１日で小規模なWebサイトを構築するなら記憶しておけますが、日が空いたり大規模なWeb構築になってくると、自分で定義したCSSでも忘れてしまうかと思います。
ですが、この拡張機能があれば入力候補を表示してくれるので、スムーズにクラス指定できるようになります！
CSS
続いてCSS入力時に便利な拡張機能をご紹介します。
Autoprefixer
IE、GoogleChrome、Firefoxなど、ブラウザが違っても同じ表示になるように記述するベンダープレフィックスですが、日々変化するブラウザの仕様に対応し、必要なベンダープレフィックスだけを付与していくことは難しいです。
そんなベンダープレフィックスを自動で付与してくれるのがこちらの拡張機能です。
使用頻度の高いflexboxやtransformなど、全て調べる手間を考えると結果は一目瞭然。ぜひ導入することをおすすめします！
後述するLive Sass Compilerという拡張機能に同じ機能があるため、そちらをインストールする場合はAutoprefixerの導入はお控えください。
CSSTree validator
Sass
ここからはSassを使用する際に必要な拡張機能です。
Live Sass Compiler
sass(scss)ファイルを保存時、自動的にcssファイルにコンパイルしてくれる拡張機能です。
setting.jsonを編集すれば保存場所を変更することもできますので使い勝手もよく、Sassを扱う上で必須と言っても良い拡張機能です。
CSSファイルの出力場所について
Live Sass Compilerは、設定がデフォルトのままだと、コンパイルされたcssファイルはscssファイルと同階層に出力されます。
scssファイルが増えてくると雑多になってしまいますので、このままだと将来的に少し管理が面倒になってしまうかもしれません。
"liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "~/../css/"
}
]しかし、setting.jsonというファイルにこのように記述すると、保存場所を分けることが可能です。
さいごに
今回はVSCodeの拡張機能のうち、HTML/CSS/Sassを書く際に必要最小限インストールしておいた方がいい拡張機能をご紹介しました。
導入していただけた拡張機能はございましたでしょうか？少しでもお役に立てたなら幸いです。
