有没有办法在 VS Code 中自定义 JS 中导入的颜色？

Question

我正在尝试在 VS Code 中更改 JS 中 import 之后的单词颜色。我附上了我的意思的截图。

截图：

我指的是红色下划线

我在textMateRules 中没有找到有效的条目。

我将不胜感激。谢谢:)

Answer 1

我不知道您使用的是哪种类型的 javascript，但您可以在 settings.json 中使用以下内容：

"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": "variable.other.readwrite.alias.js",
            "settings": {
                "foreground": "#FF0000"
            }
        }
    ]
}

---

如何知道给定令牌的作用域

在你的命令面板中输入：

> Developer: Inspect Editor Tokens and Scopes

这将在光标处显示与令牌相关的信息弹出窗口：

您将在底部看到textmate scopes 的适用范围条目，您可以使用列出的任何选项，但最上面的选项是最具体的选项

Answer 2

如果您使用Inspect Editor Tokens and Scopes 命令（来自命令面板），您将看到这个范围：

  "editor.tokenColorCustomizations": {
    "textMateRules": [

      {
        "scope": "variable.other.readwrite.alias.js.jsx",
        "settings": {
          "foreground": "#ff0000",
          "fontStyle": "bold underline"
        }
      },
    ]
  }, 

你不能在不改变字体颜色的情况下添加彩色下划线。

如果您真的想为线条着色不同于文本（以及许多其他格式选项，请参阅https://code.visualstudio.com/api/references/vscode-api#DecorationRenderOptions

使用Highlight extension：

  "highlight.regexes": {
  
    "(import\\s+)(.*?)(\\s+from .*)": {
      "filterLanguageRegex": "javascriptreact",
      "decorations": [
        {}, 
        {        
          "borderWidth": "0 0 2px 0",
          "borderColor": "red",
          "borderStyle": "solid"
        }
        {}
      ]
    }
  },

---

LOL：您可能只是想更改单词颜色，而不是下划线。尽管如此，Highlight 扩展为您提供了更多选项，例如轮廓、边框、backgroundColor、letterSpacing，甚至在 css 属性之前和之后 - 因此您可以轻松地使您想要突出的文本。