今天我们发布了 Tailwind CSS IntelliSense 扩展 for Visual Studio Code 的新版本，该版本在你的 CSS 和标记中都添加了 Tailwind 专用的代码检查功能。
🌐 Today we’re releasing a new version of the Tailwind CSS IntelliSense extension for Visual Studio Code that adds Tailwind-specific linting to both your CSS and your markup.
检测 CSS 中的错误(Detecting errors in your CSS)
Tailwind 已经可以检测 CSS 错误，例如当你在 @screen 指令中拼写错误时。Tailwind CSS IntelliSense 的代码检查功能会显示这些错误，并在上下文中直接在编辑器中呈现。代码检查器会验证你的 @tailwind、@screen、@variants 和 @apply 指令，以及任何 theme 函数调用：
🌐 Tailwind already detects CSS errors, for example when you mistype a screen name in the @screen directive. The linting feature for Tailwind CSS IntelliSense surfaces these errors and displays them in context, directly inside your editor. The linter will validate your @tailwind, @screen, @variants and @apply directives, as well as any theme function calls:
捕获 HTML 中的冲突(Catching conflicts in your HTML)
还有一个 lint 规则会分析你的模板文件中的类列表，并高亮任何看起来相互冲突的工具类实例。例如，你可能不打算在同一个类列表中同时使用 mt-4 和 mt-6！
🌐 There is one more lint rule which analyses class lists in your template files and highlights any instances where utilities seem to be in conflict. For example you probably didn’t intend to have mt-4 and mt-6 in the same class list!
包含快速修复(Quick fixes included)
为了尽可能方便地修复任何问题，所有的 lint 规则都有自己专属的“快速修复”，可以直接在 Visual Studio Code 中触发。如果你不小心输入了 @screen small 而不是 @screen sm，编辑器可以自动为你将 small 替换为 sm！
🌐 To make it as easy as possible to fix any issues, all of the lint rules have their own "quick fixes" which can be triggered directly within Visual Studio Code. If you accidentally typed @screen small instead of @screen sm, the editor can automatically replace small with sm for you!
除了简单的文本替换之外，对于更复杂的 lint 规则还有一些更有趣的快速修复方法。看看这个扩展是如何自动重构无效的 @apply 指令的：
🌐 As well as simple text replacements there’s also some more interesting quick fixes for the more complex lint rules. Take a look at how the extension can automatically refactor an invalid @apply directive:
配置(Configuration)
我们认为你会喜欢新的代码检查功能，但如果你不喜欢，或者只是想调整一些行为，我们也为你提供了选择。你可以决定每条规则违规如何处理：它是一个 error，还是只是一个 warning，或者你想完全 ignore 该规则？如果你真的希望，你可以使用新的 tailwindCSS.validate 设置完全禁用代码检查。
🌐 We think you’ll love the new lint feature, but if you don’t, or you just want to tweak some behavior, we’ve got you covered. You can decide how each rule violation is treated: is it an error, or just a warning, or do you want to ignore the rule altogether? If you really want to you can disable linting entirely using the new tailwindCSS.validate setting.
查看 扩展说明文档 以获取有关如何配置 lint 规则以适应你的工作流程的更多详细信息。
🌐 Check out the extension readme for more details about configuring the lint rules to suit your workflow.
结论(Conclusion)
现在 Tailwind CSS IntelliSense 的 v0.4.0 中已经可以进行代码检查了！如果你已经安装了该扩展，可能需要重启 Visual Studio Code 才能获得更新；如果还没有安装，可以通过扩展市场进行安装。
🌐 Linting is available now in v0.4.0 of Tailwind CSS IntelliSense! If you already have the extension you may need to reload Visual Studio Code to get the update, and if you don’t you can install it via the extension marketplace.
这是此功能的第一个版本，我们非常希望听到你的反馈！你有新的 lint 规则的想法吗？告诉我们吧！
🌐 This is the very first iteration of this feature, and we’d love to hear your feedback! Do you have an idea for a new lint rule? Let us know!
想讨论这篇文章吗？ 在 GitHub 上讨论 →