VS Code HTML / CSS Linter validator customization

Question

is there an easy way how to customize behavior of VSCode HTML / CSS linter validation rules?

I would like to have possibility to put data placeholders to the code to styles, attributes, text nodes such as:

<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>

It does not need to be {{...}} placeholder, it can be whatever else, such as ${}, but I would like to VSCode not report this as errors while there is still possibility to have intellisense and validation enabled.

Answer 1

What if you install a Twig plugin for VS Code. ( Here's first one I found ). Then tell VS Code to associate .html files with Twig under the file.associations setting. {{firstName}} is valid twig code so VS Code will think it's ok.

Answer 2

Yes, you can customize the behavior of the VSCode HTML/CSS linter by configuring its settings. You can do this by going to the settings editor (File > Preferences > Settings or by using the keyboard shortcut Ctrl +,) and searching for "html" or "css" in the search bar. You should see a list of settings related to the linter, such as "html.validate.scripts" and "css.validate" . You can then change the values of these settings to customize the linter's behavior.

Regarding your specific requirement, you can use template literals and string interpolation to achieve this. You can also use templating frameworks like mustache, handlebars, etc for this.

Please note that this is not a feature of the linter, but a way of writing your code.

Answer 3

You can use Twigcs Linter ( https://marketplace.visualstudio.com/items?itemName=cerzat43.twigcs ) for Visual Studio Code.