Tailwind CSS IntelliSense 的代码检查功能介绍
- 日期
Brad Cornes
今天，我们发布了 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！
包含快速修复
为了尽可能方便地修复任何问题，所有 lint 规则都有自己的“快速修复”，可以直接在 Visual Studio Code 中触发。如果您不小心输入了 `@screen small` 而不是 `@screen sm`，编辑器可以自动将 `small` 替换为 `sm`！
除了简单的文本替换之外，还有一些更有趣的快速修复，用于更复杂的 lint 规则。看看扩展如何自动重构无效的 `@apply` 指令
配置
我们认为您会喜欢新的 lint 功能，但如果您不喜欢，或者您只是想调整一些行为，我们已经为您准备好了。您可以决定如何处理每个规则违规：是 `error`，还是 `warning`，或者您是否要完全 `ignore` 该规则？如果您真的想这样做，您可以使用新的 `tailwindCSS.validate` 设置完全禁用 linting。
查看 扩展自述文件，了解有关配置 lint 规则以适应您的工作流程的更多详细信息。
结论
Linting 现已在 Tailwind CSS IntelliSense 的 `v0.4.0` 版本中提供！如果您已经拥有该扩展，您可能需要重新加载 Visual Studio Code 以获取更新，如果您没有，您可以通过 扩展市场 安装它。
这是此功能的第一个迭代，我们很乐意听到您的反馈！您是否有关于新 lint 规则的想法？请告诉我们！
想讨论这篇文章吗？在 GitHub 上讨论 →