今天，我们发布了新版本的 Tailwind CSS IntelliSense Visual Studio Code 扩展，该扩展为您的 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` 设置完全禁用代码检查。
查看扩展程序的 readme 文件，了解有关配置代码检查规则以适应您的工作流程的更多详细信息。
结论
代码检查功能现已在 Tailwind CSS IntelliSense 的 `v0.4.0` 版本中推出！如果您已经安装了该扩展程序，您可能需要重新加载 Visual Studio Code 才能获取更新，如果您没有安装，则可以通过扩展程序市场安装。
这是此功能的第一个迭代版本，我们很乐意听到您的反馈！您有关于新代码检查规则的想法吗？请告诉我们！
想讨论这篇文章吗？ 在 GitHub 上讨论 →