今天我們發布了 Visual Studio Code 的 Tailwind CSS IntelliSense 擴充套件的新版本，該版本為您的 CSS 和標記新增了特定於 Tailwind 的程式碼檢查功能。
偵測 CSS 中的錯誤
Tailwind 已經可以偵測 CSS 錯誤，例如當您在 @screen 指令中輸入錯誤的螢幕名稱時。Tailwind CSS IntelliSense 的程式碼檢查功能會顯示這些錯誤，並直接在您的編輯器中顯示。程式碼檢查器將驗證您的 @tailwind、@screen、@variants 和 @apply 指令，以及任何 theme 函式呼叫。
捕捉 HTML 中的衝突
還有一個程式碼檢查規則會分析範本檔案中的類別清單，並突出顯示任何公用程式似乎衝突的實例。例如，您可能不希望在同一個類別清單中同時出現 mt-4 和 mt-6！
包含快速修正
為了讓修復任何問題盡可能容易，所有程式碼檢查規則都有其自己的「快速修正」，可以直接在 Visual Studio Code 中觸發。如果您不小心輸入了 @screen small 而不是 @screen sm，編輯器可以自動將 small 替換為 sm！
除了簡單的文字替換外，對於更複雜的程式碼檢查規則，還有一些更有趣的快速修正。看看這個擴充套件如何自動重構無效的 @apply 指令
設定
我們認為您會喜歡這個新的程式碼檢查功能，但如果您不喜歡，或者只想調整一些行為，我們也為您準備好了。您可以決定如何處理每個規則違規：是 error 還是僅僅是 warning，還是您想完全 ignore 該規則？如果您真的想這樣做，可以使用新的 tailwindCSS.validate 設定完全停用程式碼檢查。
請查看擴充套件的說明文件，了解有關設定程式碼檢查規則以符合您的工作流程的更多詳細資訊。
結論
程式碼檢查功能現在已在 Tailwind CSS IntelliSense 的 v0.4.0 版本中提供！如果您已經安裝了該擴充套件，您可能需要重新載入 Visual Studio Code 才能取得更新，如果沒有，您可以透過擴充套件市集安裝它。
這是此功能的第一次迭代，我們很樂意收到您的回饋！您有任何關於新的程式碼檢查規則的想法嗎？請告訴我們！
想討論這篇文章嗎？ 在 GitHub 上討論 →