【VScode】【JSX】【Bootstrap】【Tailwind CSS】インテリセンスでサクサクスタイリング

概要

コードエディタの重要なポイントとして、どれだけコードを書く際のサポートができるかどうかで開発速度は大分変わってくると思います。

VScode、JSX、を使用する環境でおすすめの拡張機能を紹介します。

JSXといえば、最近のフロントエンドフレームワークでは、ほぼ必須の書き方になると思うので役に立つ場面は多そうです。

必要な拡張機能

• https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
• https://marketplace.visualstudio.com/items?itemName=thekalinga.bootstrap4-vscode

上記の二つになります。
インストールしてもらって必要なプロジェクトで有効にして使ってください

こうなります

bootstrap上に記述してあるコードはこちらで補完が効くようになります。

TailwindCSSを使用している場合

• https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss

TailwindCSSはご丁寧に実際のスタイルの情報まで補完してくれるので、個人的にはもう優勝です。

最後に

開発が爆速になりますように。