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:

1. 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).
2. 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.
3. I wasn't able to find rules for 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"
    }
  },
]
  },
};

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:

1. 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).
2. 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.
3. I wasn't able to find rules for 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"
    }
  },
]
  },
};

• javascript
• textmate
• visual-studio-code

1 Answer 1

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:

1. So far, there is not an explicit scope for 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.
2. keyword.operator.expression is the scope needed for only operators that are represented as words.
3. Specific scopes for 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": ""
    }
  }
]
  }