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} 回车后，默认生成
要让 {} 被识别为插值包裹符，有两条路：
- 输入时用反斜杠转义：写成
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
想用 cc 展开成
在 settings.json 中加入：
"emerald.variables": {
"component": "MyComponent"
}
然后输入 cc + Tab 即可。注意：
-
cc是你自定义的缩写，不是内置关键字；真正起作用的是component这个变量名 - 若项目用函数组件且命名规范（如
Button,Modal），建议按需动态配，避免全局污染 - 多个组件需分别定义：
"button": "Button","modal": "Modal"，再用btn、md触发
Emmet 在 .tsx 文件中行为异常？优先检查 TypeScript 版本与插件冲突
部分用户反馈在 .tsx 中 ul>li*3 展开后多出 key 属性或报错，这通常不是 Emmet 本身问题，而是 ESLint 或 Prettier 的实时格式化干扰了缩写过程。
临时规避方式：
- 缩写前先禁用格式化：按
Ctrl+Shift+P→ 运行Format Document→ 选None，缩写完成后再切回来 - 在
settings.json中限制格式化时机："editor.formatOnType": false, "editor.formatOnSave": false
- 更稳妥的做法是安装官方
ESLint插件并配置eslint.validate: ["javascript", "javascriptreact", "typescript", "typescriptreact"]，避免语法解析错位
JSX 中的 Emmet 不是“开箱即用”的魔法，它对语言模式、变量上下文和格式化链路都敏感；最常被忽略的是右下角那个不起眼的语言模式标签——点错一次，后面所有缩写都白配。
