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

Posted 2023-02-16

【中文标题】如何将 vscode css 颜色选择器功能带入带有匹配颜色名称格式的字符串的 js 文件中？

【英文标题】：how to bring the vscode css color picker feature into js file with string that match color name format?

【发布时间】：2018-11-05 01:08:01

【问题描述】：

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

目前没有一个插件能够做到这一点。我真的很惊讶。甚至 intellij 也有这种支持！

vscode 本身的回复也有点没有帮助。 https://github.com/Microsoft/vscode/issues/36485

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

谁能解决这个问题？

【参考方案1】：

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

在 VSCode 中的 settings.json 中添加您想要定位的语言：

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

【讨论】：

让它与"colorize.include": ["**/*.coffee"]一起工作

这个扩展有颜色选择器吗？或者它只是突出颜色？我安装了它但是jsx中没有颜色选择器

【参考方案2】：

致任何使用 Colorize 并希望它在他们的 React 项目（js 中的 css 等）上工作的人：

使用

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

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

对于 react 中的打字稿，请使用“javascriptreact”。

【讨论】：

打字稿也是如此，即添加“typescriptreact”。

【参考方案3】：

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

将以下代码添加到 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"
    
]

【参考方案4】：

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

【参考方案5】：

更新这个问题。好像是：

https://marketplace.visualstudio.com/items?itemName=AntiAntiSepticeye.vscode-color-picker

添加颜色选择器将功能引入其他语言。

经过个人测试并在打字稿中工作。它相对较新，因此没有大量下载或安装，但可以像宣传的那样工作。

【讨论】：

这很好用！谢谢！这绝对应该是新的正确答案，因为它将 css 文件中的相同颜色功能添加到任何其他文件类型中。 （python、js等）

【参考方案6】：

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

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

【参考方案7】：

VS 扩展JSON color token 能够以任何语言调出本机颜色选择器。

要使这个与 JS 和 React 一起工作，请将其添加到 VS Code 的 settings.json 中：

"jsonColorToken.languages": [
    "json",
    "jsonc",
    "javascript",
    "javascriptreact"
  ]

来源：https://github.com/YECHUNAN/json-color-token/issues/2#issuecomment-977261832