本日、Visual Studio Code 向け Tailwind CSS IntelliSense 拡張機能の新しいバージョンをリリースしました。このバージョンでは、CSS とマークアップの両方に Tailwind 固有のリンティング機能が追加されています。
CSS のエラー検出
Tailwind はすでに CSS エラーを検出しています。たとえば、`@screen` ディレクティブでスクリーン名をタイプミスした場合などです。Tailwind CSS IntelliSense のリンティング機能は、これらのエラーを表面化させ、エディター内で直接、コンテキスト内で表示します。リンターは、`@tailwind`、`@screen`、`@variants`、`@apply` ディレクティブと、`theme` 関数呼び出しを検証します。
HTML の競合を検出
テンプレートファイル内のクラスリストを分析し、ユーティリティが競合していると思われるインスタンスをハイライトする、もう 1 つのリンティングルールがあります。たとえば、`mt-4` と `mt-6` を同じクラスリストに含めることは意図していなかったでしょう！
クイックフィックス機能搭載
問題をできるだけ簡単に修正できるように、すべてのリンティングルールには、Visual Studio Code 内から直接トリガーできる独自の「クイックフィックス」があります。誤って `@screen sm` の代わりに `@screen small` と入力した場合、エディターが自動的に `small` を `sm` に置き換えることができます！
単純なテキスト置換だけでなく、より複雑なリンティングルールに対して、さらに興味深いクイックフィックスもあります。拡張機能がどのように無効な `@apply` ディレクティブを自動的にリファクタリングできるかをご覧ください。
設定
新しいリンティング機能を気に入っていただけると思いますが、もしそうでなくても、または単にいくつかの動作を調整したい場合でも、ご安心ください。各ルール違反の扱い方を決定できます。`error` にするか、単なる `warning` にするか、それともルールを完全に `ignore` したいですか？本当にそうしたい場合は、新しい `tailwindCSS.validate` 設定を使用してリンティングを完全に無効にすることができます。
ワークフローに合わせてリンティングルールを設定する方法の詳細については、拡張機能の README をご覧ください。
結論
リンティングは、Tailwind CSS IntelliSense の `v0.4.0` で利用可能になりました！すでに拡張機能をインストールしている場合は、更新を取得するために Visual Studio Code をリロードする必要があるかもしれません。まだインストールしていない場合は、拡張機能マーケットプレイス からインストールできます。
これはこの機能の最初のイテレーションであり、皆様からのフィードバックをお待ちしております！新しいリンティングルールのアイデアはありますか？ぜひ教えてください！
この記事について話しませんか？ GitHub で議論する →