有没有一种方法可以自定义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：您可能只是想更改单词颜色，而不是下划线。尽管如此，“突出显示”扩展程序为您提供了更多选项，例如轮廓，边框，backgroundColor，letterSpacing，甚至在css属性之前和之后也都如此-因此您可以轻松地使要突出显示的文本。