如何在VS Code中为React配置Emmet？无settings.json入口解决方案

Emmet默认支持范围 #

Emmet默认只内置支持HTML、CSS、SCSS、LESS这类文件，React常用的JSX/TSX并不在默认支持列表里，得手动配置让它适配。

打开settings.json的替代方法 #

如果在设置界面的Emmet板块里找不到“在settings.json中编辑”的入口，直接用这两种方式打开配置文件：

• 快捷键：Windows/Linux按Ctrl + Shift + P，Mac按Cmd + Shift + P，输入Preferences: Open Settings (JSON)回车即可。
• 菜单操作：点击左下角齿轮图标 → 选Settings → 点击设置界面右上角的{}图标，直接进入JSON配置页面。

配置Emmet支持React #

打开settings.json后，添加以下代码：

"emmet.includeLanguages": {
  "javascript": "javascriptreact",
  "typescript": "typescriptreact"
},
"emmet.triggerExpansionOnTab": true

• emmet.includeLanguages：让Emmet把普通JS/TS文件识别为JSX/TSX类型，这样在React组件里输入Emmet缩写（比如div.container>ul>li*3）就能生成对应的JSX结构。
• emmet.triggerExpansionOnTab：确保按下Tab键时能触发Emmet的代码展开，避免和VS Code的其他Tab功能冲突。

验证配置是否生效 #

保存settings.json后，打开一个JSX/TSX文件，输入div#app然后按Tab，应该会自动生成<div id="app"></div>的JSX代码，说明配置成功。

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