As you might know some browsers already support CSS Cascade Layers (https://caniuse.com/?search=%40layer). The main keyword of this feature is #layer. Unfortunately VSCode displays a warning message:
Unknown at rule #layer css(unknownAtRules)
Is there any list of css keywords to include #layer keyword in my VSCode settings?
I tried to use the "css.customData" option. But I didn't manage to get any results. I created a css-data.json file in the same folder as the settings.json file.
What the correct path to the file should look like? I would like to have a relative path but I tried an absolute path as well. Nothing happened. I'm using portable VSCode if it is matter. Here are my attempts:
"css.customData": ["c:\\app\\VSCode\\data\\user-data\\User\\css-data.json"],
"css.customData": ["css-data.json"],
"css.customData": [".\\data\\user-data\\User\\css-data.json"],
"css.customData": ["./data/user-data/User/css-data.json"],
Here is a content of css-data.json:
{
"version": 1.0,
"properties": [],
"atDirectives": [
{
"name": "#layer",
"description": "Declares a cascade layer."
}
],
"pseudoClasses": [],
"pseudoElements": []
}
You probably just need to use
"css.customData": [".vs-code/css-data.json"]
but in case that doesn't work; I fixed this for myself in the following way:
in: .vscode/settings.json
"css.customData": [".vscode/css_custom_data.json"]
and then the .vscode/css_custom_data.json file itself:
{
"atDirectives": [
{
"name": "#layer",
"description": "The #layer CSS at-rule is used to declare a cascade layer and can also used to define the order of precedence in case of multiple cascade layers.",
"references": [
{
"name": "#layer",
"url": "https://developer.mozilla.org/en-US/docs/Web/CSS/#layer"
}
]
}
]
}
This however fails to fully permit the use of the #layer spec as #import rules still can't include a layer() as an example:
#layer reset, pallet, base, layout, local;
#import "style/reset.css" layer(reset); /* unifies / css reset */
#import "style/pallet.css" layer(pallet); /* color pallets */
#import "style/main.css" layer(base); /* primary css*/
now throws 3 errors and 0 warnings whereas without this fix it also throws a warning.
#layer and #property will be supported in vscode v1.72 - due out early October, 2022.
See 1.72 Release Notes:
The CSS language support now also understands the #property and
#layer at-rules.
My guess is that this is just a rule that hasn't been updated in the VSCode internal CSS linters.
Hunting for this warning I came across this stylelint issue #6084 ([at-rule-no-unknown] incorrectly flags #layer). They fixed this through a PR in May 2022.
I was assuming that stylelint is the underlying CSS linter for VS Code but appears it isn't. You can install the stylelint vscode extension (and disable the internal VSCode CSS linters) and this #layer error goes away.
Related
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!
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'm creating a color theme and I found out that the only way to target function parameters with italic is by using semantic highlight. The problem is that since semantic highlight overrides some settings, I lost the ability to target support.function.console - the "log" of console.log, for instance.
.log is a member.defaultLibrary, but if I target that by semantic, some other things would also be styled with the same color. That wouldn't be bad if member.defaultLibrary wasn't so inconsistent, some things you would expect to be styled, is not, which leads to inconsistency, which is certainly not desirable.
querySelector() is styled by member.defaultLibrary but not querySelectorAll(), for instance. I also tried to not use anything that can be overridden by semantics but then, it creates too many exceptions and some functions and methods would be let without any style, which is much worse.
I've tried Semantic Token Classification and tried to add a custom semantic token to the package.json file of the extension but I don't know how to "wire" that up:
{
"contributes": {
"semanticTokenTypes": [
{
"id": "consoleSupport",
"description": "console support"
}
],
"semanticTokenScopes": [
{
"scopes": {
"consoleSupport": ["support.function.console"]
}
}
]
}
}
When using development host, it does recognize the "new" consoleSupport when I try to add to "semanticTokenColors", it suggests the auto-complete, so I'm probably half-way there but I don't know how to actually create the new token and how to make it work.
Hey I recently started using vs code and am having a really weird issue. where my code won't auto complete. I have installed the c/c++ extension and have the "c_cpp_properties.json" file containning the following
{
"configurations": [
{
"name": "Mac",
"includePath": ["/usr/include"]
},
{
"name": "Linux",
"includePath": ["/usr/include"]
},
{
"name": "Win32",
"includePath": ["c:/Program Files (x86)/Microsoft Visual Studio 14.0/VC/include"]
}
]
}
Before you ask I have copied proper include path to "/usr/include" I just did a really simple test I wrote 1 line
"VkInstance instance;"
It compiled and ran fine but whenever I start to type VkInstance It never comes up as auto complete. Moreover weirdly some stuff auto completes fine and other stuff doesn't for example "vkCreateInstance" shows up as i'm typing it. Perhaps I'm missing something or doing something wrong would like some feedback
Thanks!
#include <vulkan/vulkan.h>
int main()
{
VkInstance instance;
return 0;
}
This seems to be a limitation (or bug?) of VSCode's code completion feature. The Vulkan header wraps the typdefs for all handles (like VkInstance, VkFence, etc.) in a Macro and it looks like VSCode can't handle this.
E.g. this:
VK_DEFINE_HANDLE(VkInstance)
Won't autocomplete, but if you replace the macro by hand to get this:
typedef struct VkInstance_T* VkInstance;
Auto-Completion works.
If this is a bug (just had a quick look at this), it may be worth reporting over at https://github.com/Microsoft/vscode-cpptools/issues