VS Code中HTML文件内text/jsx脚本标签无法获取正确语言模式与IntelliSense

核心原因分析 #

• 选HTML语言模式时，VSCode的HTML语言服务仅默认识别标准<script>标签（type为text/javascript或默认类型），<script type="text/jsx">不在它的JSX识别规则范围内，所以脚本内容只会按普通文本或纯JS处理，不会触发JSX语法高亮。
• 切换到JavaScript React/Babel JavaScript模式时，整个文件会被当作纯React/JSX文件解析，但你的文件本质是HTML结构，里面的<html>、<body>等HTML标签在纯JSX语境下会被判定为非法语法，因此出现错误误标；同时IntelliSense是针对纯React项目优化的，混合HTML结构后无法正确识别上下文，导致智能提示表现不佳。
• 更换主题无效是因为主题仅负责代码的颜色渲染，完全不影响VSCode的语法解析和智能提示逻辑，改变主题解决不了语言服务的识别问题。

实用解决办法 #

• 在<script type="text/jsx">标签上方添加一行注释：<!-- language=javascriptreact -->，明确告诉VSCode这段脚本内容用React语言模式解析，这样HTML部分保持正常高亮，脚本内的JSX也能被正确识别。
• 安装专门支持HTML内嵌JSX的扩展，比如HTML React，这类扩展会修改VSCode的语言识别规则，自动识别HTML文件内的JSX脚本块。

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