visual studio code - How to customize the color of custom syntax tokens in VSCode extension

Question

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

Answer 1

Waitting for answers