How to bold and italic object keys in VS Code? - visual-studio-code

Is it possible to make the KEYS of our object italic or bold in VSCODE?
for example, myObj is an object. Can I change my theme of VSCODE to always show the keys like name , operator and values as italics or bold ? Right now I'm using ONE DARK ITALIC theme.
var myObj = {
name: 'internalid',
operator: search.Operator.NONEOF,
values: empName
};

Assuming this is in a javascript file, try this:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "meta.object-literal.key.js",
"settings": {
// "foreground": "#FF0000",
"fontStyle": "bold"
}
}
]
}
You can get that scope value by triggering the Developer: Inspect Editor Tokens and Scopes in the command palette. And then click on code of which you want to know the scope. In this case, clicking on a key of an object in a js file yields the scope mete.object-literal.key.js. If you aren't in a js file you'll get a different scope to plug into the textmate rule.
You can also use a fontStyle italic.

Related

VS Code custom color theme identifies, but does not render selected token color

I am using TextMate rules to try and write a custom VSC Rust color theme that's not quite as busy as the default one, following this explanation in the docs.
For a token without semantic information, the VSC scope inspector correctly reports the color I selected (#FF0000 in the screenshot), but does not render it. Am I misunderstandings how this feature works?
My minimal settings.json snippet looks like this:
"editor.tokenColorCustomizations": {
"[Default Dark+]": {
"textMateRules": [
{
"scope": "punctuation.brackets.curly.rust",
"settings": {
"foreground": "#FF0000"
}
}
]
}
},
"editor.semanticHighlighting.enabled": false
VSC v1.71.2, rust-analyzer v0.3.1221

How can I underline whitespaces in VS Code using textMateRules?

I am using VS Code and would like to have markdown headings displayed underlined in the source code. I have added the following configuration:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
"markup.heading.markdown",
],
"settings": {
"foreground": "#C0C3CA",
"fontStyle": "underline",
}
},
],
}
This basically works. The spaces in between the words however are not underlined, see this screenshot:
Is there a possibility to have these underlined as well?
According to the scope inspector the spaces also have the markup.heading.markdown scope, just like the words. So I don't see why they do not get underlined.
Any ideas?
It conflicts with "editor.renderWhitespace": "all" setting.
You can find out more a about why it happens on GitHub:
https://github.com/microsoft/vscode/issues/49462
https://github.com/eclipse/che-che4z-lsp-for-hlasm/issues/6

How to use tokenColorCustomizations VS Code text color changer in dart?

tokenColorCustomizations does not stick with dart, I can change JSON file but the color does not stick to it.
Dart uses Semantic Tokens so you need to customise the semantic token colours rather than textmate tokens. For example:
"editor.semanticTokenColorCustomizations": {
"rules": {
"keyword.void": {
"foreground": "#ffff99",
"fontStyle": "underline"
}
}
},
This will make the void keyword (keyword is the type, void is a modifier) yellow and underlined:
You can see which semantic token types/modifiers are applied to each item by using the Inspect Editor Tokens and Scopes command in VS Code:
To change the colour of a class name, you could use:
"editor.semanticTokenColorCustomizations": {
"rules": {
"class": {
"foreground": "#ff9999"
}
}
},
Which will look like this:

vs code set custom color for class properties

In VS Code, settings.json file, I've changed many theme colors via workbench.colorCustomizations and editor.tokenColorCustomizations but can't find the key to use to change class property colors, if that is what you call them. In the example code below, I'm talking about the color of self.t_id_user.
class User:
def __init__(self, t_id_user="", t_email="", t_password="", t_security_level="", t_name_first="", t_name_last="", t_enabled="", d_visit_first="", d_visit_last=""):
self.t_id_user = t_id_user
self.t_email = t_email
Help?
You know settings way. That's why mine answer is:
"editor.tokenColorCustomizations": {"textMateRules": [
{
"scope": ["storage.type"],
"settings": {"foreground": "#080",}
}
]
}

How to color parameters in VScode in the declaration method and the body

I can not make see that the parameters of the methods are of a certain color in the body too.
Any help will be appreciated.
Try:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "variable.parameter.ts, variable.other.object.ts",
"settings": {
"foreground":"#f00"
}
}
]
}
If you examine your variables with the palette command Developer: Inspect TM Scopes you will see that both of your instances are variables but so are many other things. You can narrow down your scope with the two scopes I used above to achieve what you want.
This works fine in the function declaration:
Press ctrl+comma
from the top right menu, click on curly braces. (settings.json file)
Add the following settings:
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": "variable.parameter",
"settings": {
"fontStyle": "",
"foreground":"#413f39"
}
}
]
}
There are two conditions for successful coloring:
The language must support semantic parsing.
The current theme must contains
"semanticHighlighting": true