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"
]
}
Related
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'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.
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.
I would like to add symbol support for PowerShell to VS Code but I'm not finding any docs on the code.visualstudio.com/docs site.
Also, is it possible to do this for a language like PowerShell that, for the moment, will only work on Windows? Is there a way to light up symbol support on Windows only?
BTW I've added a bunch of PowerShell snippets that I'm in the process of trying to get integrated into VS Code. Any help on how to get these snippets into the product would be appreciated as well? I did submit an issue on the snippets, suggesting that the team put these into VS Code.
There is currently no documentation for the plugin API. It's too early for this as the API is still changing with every minor release. The VSCode team is focused on providing a stable plugin API. There will be a documentation about it when it's done.
Nevertheless it is already possible to add a new language plugin or extending an exisiting one. Take a look on this short description on how to add declaration support for a new language: Create Custom Language in Visual Studio Code
You could add symbol support in a similar way. What you need is something like an abstract syntax tree builder for powershell scripts and an application or a javascript module that is able to process a JSON request in order to provide the correct symbols. An example request for outline support is this:
{
"seq":442,
"type":"request",
"command":"navbar",
"arguments":
{
"file":"c:/Users/C/Documents/projects/MyProject/MyFile.xxx"
}
}
A response could look like that:
{
"seq":442,
"type":"response",
"command":"navbar",
"request_seq":442,
"success":true,
"body":[
{
"text":"TObjA",
"kind":"class",
"kindModifiers":"",
"spans":[
{
"start":{
"line":10,
"offset":3
},
"end":{
"line":16,
"offset":4
}
}
],
"childItems":[
]
},
{
"text":"DoSomething",
"kind":"method",
"kindModifiers":"",
"spans":[
{
"start":{
"line":20,
"offset":1
},
"end":{
"line":27,
"offset":4
}
}
],
"childItems":[
]
},
]
}
I'm not sure what do you mean with "symbol support". Is it something like "jump to symbol inside the current file" using CTRL+Shift+O? Then you are looking for outlineSupport.
Is it something like "find a symbol in any file" using CTRL+P, #? Then you are looking for navigateTypesSupport.
Copy the needed .js file from the vs.langauage.csharp.o folder to the vs.langauage.powershell folder and register the support in powershellMain.js as it is done in omnisharpMain.js.
If you want to register the new support only on Windows then you can do it like this:
var isWin = /^win/.test(process.platform);
if(isWin)
monaco.Modes.NavigateTypesSupport.register('powershell', new navigateTypesSupport_1.default(ModelService, server));
I hope this helps for the moment. Don't forget to save your changed plugins in a different folder. VSCode often deletes changes in the plugin folders on update.