27

TLDR; How can I have an extension colorize the syntax the extension is defining without it actually being a color theme the user has to enable?

I'm attempting to port this Sublime Text plugin (ToDone) to VSCode.

It creates a grammar for todo lists and then uses syntax highlighting to emphasize important tasks, mute completed tasks, etc.

I found "editor.tokenColorCustomizations", via Customize a Color Theme. It works with the new syntax when I use it in my user settings, but fails when I use it in the package.json#contributes portion of the extension manifest.

{
    "contributes": {
        "languages": [
            {
                "id": "todone",
                "aliases": [
                    "ToDone",
                    "To-Done"
                ],
                "extensions": [
                    ".todone",
                    ".todo"
                ]
            }
        ],
        "grammars": [
            {
                "language": "todone",
                "scopeName": "text.todone",
                "path": "./todone.tmLanguage"
            }
        ],
        "configurationDefaults": {
            "[todone]": {
                "editor.insertSpaces": false,
                "editor.tokenColorCustomizations": {
                    "textMateRules": [
                        {
                            "scope": "symbol.definition.task-heading.todone",
                            "settings": {
                                "foreground": "#ff8800"
                            }
                        }
                    ]
                }
            }
        }
    }
}

So far, the syntax seems ok — it's exactly what is being used by the Sublime plugin and the colors from the user-settings are applied correctly. Also, the format of the settings seems ok because "editor.insertSpaces" is being applied and the colors are working when present in the user-settings.

Lastly, I get a very disappointing 'Warning' 'Unknown editor configuration setting' message on the "editor.tokenColorCustomizations" setting in the extension package.json.

So, sounds like this setting is not enabled for extensions?

Another possible route I saw was to use decorators. But, I didn't see anything on inspecting the syntax tokens associated with a portion of text in the docs, e.g. some way to iterate through the syntax tokens of the document to apply decorators. So, the decorator route sounds like the hard-way compared to "editor.tokenColorCustomizations".

Any suggestions on how to make this work would be greatly appreciated.

Edit: The code, so far, is on GitHub: tiffon/vscode-todone

tiffon
  • 5,040
  • 25
  • 34
  • there is a [similar question](https://stackoverflow.com/questions/52717380/how-to-customize-color-of-html-template-props-in-visual-studio-code) with an answer – galki Oct 10 '18 at 10:26
  • I've stumbled across the same problem, @tiffon. The link you provided reminded me about theme extensions and I started to look at the source of one of those: https://github.com/dracula/visual-studio-code/blob/bf3c10d5d71a8c15a0eff99127d7815120998de4/scripts/build.js And just maybe is there a way to do this. Not sure if it means I have to write a whole theme, but I might explore it anyway. If you explore it, please let me know. – PEZ Nov 11 '18 at 09:21
  • 4
    @PEZ I haven't experimented in awhile, have used my personal settings to achieve the desired effect as noted here (https://github.com/tiffon/vscode-todone#how-to-install). Does not scale, but useful enough for me. – tiffon Dec 18 '18 at 02:20
  • 2
    Any updates to this over the past few years? I'm facing the same issue in 2021? – Discrete Games Sep 13 '21 at 20:00
  • Your failing to understand the spirit of the tool. One of VS Code biggest selling points (sort of a misnomer since it isn't sold, but given) is how highly customizable it is. Literally every part of the editor, every Icon every piece of text, everything that renders and is view by the user must be assigned a property that's customizable by the user. You have no choice but to contribute syntax that is customizable in some way. You can do it in a way where it takes on the color of another property, but that property can also be changed by the theme/or-user as well. – JΛYDΞV Oct 31 '21 at 12:50

1 Answers1

3

It only fails if you specify a specific language. It is working for me if I do not specify the todone extension.

"configurationDefaults": {
    "editor.insertSpaces": false,
    "editor.tokenColorCustomizations": {
      "textMateRules": [
        {
          "scope": "symbol.definition.task-heading.todone",
          "settings": {
            "foreground": "#ff8800"
          }
        }
      ]
    }
  }
Carlos Tenorio Pérez
  • 549
  • 5
  • 16