如何将vscode css颜色选择器功能带入js文件中，其字符串与颜色名称格式匹配？

Question

https://code.visualstudio.com/docs/languages/css

当前插件都无法执行此操作。我真的很惊讶。甚至intellij都有这种支持！

vscode本身的回复也有点无用。 https://github.com/Microsoft/vscode/issues/36485

关于如何构建这样的插件的任何暗示似乎都不应该真的很难，因为它实际上只是将功能从一个文件扩展名移植到另一个文件扩展名？

任何人都可以解决此问题吗？

Answer 1

对于使用Colorize并希望其可用于他的React项目（js中的CSS等）的任何人：

使用

"colorize.languages": ["javascriptreact", "javascript", "css", "scss"]

显然需要“ javascriptreact”，而不是“ javascript”

Answer 2

我发现colorize可以突出显示 JavaScript 和 TypeScript （以及其他）GitHub

在您的settings.json中的 VSCode 中，只需添加您要定位的语言即可：

"colorize.languages": ["typescript", "javascript", "css", "scss"]

Answer 3

wayncheng中的vscode-color-info有一种可能的实现方式

将以下代码添加到settings.json中的colorInfo.languages中即可。确保还包括所有默认语言，以免被禁用。

{
    "selector": "javascript",
    "colors": "css"
}

所以您的settings.json应该看起来像这样：

"colorInfo.languages": [
    {
        "selector": "css",
        "colors": "css"
    },
    {
        "selector": "sass",
        "colors": "css"
    },
    {
        "selector": "scss",
        "colors": "css"
    },
    {
        "selector": "less",
        "colors": "css"
    },
    {
        "selector": "html",
        "colors": "css"
    },
    {
        "selector": "javascript",
        "colors": "css"
    }
]

Answer 4

可以在我的create-react-app项目中使用"colorize.include": ["**/*.js"]

Answer 5

我遇到了 TSX（带有 XML 的 TypeScript 文件）无法正确突出显示颜色的问题。解决方案是将“typescriptreact”添加到@rouan 的帖子中所述的数组中。

PS @Ali Mert Cakar 它不添加颜色选择器，仅突出显示相应颜色的颜色。