Dismiss errors/warnings given a line or regex

Question

I have a templating language on top of html,js,css. I want to be able to disable errors if it comes from lines of code that match a given regex.

For example, given this templated HTML, vscode will throw some errors suggesting invalid css syntax:

    <!-- custom css -->
    <style id="custom-css">
    {{User.customCSS}}
    </style>

If what I'm asking (suppressing errors with regex) is impossible, what are my options to hide these errors?

There are extensions that come for these templating languages, but beyond syntax highlighting, they do not accomplish anything else.

I also cannot disable the entire errors/language features because that's extremely helpful.

The edit below was made by jD3V in response to a comment made by the OP's author

---

The Core Issue that I Want a Solution for:

---

VS Code Language Features are not working, however, this behavior is totally expected — after all VS Code tries to interpret the code — that you the author — write in a given document. VS Code wants to provide hints and warnings, but it is impossible for VS Code to do so when an arbitrary syntax has been injected into a well defined syntax, consequently; It's impossible for VS Code to provide language features for a syntax it doesn't know how to read — but I had hoped, to somehow, get a limited version of language features???

Answer 1

So, Tosi...

The rule below...

    // @file ".../.vscode/settings.json"
    {
        "css.validate": true
    }

...causes an error when ever a forign syntax is written into a CSS document.

This is not a Rule that is Defined by a Linter or Formatter

This rule is unique in the sense that it checks whether your CSS document is in compliance with the current CSS Specifications Snapshot (which currently is the 2021 snapshot).

The rule was likely inspired by encouraged into existence due to the W3 Consortium's implementation of the same tool, that can be used through the W3C website.

CORE W3 Validator (official)

I can't say for certain, but because the standard puts out an official validation tool (which I have never known another standard to do, but I am sure CSS isn't alone) its likely that the official tool some how defines the VS Code tool. Either way, the setting "css.validate": true/false is not going to use the CSS Languages grammar to decide if the CSS is valid, it will probably use another grammar the meets the requirements of the W3 Consortium.

I am going to continue to find out if there is anyway around having to deactivate the tool. It maybe that you need to define a custom file-type, or turn the rule of though.

It is important to note that the validator is a tool that checks, whether or not, a CSS document — any document w/ the extension .css — meets the guidelines set by the current "W3 CSS Specification (which AtToW, the 2021 Spec Snapshot is the current spec used)". That means that the tool cannot be configured, because it simply does, or does not, meet the spec's guidelines.

https://jigsaw.w3.org/css-validator/

Note from Author:

Okay so, I keep seeing this bounty, and I know the answer, but I am teaching myself the same general subject area that the answer below is part of, so I didn't want to answer it, but since no one else has, I know I can point you in the generally-correct direction.

I know that there are two ways of doing this. The first means is the harder way, but if you ever plan on using this language in a different editor than VS Code, it might be one to consider.

Create a 'TextMate Grammar', if you have access to MacOS, this is a much simpler endeavor, as 'TextMate' has the best support for writing the grammar-type that was invented for it, or atleast IMO. If you plan on using your {{}} brackets in CSS, you can write a CSS grammar, and just add support for your {{DoubleCurlySyntax}}.

The other option you have is, what I consider, the best option for embedded languages, and it was designed to be able to implement a custom syntax like yours far more easily. This is what I have been learning, and I have had to teach myself everything up to this point, because no one seems to know the answers to the questions I ask about it. Fortunately, much of what I have learned has been documented in a tutorial that is now part of the Official VS Code Documentation. You can find it HERE

This is a broad topic, and there is no quick snippet someone could show you for creating a syntax quickly. This question touches on some of the fundamentals that computer science is built on, such as the "Grammar".

Speak of grammars, if you want to go that route there is a new tool currently in beta, that has been made available to the public. It can, if anything else, be used as a way to understand and learn how to author, define & implement a "TextMate Syntax PList" and "TextMate List of Scopes", which, when combined, makes up a TextMate Grammar.

The Tool is here. And no I am not bamboozling you into getting hacked the don't have an SSL license for what ever dumb reason. The tool is legit though.

---

IRO Tool

---

EDIT: In response to @Tori's Comment (which I edited into @Tosi's question).

---

In response to Tosi's comment (I edited Tosi's comment into the question) I personally think anytime someone creates a Language for VS Code for the first time, they will have to jump the same hurdles you are, especially this one.

