VS Code中TypeScript代码按Tab被Emmet替换为标签的解决方法

我之前也碰到过一模一样的糟心事！你试过Emmet的设置没效果，大概率是VS Code内置的补全逻辑或者第三方扩展在捣鬼，试试下面这些排查和解决步骤：

• 先排查第三方扩展
  临时禁用所有扩展（Ctrl+Shift+P -> 禁用所有已安装扩展），然后重启VS Code试试Tab键是否正常。如果恢复了，再逐个重新启用扩展，找出哪个扩展导致了这个问题——通常是HTML/XML补全类、自动标签生成类的扩展会跨语言触发奇怪的补全。

• 调整VS Code内置补全设置
  打开设置面板（Ctrl+,），依次搜索并修改这些选项：

  1. 搜索editor.tabCompletion，设置为 "off" 或者 "onlySnippets"，避免Tab键触发非代码片段的自动补全。
  2. 搜索html.suggest.html5，将其设置为 false，防止HTML标签补全逻辑渗透到TypeScript文件中。
  3. 搜索emmet.triggerExpansionOnTab，一定要设置为 false——这个是控制Tab键触发Emmet缩写展开的核心开关，你之前可能没配置这个！

• 补全Emmet的精准配置
  除了你已经设置的两项，再确认这个配置：

  "emmet.includeLanguages": {},
  

  确保里面没有把typescript映射到html相关的语言，避免Emmet在TS文件里生效。

• 检查自定义代码片段
  打开用户代码片段面板（Ctrl+Shift+P -> 配置用户代码片段），选择TypeScript相关的片段文件，看看有没有不小心创建了和你输入内容（比如line1）匹配的自定义片段，这类片段会优先触发Tab替换。

如果以上方法都试过还是不行，可以尝试备份当前设置后，重置VS Code的所有设置（Ctrl+Shift+P -> 重置所有设置），再重新配置你的开发环境。

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