VS Code HTML / CSS Linter 验证器定制

Question

有没有一种简单的方法来自定义 VSCode HTML / CSS linter 验证规则的行为？

我希望有可能将数据占位符放入 styles 的代码、属性、文本节点，例如：

<style type="text/css">

   .testa {
      color: white;
      background-color: navy;
      transition: color 1s, background-color 1s;
   }

</style>

<template>

   <div class="testa" onclick="{{testClick}}" style="background-color: {{backgroundColor}}; color: {{color}}" >
      {{firstName}} {{lastName}} {{firstName} {{lastName}}
   </div>

   <div style="{{style}}">
      {{firstName}} {{lastName}}
   </div>

</template>

它不需要是 {{...}} 占位符，它可以是任何其他内容，例如 ${}，但我希望 VSCode 不将此报告为错误，同时仍有可能启用智能感知和验证。

Answer 1

如果你为 VS Code 安装一个 Twig 插件会怎么样。 （ 这是我找到的第一个）。 然后告诉 VS Code在file.associations设置下将.html文件与 Twig 相关联。 {{firstName}}是有效的 twig 代码，因此 VS Code 会认为它没问题。

Answer 2

是的，您可以通过配置其设置来自定义 VSCode HTML/CSS linter 的行为。 您可以通过转到设置编辑器（文件 > 首选项 > 设置或使用键盘快捷键 Ctrl +,）并在搜索栏中搜索"html"或"css"来执行此操作。 您应该会看到与 linter 相关的设置列表，例如"html.validate.scripts"和"css.validate" 。 然后，您可以更改这些设置的值以自定义 linter 的行为。

根据您的具体要求，您可以使用模板文字和字符串插值来实现。 您还可以为此使用模板框架，如 mustache、handlebars 等。

请注意，这不是 linter 的功能，而是一种编写代码的方式。

Answer 3

您可以将Twigcs Linter ( https://marketplace.visualstudio.com/items?itemName=cerzat43.twigcs ) 用于 Visual Studio Code。