私はPHPやJavaScriptを書くことが多いですが、これらの言語と合わせて使用されるものにHTMLとCSSがありますね。
今回はHTML, CSSを書くときに便利なVisual Studio Codeの拡張機能についてまとめて見たいと思います。
共通で入れておきたい設定や拡張機能は以下で紹介しております。
最近人気のエディタといえば、Atom、Sublime Text、Visual Studio Codeあたりでしょうか。 今までAtomを使用してましたが、Visual Studio Codeに乗[…]
Highlight Matching Tag
こちらはHTML用の拡張機能になっていて、HTMLのタグのペアをハイライトしてくれるものになります。
https://marketplace.visualstudio.com/items?itemName=vincaslt.highlight-matching-tag
タグが入れ子になっている場合などに対応するタグがどれなのか、ひと目で分かるようになります。
Auto Close Tag
こちらは開始タグを記載した際に、閉じタグを記載してくれるものになります。
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
開始タグの「>」を入力した時点で閉じタグが挿入されます。
いちいち閉じタグを記載する必要がなくなるので、非常に便利です。
Auto Rename Tag
こちらは、タグを書き換える際に閉じタグも一緒に書き換えてくれるというものです。
https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
divタグからspanタグに変えたいという場合などに便利です。
IntelliSense for CSS class names in HTML
CSSファイルにあるクラス定義からHTMLのクラスを入力する際に、自動補完してくれる機能になります。
https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
以下HTML CSS Supportと同じような機能ですが、私が思う良い点、悪い点は以下の通りですので、好みの方を入れてみてください。
- 良い点：読み込むファイルパターンを設定できる
- 悪い点：読み込み元のファイル名の表示がない
HTML CSS Support
こちらも上記と同じく、CSSの定義からHTMLの入力補完をしてくれるものになります。
http://marketplace.visualstudio.com/items?itemName=ecmel.vscode-html-css
上記 IntelliSense for CSS class names in HTML と同じような機能ですが、私が思う良い点、悪い点は以下の通りですので、好みの方を入れてみてください。
- 良い点：読み込み元ファイル名が表示される
- 悪い点：読み込むファイルパターンを設定できない
CSS Peek
こちらはHTMLのidやクラスからCSSの定義を探せるものになります。
https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek
クラスの名前をwindowsなら「crtl」、macなら「⌘」を押しながらマウスオーバーで定義を確認することができます。
最後に
ここまで、HTML、CSSをより楽に開発できるような拡張機能を紹介してきました。
HTMLを書いていると途中でタグがごちゃごちゃになってしまったり、クラスの名前を忘れてしまい、CSSファイルを見に行くことが多かったのですが、これらの拡張機能で解決することができました。