VSCode JSX 中 Emmet 需手动设语言模式为 javascriptreact 或 typescriptreact；配置 emerald.syntaxProfiles 和 emerald.variables 才支持 jsx 插值与组件缩写，且需避免格式化插件干扰。

VSCode 默认支持 JSX 中的 Emmet，但需确认语言模式为 javascriptreact

VSCode 对 JSX 的 Emmet 支持不是靠文件后缀自动触发的，而是依赖当前编辑器右下角显示的语言模式。如果打开 .jsx 或 .tsx 文件，但状态栏显示的是 JavaScript 或 TypeScript，Emmet 缩写（如 div>ul>li*3）将不会展开。

解决方法很简单：

• 点击 VSCode 右下角语言模式标签（如 “JavaScript”），输入 javascriptreact 并回车
• 或按 Ctrl+Shift+P（Win/Linux）/Cmd+Shift+P（Mac），运行命令 Change Language Mode，再选 JavaScript React
• 推荐在项目根目录加 .vscode/settings.json，强制匹配：

  {
    "files.associations": {
      "*.jsx": "javascriptreact",
      "*.tsx": "typescriptreact"
    }
  }

JSX 中 Emmet 缩写默认不生成双花括号，需手动补全或配置 emerald 行为

输入 div{hello} 回车后，默认生成 hello，而非 {hello} —— 这是因为 Emmet 默认把大括号当作文本内容，而非 JSX 插值语法。

要让 {} 被识别为插值包裹符，有两条路：

• 输入时用反斜杠转义：写成 div{\{hello\}} → 展开为

  {hello}

• 更实用的是启用 Emmet 的 jsx 语法支持：在 settings.json 中添加

  "emerald.syntaxProfiles": {
    "javascript": "jsx"
  }

  （注意：这是旧版设置；VSCode 1.84+ 已改用 "emerald.syntaxProfiles" → 实际应设为 "emerald.syntaxProfiles": { "javascriptreact": "jsx" }）
• 验证是否生效：输入 div{hello} + Tab，应输出 {hello}

"emerald.variables": {
  "component": "MyComponent"
}