为 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 函数调用:

展示 CSS 代码检查功能

发现 HTML 中的冲突

还有一个代码检查规则会分析您模板文件中的类列表,并突出显示实用工具类之间可能存在冲突的地方。例如,您可能不是有意在同一个类列表中同时使用 mt-4mt-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 上讨论 →

Get all of our updates directly to your inbox.
Sign up for our newsletter.