如何在VSCode中为Dart代码的声明类型添加颜色与样式？

当然可行！自定义Dart代码里特定类型的颜色和样式，绝对是提升代码可读性的好点子——尤其是当你想把常用类（比如Widget、LoadingContainer）和内置蓝色关键字区分开的时候。下面就来一步步教你实现：

方法一：通过VSCode设置直接自定义Token样式 #

这是最直接的方式，不需要额外插件，直接修改VSCode的配置文件就行：

1. 打开设置JSON文件：按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），输入Preferences: Open Settings (JSON)并回车。
2. 添加自定义规则：在JSON里加入editor.tokenColorCustomizations配置，针对你想要修改的类型设置颜色和字体样式。

比如你想把Widget、BuildContext、LoadingContainer改成灰色，同时加上加粗+斜体，可以这么写：

"editor.tokenColorCustomizations": {
  "textMateRules": [
    {
      "scope": [
        "entity.name.type.class.dart", // 匹配类类型（比如Widget、LoadingContainer）
        "variable.parameter.type.dart" // 匹配参数类型（比如BuildContext）
      ],
      "settings": {
        "foreground": "#808080", // 灰色，你可以换成任何十六进制颜色值
        "fontStyle": "bold italic" // 支持组合：bold/italic/underline，用空格分隔
      }
    }
  ]
}

如果你只想在特定主题下生效（比如只在Dark+主题里改），可以把规则放到主题对应的字段里：

"editor.tokenColorCustomizations": {
  "[Dark+]": {
    "textMateRules": [
      // 上面的规则复制到这里
    ]
  }
}

方法二：用语义化高亮做更精细的控制 #

如果需要区分自定义类和系统内置类，可以用语义化高亮配置editor.semanticTokenColorCustomizations，它能更精准地识别代码元素的语义：

"editor.semanticTokenColorCustomizations": {
  "rules": {
    "class": {
      "foreground": "#808080",
      "fontStyle": "bold italic"
    },
    "parameter.type": {
      "foreground": "#808080",
      "fontStyle": "bold italic"
    }
  }
}

小技巧：确认准确的Token Scope #

如果不确定某个元素对应的Scope是什么，按下Ctrl+Shift+P，输入Developer: Inspect Editor Tokens and Scopes，然后点击你想修改的代码元素，就能看到它的所有Scope了——用这个方法能保证你的规则精准命中目标。

修改后，你的示例代码就会变成类似这样的效果：

@override Widget build(BuildContext context) { return new LoadingContainer(

内容的提问来源于stack exchange，提问作者atreeon