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???
The rule below...
// #file ".../.vscode/settings.json"
{
"css.validate": true
}
...causes an error when ever a foreign 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 at least 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
Update
In response to #Tori's Comment.
In response to Tosi's comment 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 you're 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 SS. 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.
I am trying to learn how to implement some of the helper providers: autocomplete, signature help and hover.
I am doing it for a framework that, as far as I know, it cannot be executed outside its main application, so one way I thought to go about this (get the objects types, methods and docs) is by parsing its documentation.
For example the Hover provider; once the cursor is hovering the word, I can search for it in the documentation and display the result:
class HSHoverProvider implements vscode.HoverProvider {
public provideSignatureHelp(
document: vscode.TextDocument,
position: vscode.Position,
token: vscode.CancellationToken
): vscode.SignatureHelp {
// get current word/line under the cursor and find a match inside the docs
...
return new vscode.Hover(data);
}
}
...
context.subscriptions.push(
vscode.languages.registerHoverProvider("lua", new HSHoverProvider())
);
This works fine when the action is directly on the initial declaration. I can parse directly the line and find what I need with a regex.
-- hovering over `application`, I check the context with a regex.
local app = hs.application('Code')
However, I am having a hard time when it comes to a "reference". Searching the document for the declaration of app with a regex approach leads to many edge cases, mainly because of the declaration scope:
Example:
-- declaration target
local app = hs.application('Code')
local function foo()
local app = hs.pasteboard()
end
local function bar()
if 'foo' then
local app = hs.alert()
end
do local app = hs.window.focusedWindow() end
-- a regex will have a hard time to understand which declaration is correct
print(app:title())
end
This lead me thinking that a regex is not the appropriate solution. I also thought that implementing vscode.DefinitionProvider will give me some insight but it did not.
I've tried to look at other extensions that do already the same thing (mainly Lua Language Server by sumneko), but I am not able to understand how they went for it (besides they are using the language server approach).
How would I go for something like this? Do I need an AST tree and inspect from there? Would using the language server be a better choice? Am I missing a bigger picture or I just need a more robust document parser?
Any insight is appreciated. Thanks in advance
The usual approach in such cases is to create a symbol table. You start by parsing the code for which you want to provide the tooling. From the parse tree (or syntax tree, depending on the parser tool used) you generate your symbol table, which holds the informations you need, including the nesting of blocks and symbols, the type of symbols (e.g. object name or object reference) and the scope for which a symbol is valid.
I am looking to have some snippets listed conditionally in the VS Code IntelliSense for a particular language. I am considering creating an extension, intercepting the list of CompletionItems, and removing any snippets that do not satisfy my conditions based on languageId and settings/configuration I will contribute with the extension. I am looking for the simplest solution to accomplish this, but if I need a Language Server then so be it. If I can dynamically load a snippets file for a particular languageId then that would be even better. I just need a starting point from someone more familiar with the API. I haven't even found how to retrieve CompletionList to start the intercept -- I searched the API doc but found nothing but its object definition.
As of VSCode 1.14, you cannot have conditional user snippets but an extension can contribute snippets conditionally. Try looking into creating a CompletionItemProvider that returns completion items with their kind set to CompletionItemKind.Snippet.
The JsDocCompletionProvider in the VSCode codebase is one example of this pattern. It only returns jsdoc snippets when the area around the cursor matches a regular expression
I was wondering if it is possible to expand Visual Studio Intellisense for displaying custom statement completition in .cs files. I.e. I have found some examples of using xsd schemas to expand intellisense but they are for custom xml files if I'm not mistaken. What I would like to do is add some additional "options" to intellisense by adding just a string that will appear. Something like "MyCustomIntellisenseOption" and when I start writing I will get it in intellisense. I have found a similar solution here, but although it works exactly like I want it with a slight modification where I changed:
[Export(typeof(IVsTextViewCreationListener))]
[Name("token completion handler")]
[ContentType("plaintext")]
[TextViewRole(PredefinedTextViewRoles.Editable)]
internal class TestCompletionHandlerProvider : IVsTextViewCreationListener
to:
[Export(typeof(IVsTextViewCreationListener))]
[Name("token completion handler")]
[ContentType("CSharp")]
[TextViewRole(PredefinedTextViewRoles.Editable)]
internal class TestCompletionHandlerProvider : IVsTextViewCreationListener
But that gives me another problem.
If I have two strings "AddSomething.SomethingElse.Something1" and "AddSomething.SomethingElse.Something2" whenever I try to type the second string I come to the .(dot) and autocomplete kicks in and selects first option. Is it possible to override the dot? I figured that it has something to do with Token triggers but it seems I'm not able to find a solution for this.
The main idea is that those custom strings work like intellisense for classes but with predefined fixed strings.
Is there any other possible solution for adding custom intellisense and autocomplete option? Or a solution for my .(dot) problem?
Thank you in advance.
I am used to using (ctrl+click) on Eclipse and following variables/objects to look at the definition in order to understand the code.
I just started my first job and I only have access to unix (vi or gvim). Is it possible to do what I'm looking for?
edit: What I mean by is it possible? Lets say class foo is defined in file foo.hpp and is instantiated in foo.cpp. I want to be able to reach the definition of class foo from any instantiation of it in foo.cpp
With Vim you can use tags files generated by exuberant-ctags and other compatible programs.
"Tags" are function and variables, their name, signature and kind are stored alongside their location in files that Vim is able to parse to allow you to navigate through your code.
:help tags will tell you all you need to know.