如何在Visual Studio Code中为.tsx文件启用Emmet功能？

我完全懂你现在的困扰——在TSX文件里敲.foo按Tab，死活出不来想要的<div className="Foo"></div>，明明调了配置还是没用对吧？结合你给出的现有设置，咱们一步步来搞定它：

1. 修正Emmet的语言映射配置 #

你当前的emmet.includeLanguages把typescript映射到了typescriptreact，但其实.tsx文件的实际语言模式是typescriptreact，直接把它映射到HTML才能让Emmet的规则生效。把配置改成这样：

"emmet.includeLanguages": {
  "javascriptreact": "html",
  "typescriptreact": "html"
}

这样Emmet会把TSX文件当成HTML处理缩写规则，同时自动适配React的className替代原生的class。

2. 确保Tab触发Emmet的规则无冲突 #

你已经开启了"emmet.triggerExpansionOnTab": true，这一步是对的，但有时候VS Code的其他快捷键或代码提示会抢占Tab的优先级。可以手动给TSX文件单独绑定快捷键，避免冲突：
打开settings.json，添加这段配置：

{
  "key": "tab",
  "command": "editor.emmet.action.expandAbbreviation",
  "when": "editorTextFocus && !editorReadonly && !editorTabMovesFocus && !hasOtherSuggestions && !hasSnippetCompletions && !inString && !inComment && editorLangId == 'typescriptreact'"
}

这个条件会确保只有在TSX文件中、没有其他代码提示干扰时，Tab才会触发Emmet展开。

3. 注意Emmet缩写的大小写规则 #

如果你要生成className="Foo"（首字母大写的类名），记得输入的缩写要对应成.Foo（首字母大写）——Emmet是严格按照你输入的缩写生成类名的。如果想让小写的.foo自动转成大写类名，你需要自定义Emmet代码片段，但先搞定基础的展开功能再说。

4. 重启VS Code #

修改配置后一定要重启编辑器！很多时候配置不会即时生效，重启是最稳妥的办法。

5. 确认文件的语言模式 #

打开你的.tsx文件，看右下角的语言模式是不是TypeScript React。如果显示的是其他（比如TypeScript），点击它切换成TypeScript React，Emmet只会对配置好的语言模式生效。

如果做完这些还是不行，可以检查Emmet扩展是不是最新版本，或者暂时禁用其他代码提示类扩展，排查是否有冲突。

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