I'm attempting to create custom syntax styling with Visual Studio Code's theme settings via TextMate language grammars.
Specifically, I'm wanting to italicize all of JavaScript's reserved keywords. I've managed to get 98% of the way there with the settings below (comments included for what's left).
Unfortunately, there are a few rules I wasn't able to find:
storage
includes the fat arrow symbol, which I do not want to include. I tried to be more specific, as seen in the settings below, but was unable to find more specific settings for constructor
and const
. Additionally, "storage.type.function"
was the most explicit setting I could find for functions (needed for the function keyword, but it includes the fat arrow).keyword
includes characters such as logical operators, etc., which again, I do not want to include. keyword.operator
is necessary for the textual operators (e.g. in
, instanceof
), but includes the character operators.eval
(disallowed in strict) or package
(unused future keyword).Any ideas?
const settings = {
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
// TODO: missing keywords: package, eval
// all comment types
"comment",
// true, false, null
"constant.language",
// import, from, export, default, return, if, for, break, continue, try, catch, finally,
// throw, default, yield, await
"keyword.control",
// TODO: remove operator symbols
// in, void, delete, instanceof
"keyword.operator",
// debugger
"keyword.other",
// new
"keyword.operator.new",
// enum
"storage.type.enum",
// super, this, arguments
"variable.language",
// attributes in html, jsx, etc.
"entity.other.attribute-name",
// TODO: remove storage.type after finding explicit for constructor, const, let, var
"storage.type",
// static, extends, async, private, public, implements
"storage.modifier",
// TODO: exclude fat arrow
// function
"storage.type.function",
// class
"storage.type.class",
// interface
"storage.type.interface",
],
"settings": {
"fontStyle": "italic"
}
},
]
},
};
As it turns out, in VS Code you can easily find the scope you need.
Open up the command search with ctrl/cmd + shift + p and search for Developer: Inspect TM scopes
. You can then click to the left of any symbol/word you'd like to find the scope to.
To answer my own question:
const
, let
, var
or the function
keyword by itself (storage.type.function
includes the reserved word and the arrow). There is, however, an explicit scope for the function arrow: storage.type.function.arrow
. This allows us to include the entire storage
scope, and then explicitly exclude the arrow.keyword.operator.expression
is the scope needed for only operators that are represented as words.eval
and package
are not yet available. You could target eval
with support.function
and package
with variable.other.readwrite
, but these scopes are broad and will include many other results.With that said, the rules necessary for italicizing all of JavaScript's reserved keywords in VS Code are listed below (comments and jsx
/html
attributes also included):
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
// all comment types
"comment",
// true, false, null
"constant.language",
// import, from, export, default, return, if, for, break, continue, try, catch, finally,
// throw, default, yield, await
"keyword.control",
// in, void, delete, instanceof
"keyword.operator.expression",
// debugger
"keyword.other",
// new
"keyword.operator.new",
// super, this, arguments
"variable.language",
// attributes in html, jsx, etc.
"entity.other.attribute-name",
// static, extends, async, private, public, implements
// constructor, const, let, var, enum, class, function, interface
// no explicit scopes for constructor, const, let, var
// also no explicit scope for function without the arrow
// therefore we enable all storage and explictly exclude the arrow in another scope
"storage",
// // no explicit scope for the eval keyword yet
// // can be targeted with the scope below, but scope is too broad
// "support.function",
// // no explicit scope for the package keyword yet
// // can be targeted with the scope below, but scope is too broad
// "variable.other.readwrite",
],
"settings": {
"fontStyle": "italic"
}
},
{
"scope": [
// function keyword does not have an explicit scope without the arrow
// therefore we explictly exclude the function arrow from being italicized
"storage.type.function.arrow",
],
"settings": {
"fontStyle": ""
}
}
]
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With