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。