最近Bootstrap5をはじめたばかりの人やVSCodeを使いはじめた人のための、Bootstrap5向けVSCode拡張機能まとめです。
VSCodeはデフォルト状態でも十分コーディングできるのですが、プログラム言語ごとのスニペットやコード補完機能などの拡張機能を追加することでさらに効率よくコーディングできるようになります。
そこでこの記事では、CSSフレームワークで最も使われているBootstrap5のためのVSCode拡張機能を紹介します。
Bootstrap 5 & Font Awesome Snippets
まずはこちら。Bootstrap5とWebサイトであると便利なFontAwesomeというアイコンフォントのスニペットです。
b5-をつけてコンポーネント名を入れるだけでBootstrap5のコードを一瞬で出力してくれます。一度使うとわかりますがこれは本当に便利なんです。
ただし、このようなスニペット機能に慣れると普通にコーディングするのがめんどくさくなるという諸刃の剣でもあります。
IntelliSense for CSS class names in HTML
2本目はこちら。HTMLファイルからリンクしているCSSファイルを参照してHTMLコードのclass名を補完してくれる拡張機能です。
この機能があればCSSで定義したセレクタをわざわざ検索しなくても自動的に出力してくれるのでかなりコーディングがはかどります。
HTML CSS Support
こちらもリンクしているCSSファイルからClass属性やID属性を補完してくれる拡張機能。
Bootstrap5のように外部ファイルの参照にも対応しているのでコンポーネントのClass名を忘れたときにはこれがあると便利です。
Live Server
次はこちら。現在編集しているHTMLファイルをブラウザ上で表示してくれる拡張機能です。単にHTMLファイルをブラウザで表示するのではなく、ローカルサーバーで表示してくれます。
細かい設定など行うことなくワンクリックで実際の動きを確認できるのでWeb開発では必須レベルの拡張機能です。
Microsoft Edge Tools for VS Code
こちらは編集しているファイルをEdgeブラウザで表示してくれる拡張機能。VSCode内で表示してくれるのでウィンドウの切り替えの必要がなく簡単に表示の確認ができます。
ブラウザの表示の他にEdgeのDevtoolsも使用可能です。
Live Sass Compiler
こちらはSassファイルを自動でコンパイル(CSS化)してくれる拡張機能。Bootstrap5に限らずWebサイトのコーディングでSassを使うことはよくあるのですが、コンパイルするのにgulpを入れたり結構面倒なことが多いです。
この拡張機能を入れれば「Watch Sass」をクリックするだけでコンパイルができるので手軽にコーディングしたいときにおすすめ！
Prettier
こちらは書いたコードをきれいに整理してくれる拡張機能。長〜いHTMLコードやCSSを書いてるとコードがゴチャゴチャしてすごく読みにくくなってきたりしますが、この拡張機能を使えば一発でプロフェッショナルな美しいコードに整理してくれます。
Bootstrap5のスニペットやコードのコピペを繰り返したガタガタのソースコードもこれでバッチリ綺麗に納品できるというわけです。
Autoprefixer
こちらはサポート対象のブラウザごとに違うベンダーベンダープレフィックスを自動的に書いてくれるVSCodeの拡張機能。
CSSを書いているときにベンダープレフィックスを忘れてしまってもこれがあれば自動的に挿入してくれます。
CSS Peek
HTMLコード上でCSSスタイルの内容をポップアップ表示したり、CSSが書かれている場所にジャンプすることができる拡張機能。
自分でClassセレクタを検索する必要がないので大規模なサイトの修正などで威力を発揮してくれます。
まとめ
ここで紹介している拡張機能はどれも無料でインストールボタンをクリックするだけで導入できるので、HTMLやCSS、Javascriptなどのコーディングをする人にも役立つのではないでしょうか。
ここまで紹介した中でもとくにおすすめできるのが次の3つです。
- Bootstrap 5 & Font Awesome Snippets
- HTML CSS Support
- Live Server
Bootstrap5向けのスニペットに合わせてClassの補完機能、ブラウザでチェックしながら作業できるLiveServerを組み合わせればあなたも今日からプロフェッショナルですね！