如何让Visual Studio 2022拥有VS Code同款JSX/TSX语法高亮？

差异说明 #

VS Code的JSX/TSX语法高亮对字符串、JSX元素、属性等有明确的颜色区分（比如字符串为橙色、JSX标签为蓝色、属性值有专属色调）；而Visual Studio 2022默认配置下，JSX/TSX文件仅以白色和蓝色为主，JSX内部的字符串也没有橙色高亮，语法区分度较低。

解决方法 #

1. 导入VS Code主题到Visual Studio 2022

Visual Studio 2022支持直接适配VS Code的主题，步骤如下：

• 打开VS2022，进入工具 > 扩展（或按Ctrl+Q搜索“扩展”）
• 在扩展市场中搜索你常用的VS Code主题名称（比如「One Dark Pro」「Monokai」），选择支持VS2022的版本安装；也可以搜索「Color Theme Converter」插件，自行导入本地的VS Code主题文件
• 安装完成后重启VS2022，进入工具 > 选项 > 环境 > 字体和颜色，在「显示其设置」下拉菜单中选中安装的主题，即可同步VS Code的高亮风格

2. 手动自定义JSX/TSX高亮规则

如果不想依赖第三方主题，可手动调整颜色：

• 进入工具 > 选项 > 环境 > 字体和颜色
• 在「显示其设置」中选择JavaScript/TypeScript分类，找到JSX相关的语法项（如「JSX元素」「JSX属性」「JSX字符串」等）
• 逐个修改这些项的前景色，匹配VS Code中的对应颜色（可参考你提供的VS Code截图取色）
• 调整完成后点击「确定」保存设置

3. 更新JS/TS语言服务增强高亮

确保VS2022的JS/TS支持处于最新状态：

• 进入工具 > 选项 > 文本编辑器 > JavaScript/TypeScript > 语言服务
• 勾选「启用新的JavaScript/TypeScript语言服务」（若存在该选项）
• 通过扩展市场搜索「TypeScript SDK」，安装或更新到最新版本

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