How to customize the color of custom syntax tokens in VSCode extension

徘徊边缘 提交于 2019-11-29 01:30:36

问题


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

来源:https://stackoverflow.com/questions/46377151/how-to-customize-the-color-of-custom-syntax-tokens-in-vscode-extension

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!