I've been trying to create a test extension for a custom code highlighting.
The extension works perfectly fine but I am wondering how can I attach the token colour definitions, sort of like a default if people don't add it to the settings.json.
At first I thought I could do it in package.json in the contributes section but I can't get it to work.
Here's an example of what I'm trying to "attach" to my extension:
{"scope": ["source.qqql.scope"], "settings": {"foreground": "#aaaaaa"}},
{"scope": ["source.qqql.scope.type"], "settings": {"foreground": "#6997bf"}},
{"scope": ["source.qqql.scope.name"], "settings": {"foreground": "#555555"}},
I also tried adding it to
"configurationDefaults": {
"[qqql]": {
"editor.tokenColorCustomizations": [
"textMateRules": [<here>]
]
}
}
in the package.json but upon testing with F5 it didn't colorise the tokens.
I followed this topic: VS Code - Text formatting in a new language extension but I fear I'm missing a step or a crucial part of understanding how to do it. Any help would be appreciate it.
Related
I'm using VSCode for web development and I noticed that there is no JavaScript autocomplete/IntelliSense for browser-related types such as Element nor functions such as document.querySelector(). Is there an extension for this that anyone has found?
// tsconfig.json
{
"compileOnSave": true,
"compilerOptions": {
"alwaysStrict": true,
"checkJs": true,
"outDir": "./root/js",
"rootDir": "./src",
"target": "ESNext"
},
"exclude": ["./root/**/*"],
"include": ["./src/**/*"]
}
I was starting to type out document.querySelector() and noticed halfway through that autocomplete wasn't triggering. I triggered it manually (Ctrl-I) and got no suggestions.
For clarification, I'm looking for something that will do this, but with frontend code:
Tried searching for extensions in marketplace, on Google, in VSCode itself - to no avail.
The issue is that the lib field (tsconfig.json or jsconfig.json) hasn't been set to include "dom", which tells the TypeScript compiler (and VS Code's TypeScript support) to include types for web APIs like the DOM.
Fun fact: If you leave the lib field empty, TypeScript will assume certain things to be in it "by default". For more info on that, see this answer I wrote to "How can I make vscode assume a node.js context, so that it doesn't assume fetch exists?"
Turns out #user was right — I needed to add this to my tsconfig.json:
{
"lib": [
"DOM"
]
}
Thanks to an extension (Caddyfile Syntax, Caddyfile Support) I have highlighting for Caddyfile. Installing the extensions also mapped Caddyfile files with the relevant syntax highlighting rules.
I now would like to also have the same mapping for caddy.conf files.
According to the documentation, I should add an alias for caddy.conf so that it is handled the same way as Caddyfile.
The problem is that I do not know where to add this information in settings.json.
I had a look for anything "caddy" in defaultSettings.json but I do not see any structure that would match th eone in the documentation. Namely, I only see
// Configure settings to be overridden for the caddyfile language.
"[caddyfile]": {
"editor.insertSpaces": false,
"editor.formatOnSave": true
},
What I am looking for should more look like (according to the documentation above)
"languages": [{
"id": "java",
"extensions": [ ".java", ".jav" ],
"aliases": [ "Java", "java" ]
}]
So in practical terms - where in setting.json should I add the alias (or possibly a new mapping)?
Try adding this to your settings.json:
"files.associations": {
"*.conf": "caddyfile"
}
Alternatively, you can invoke the workbench.action.editor.changeLanguageMode command (Ctrl+K M by default, also works by clicking the language label in the status bar) and select the language you want. This is probably preferable if you might have files with the same extension, but different syntax.
Is it possible to modify the styling of semantic token modifiers received from LSP
inside an extension without the need to create custom themes?
I am able to use editor.semanticTokenColorCustomizations in my settings.json file and add the custom rules I want, but this setting is not available for configurationDefaults in the package.json file for a VS Code extension.
So the following snippet does work in settings.json, while the same does not work in package.json for an extension under the configurationDefaults field.
"editor.semanticTokenColorCustomizations": {
"enabled": true,
"rules": {
"*.declaration": {
"bold": true
},
"*.definition": {
"italic": true
},
"*.readonly": "#ff0000"
}
}
Is there another way?
Ideally, I would like to change both token types and token modifiers
for the language I introduce with the extension, but I don't want to create custom themes a user would need to use to get proper highlighting.
Note: I am forced to stick with the token types and modifiers supported by the language-client provided by Microsoft. Those are defined in the LSP specification.
Edit: I use LSP with semantic tokens to get the token types and modifiers of a file. This should be similar to using TextMate grammar.
The problem I have, is applying correct styling/highlighting to those tokens. Since the language client limits the usable tokens, I apply a mapping between tokens of my language and the default LSP ones.
Meaning: token modifier declaration is in fact bold in my markup language
You can introduce all your custom semantic tokens without the need to restrict yourself to the built-in ones. Personally I prefer the way proposed in the official sample file:
semantic-tokens-sample.
As for the styling, you can easily modify an extension incl. semantic token colors via the package.json file as follows.
{
...
"editor.semanticHighlighting.enabled": true, // not necessary, just make sure it is not disabled
"contributes": {
"semanticTokenTypes": [ // not necessary if you use own parsing with "DocumentSemanticTokensProvider"
{
"id": "myToken",
"superType": "myToken",
"description": "myToken"
}
],
"configurationDefaults": {
"editor.semanticTokenColorCustomizations": {
"rules": {
"comment": "#969896",
"string": "#B5BD68",
"myToken": "#323232" // custom
}
}
}
}
}
For that I personally introduced myToken in the legend in an extension.ts file.
To check if your semantic token logic is working, you can use the
[view/Command Palette/>Developer: Inspect Editor Tokens ans Scopes] functionality that will reveal what semantic scope is attached to your keyword, if any.
If the provided code is not working for you, check your package.json and make sure the language settings are all correct:
settings that could be of relevance for you:
{
...
"activationEvents": ["onLanguage:myLanguage"], // make sure your extension is activated
"contributes": {"languages": [{"id": "myLanguage", "extensions": [".myLang"], "configuration": "./language-configuration.json"}]}
}
Furthermore check if your User / Workspace settings are interfering with your package.json settings.
I wanted to know if it is possible to trigger a user defined custom snippet when I create a file in vscode.
I started learning Golang recently and noticed that there is some boilerplate code that goes into creating the main.go file.
So I created my custom snippet for it and now now I can trigger the snippet manually and save me some keystrokes of typing.
I wanted to go one step further, so that whenever I create a new file named main.go from within VsCode, it should automatically fire that snippet and insert the biolerplate code for me, without me having to manually trigger the snippet.
Is this even possible ?
Check out this extension: Auto Snippet:
With this in your settings.json:
"autoSnippet.snippets": [
{ "pattern": "**/main.go", "snippet": "main-go-template" },
],
[Note that the example settings in the extension docs has a few syntax errors - use my example above - I have filed an issue with the creator.]
And then your snippet
"main-go-template": {
"prefix": "zz",
"body": [
... // you can use tabstops and transforms just like regular snippets
]
"description": "javascript template"
}
Then creating a new main.go file or opening an empty one should trigger the snippet.
It is a good idea to reload vscode whenever you make a change to this extension's settings.
Here is a demo of a gulpfile with common boilerplate:
Also see this extension https://marketplace.visualstudio.com/items?itemName=bam.vscode-file-templates
We have some custom snippets we provide as part of our VS Code extension via key bindings and a snippets json file:
{
"key": "ctrl+shift+i",
"mac": "cmd+shift+i",
"command": "editor.action.insertSnippet"
},
...
"snippets": [
{
"language": "xml",
"path": "./snippets/xml.json"
}
]
We would like a button to add one particular snippet to the editor at the current cursor position.
How do I programmatically I invoke the part of "editor.action.insertSnippet" after the user has selected the snippet?
I posted this issue on the vscode repo.
jrieken responded with the following reply:
The insertSnippet-command accepts an argument which is either the name of a snippet or a snippet itself. So, either { snippet: "console.log($1)$0"} for an inline snippet or { langId: "csharp", name: "myFavSnippet" } referencing an existing snippet.
You can run any registered command via vscode.commands.executeCommand. See also the vscode namespace API.