如何在VSCode中将React语法高亮主题改为standard

方法一：安装匹配的主题插件 #

• 打开VSCode扩展面板（快捷键Ctrl+Shift+X）
• 搜索关键词React syntax highlight green return red JSX或Standard React Theme，找到符合描述的主题插件并安装
• 安装完成后，通过左下角主题切换按钮（或快捷键Ctrl+K Ctrl+T）选中该主题

方法二：自定义语法高亮（无匹配主题时使用） #

如果找不到现成的匹配主题，可手动配置配色：

• 打开设置界面（快捷键Ctrl+,），搜索workbench.colorCustomizations，点击编辑 in settings.json
• 在settings.json中添加针对React语法的自定义规则，示例如下：

  "editor.tokenColorCustomizations": {
    "textMateRules": [
      // 设置return关键字为绿色
      {
        "scope": "keyword.control.return.js",
        "settings": {
          "foreground": "#00FF00"
        }
      },
      // 设置JSX元素标签为红色
      {
        "scope": "entity.name.tag.jsx",
        "settings": {
          "foreground": "#FF0000"
        }
      }
    ]
  }
  

• 保存settings.json后，编辑器会自动应用新配色

精准匹配语法作用域 #

如果不确定目标文本对应的scope值，可通过以下方式查看：

• 按下Ctrl+Shift+P，输入Developer: Inspect Editor Tokens and Scopes
• 鼠标点击要修改配色的文本，弹出面板中会显示对应的scope名称，替换到上述配置即可

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