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

Question

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

当前插件都无法做到这一点。我真的很惊讶。甚至intellij也有这个支持！

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

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

有谁能解决这个问题吗？

Answer 1

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

在

VSCode

的 settings.json 中，只需添加您想要定位的语言：

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

Answer 2

更新这个问题。看起来像：

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

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

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

Answer 3

对于任何使用 Colorize 并希望它在他们的 React 项目（JS 中的 CSS 等）上工作的人，请使用：

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

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

对于 React 中的 TypeScript，请使用“typescriptreact”。

Answer 4

目前在 vscode Insiders v1.78 中能够在 css-stle 颜色格式前面看到颜色装饰器或在任何地方调用独立的颜色选择器。

ts 和 jsx 文件中的演示：

设置：

Editor: Default Color Decorators

命令：

Show or Focus Standalone Color Picker

查看更多信息https://stackoverflow.com/a/76066924/836330

Answer 5

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

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

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

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

Answer 6

有一种可能的实现方式，来自

wayn Cheng

的 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 7

在我的 create-react-app 项目中使用

"colorize.include": ["**/*.js"]

是可行的

Answer 8

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

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

Answer 9

我遇到了同样的问题，我无法在 React js jsx 文件中看到颜色选择器 该扩展只需安装即可添加颜色选择器 没有 settings.json 的麻烦 https://marketplace.visualstudio.com/items?itemName=MarkosTh09.color-picker