今天，我们发布了 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 上讨论 →