有没有办法在 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"
        }
        {}
      ]
    }
  },

大声笑：您可能只是想更改单词颜色，而不是下划线。然而，突出显示扩展为您提供了更多选项，例如轮廓、边框、背景颜色、字母间距，甚至在 css 属性之前和之后 - 因此您可以轻松地使您想要的文本脱颖而出。

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

Is there a way to customize the color of the import in JS in VS Code?

color-scheme

syntax-highlighting

visual-studio-code

vscode-settings

如何知道给定令牌具有哪些范围