How to add a new match/mapping for an existing language? - visual-studio-code

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.

Related

VSCode Code Spell Checker extension - include .todo files

I'm using vscode extension for spell checking:
https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
The problem is - I can't include ".todo" files type. (my .todo files are not in any markup language. They are just "plain text").
I tried(none works for me):
"cSpell.files": ["**/**.todo"] (also turns off all existing files check)
"cSpell.enableFiletypes": [ "*" ] to inclue all fiels types
I notice there is a languages list, but didn't find way to add new one.
Try adding the following cSpell override to your .vscode/cSpell.json file:
{
"name": "lorem ipsum",
"enabledLanguageIds": ["plaintext"], // etc.
"overrides": [
{
"filename": "**/*.todo",
"languageId": "plaintext"
}
]
}
I found out, that by default spell check extension ignore all files from .gitignore.
In my case solution was to add following Modifications in my vscode user settings:
"cSpell.enableFiletypes": [
"todo" // enable .todo files checking
],
"cSpell.useGitignore": false, // disable ignoring files from .gitignore
Thanks to everyone who tried to help me!

How can I get Web API autocomplete/IntelliSense in VSCode?

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"
]
}

VS Code extension: setting custom semantic token colors

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.

VSCode: Add token colour customisations to a syntax highlighter extension

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.

VSCode Code Spell Checker extension - Include TXT files

I'm using the VSCode Code Spell Checker, and I wish to detect typos in TXT files. But the issue is, that I want to detect it on TXT files that are being ignored for search by the VSCode.
Here is my settings.js file:
{
"cSpell.words": [
"BING",
"DOGPILE"
],
"search.exclude": {
"**/.vscode": true,
"**/dist": true,
"**/misc": true,
"**/misc/documents": true,
"**/misc/": true,
"/misc/": true,
"misc/**": true,
"**/misc/**": true,
"**/misc/documents/**": true,
"**/node_modules": true,
"**/sources": true
},
"eslint.validate": [
"javascript"
],
"http.proxy": "",
"http.proxyAuthorization": null,
"http.proxyStrictSSL": false,
"editor.renderWhitespace": "none"
}
The file that I want to detect typo located inside the misc directory, that is declared in the "search.exclude" list (I don't want search results from any files in this directory), but I DO WANT to detect typos on theses files.
If I remove all of theses and the settings.js looks like that:
{
"cSpell.words": [
"BING",
"DOGPILE"
],
"search.exclude": { },
"eslint.validate": [
"javascript"
],
"http.proxy": "",
"http.proxyAuthorization": null,
"http.proxyStrictSSL": false,
"editor.renderWhitespace": "none"
}
The TXT file typo detection works, but I get the search results that include files inside the misc directory, which is NOT what I want.
Has anyone faced this issue before and know how to solve it?
Thanks.
as it is explicitly stated in Spell Checker FAQ
What files are excluded by the spell checker?
By default the spell checker excludes the same files excluded by the VS Code search.exclude setting. See discussion: #16, #55 and #95
the correct way to address the problem exposed in the question I would say is to open an issue to the project for a new feature request to allow to override this default behavoir.
as a last resort if you absolutely need to prevent search.exclude from being added to the exclusions you could try to force the code installed on your machine and after restarting vscode you will have the spell check working also in those paths.
DISCLAIMER please note what is illustrated below is a discouraged hack mentioned in here for informational purposes only, obviously if you try this kind of workaround you must be extremely aware of what you are doing
for example:
assuming the extension was installed in ~/.vscode/extensions/streetsidesoftware.code-spell-checker-1.10.2
in the source server/config/documentSettings.js there is the function async fetchSettingsFromVSCode(uri) where it is added :
ignorePaths: ignorePaths.concat(CSpell.ExclusionHelper.extractGlobsFromExcludeFilesGlobMap(exclude)),
by changing in to
ignorePaths: ignorePaths
then quit fron vscode and when re-open it the extension no longer excludes the same files excluded by the VS Code search.exclude setting.