Tailwind CSSのコーディングに必須の4つのVS Code拡張機能

Tailwind CSSのVS Code拡張機能

Tailwind CSSは、HTMLおよびCSSのフロントエンド開発を効率化するための人気のあるフレームワークです。

VS CodeのTailwind CSSの拡張機能を活用することで、さらに生産性を向上させることができるのですが、拡張機能がインストールされておらず、開発効率を低下させている開発者がいます。

この記事ではTailwind CSSのコーディングに必須の4つのVS Code拡張機能について説明しています。

オートコンプリート、構文の強調表示、構文チェックなどの高度な機能を提供します。

Tailwind CSSには大量のclass名が存在するため、Tailwind CSS IntelliSenseでclass名の候補などが表示できる状態でないと、開発効率が低下します。

Prettierソースコードを整形してくれるツールです。

VS Code拡張機能のPrettierをインストールするとコードの整形がしやすくなります。

さらに、prettierとprettier-plugin-tailwindcssをインストールすることで、class名の順序を上書き保存時に自動整形できます。

npm install -D prettier prettier-plugin-tailwindcss

Tailwind CSSでは大量のCSSクラス名を記述するので、class名を見やすくするためにPrettierは必須です。

これがないと場所によってclass名の順序が異なるカオスなコードになってしまいます。

prettier-plugin-tailwindcssを使用するにはVS Codeのプロジェクトフォルダのルートに.prettierrcを用意して、"plugins": ["prettier-plugin-tailwindcss"] を指定する必要があります。

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

Tailwind CSSでは以下のように@tailwindでTailwind CSSを使うためのファイルを読み込みます。

@tailwind base;
@tailwind components;
@tailwind utilities;

デフォルトのVS Codeでは@tailwindは不明の記述と解釈されてしまうため警告が表示されてしまいます。

PostCSS Language Supportをインストールすれば警告が表示されなくなります。

Tailwind CSSではほかにも@layerや@applyなども使用されますが、これらに関してもPostCSS Language Supportをインストールすれば警告が表示されません。

VSCodeのコマンドパレットからTailwindドキュメントページにアクセスできるようにする拡張機能。

Tailwind CSSはドキュメントを参照する機会が多いので必ずインストールしたほうが良いです。