如何在HTML的<script>标签中启用JSX智能提示？

开发者阿泽

2026-8-13

实现VS Code中HTML文件内JSX智能提示的方法

要让VS Code识别HTML文件里type="text/babel"的<script>标签内的JSX并提供智能提示，按以下步骤操作：

1. 安装必要扩展

打开VS Code扩展面板（Ctrl+Shift+X），安装以下两个扩展：

ESLint：提供代码检查和智能提示基础
Reactjs Code Snippets：补充React/JSX的代码片段和提示

2. 配置VS Code语言关联

打开VS Code设置（Ctrl+,），点击右上角的打开设置(JSON)图标，添加以下配置：

{
  "files.associations": {
    "*.html": "html"
  },
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "text/babel": "javascriptreact"
  },
  "javascript.validate.enable": true,
  "typescript.validate.enable": true
}

这段配置会让VS Code把text/babel类型的脚本内容识别为javascriptreact语言，从而启用JSX相关的语法高亮和智能提示。

3. 给JSX代码添加类型提示注释

在你的type="text/babel"脚本开头添加一行注释，明确告诉VS Code这是JSX代码：

/** @jsx React.createElement */
function App() {
  return <React.Fragment>
    <h1>Working with forms - Project 2</h1>
  </React.Fragment>
}

如果需要更完整的类型支持，还可以添加// @ts-check注释开启类型检查：

// @ts-check
/** @jsx React.createElement */
function App() {
  return <React.Fragment>
    <h1>Working with forms - Project 2</h1>
  </React.Fragment>
}