I probably already stated this at some point, but this is a broad subject, there are many different factors to consider when implementing your language.

Here are my thoughts about your comment

At some point your going to have to snippet generate CSS for your syntax to work.

What many frameworks & custom syntaxes like your own do, is they create a custom file extension, and write there language with in that type of file, then they use a parser, and regex to replace the syntax with CSS. The replacement of the values is what makes the language useful because it acts as a pre-processor and offers the ability to write dynamic CSS or HTML. A trait that usually only true programming languages have. Because the custom-syntax has to be parsed out, and a language that can be read by the Runtime Environment (which is the browser for your use-case), we can easily use another file ext. than .css to help VS Code out. Using a custom file ext would let vscode know, hey this is not standard css. Your grammar will tell VS Code that it is very close to CSS, with minor syntactic changes.

This is the same means that I think several templating engines (like Pug, Mustache or Handlebars) use.

I think at this point you might want to consider how you are going to generate the raw CSS from your custom CSS-syntax.

Using alternate file extensions is a very common solution for this problem. A good example is JSON w/ Comments or .jsonc.

This is a good place to make use of the editor.action.inspectTMScopes tool

---

Using the inspector tool, we can view what the tokens for a "JSON w/ Comments" file looks like (aka .jsonc).

I assume you have used the tool, if not you can access it via the command palette, by typing in the phrase "Developer: Inspect Editor Tokens and Scopes", and then select the command when you see it.

• The default keybinding for the tool is CTRL + ALT + SHIFT + i

Open a JSONC or *.jsonc Document

Many of the Configuration files end with .json but are configured using "files.associations: { ... }" to use the JSONC grammar. For example I used the inspector tool in my current projects "./.vscode/setting.json" file.

When you open the document, make sure there is valid JSON in it, then create a comment (which should be valid as we are working in JSONC). Then use the tool to inspect the comment.

The TextMate Token Inspector Tool should show you something that looks like the image &/or snippet below

.________________________________________________________________________.
| ·Hello·World 12 chars                                                  |
|________________________________________________________________________|
| language                  jsonc                                        |
| standard token type       Comment                                      |
| foreground                #99999999                                    |
| background                #11101E                                      |
| contrast ratio            3.10                                         |
| _______________________________________________________________________|
| textmate scopes         comment.line.double-slash.js                   |
|                         meta.structure.dictionary.value.json.comments  |
|                         meta.structure.dictionary.json.comments        |
|                         source.json.comments                           |
| foreground              comment.line                                   |
|                         { "foreground": "#99999999", "fontStyle": "" } |
|________________________________________________________________________|

---

This is a GREAT example, because it shows you how VS Code's support for JSON w/ Comments uses the JSON TextMate grammar, and the comments property is tacked on to it. The comments at the end of source.json.comments denotes that this is a JSON grammar with the JSONC syntax added to it.

Now it gets even cooler! Well, it gets cooler if your a nerd like me. :-)

The first property shown in the tool when viewing the comments is comment.line.double-slash.js. In-other-words, the tools output should be interpreted as...

The JSONC Grammar extends the Standard JSON Grammar, by adding support for the JS Comment property from the JS Grammar!!!!!!

To me, that is cool!

---

As a bonus, here is how I extend a language, and assign it to a custom file type:

As I mentioned, I teaching myself the same topic. My language is called L3, and is a templating engine for ANSI Escape Sequences and Control Codes. This is part of my extension-manifest (or package.json).

/** @file "package.json" (My Extension Manifest) */

  "contributes": {
    "languages": [
      {
        "id": "l3",
        "aliases": [
          "L3",
          "L3"
        ],
        "extensions": [
          ".l3",
          ".lll",
          ".l3Lang
        ]
      }
    ],
    "grammars": [
      {
        "language": "l3",
        "scopeName": "source.html.l3",
        "path": "./syntaxes/l3.tmLanguage"
      }
    ]
  },

The "extensions":[".l3"] property is defining my language to be used in ".l3" documents as the language, and grammar for that document

The way that JSONC accomplishes injecting syntax into another grammar to define its-self is through the the "injectTo" property that getts added to the grammar contribution in the package.json extention manifest.

@SEE THE GUIDE HERE to read more about injecting grammars into grammars.

---

NOTE: I am writing a couple snippets to compliment the guide at the link above. They will be included shortly.

---