VSCode で Tailwind CSS のクラス名を自動補完する拡張機能が便利です
こんにちは、 Gaji-Labo 横田です。今回は VS Code で Tailwind CSS を扱うときに便利な拡張機能 Tailwind CSS IntelliSense を紹介します。
Tailwind CSS IntelliSense
Tailwind CSS で定義されたクラス名や関数などを脳内に直接インストールできればいいのですが、毎回公式ドキュメント内で指定したいクラスを検索するのは非効率ですし開発スピードが上がりません。そこで公式の Tailwind CSS IntelliSense 拡張機能の出番です。VS Code にインストールするだけで使えます。
クラス名を自動補完してくれる
クラス名を自動で補完してくれ、補完候補の右側に CSS を表示してくれます。前回の記事でも触れましたが、クラス名に独自の接頭辞を付与している場合でも tailwind.config の設定を読んで補完してくれるので便利です。
ただ、書きたいプロパティの最初の一文字をあらかじめ覚えていないと、膨大な補完候補からお目当てのプロパティを探すことになってしまうので、個人的には公式ドキュメント内の検索も未だによく使っていたりします・・。
ホバーでプレビューしてくれる
クラス名にカーソルをあわせると CSS 全体を表示してくれるのでスタイリングがコード上で一目瞭然です。
自動補完を常に表示する
デフォルトだとクラス名の自動補完の表示されるタイミングが遅かったり、クラス名を書き直したい時に補完されないことがありストレスでした。VS Code の設定に以下を追記すると、常にクラス名候補を表示してくれるようになります。
"editor.quickSuggestions": {
"strings": true
}まとめ
Tailwind CSS で開発を進めるには必須の拡張機能ですね。ご参考になれば幸いです。
