如何在VSCode中为TSX文件配置Emmet的snippets.json？

步骤1：启用TSX文件的Emmet支持 #

打开VSCode设置（快捷键Ctrl+,或Cmd+,），搜索emmet.includeLanguages，添加如下配置：

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

这一步是让VSCode将TSX文件识别为Emmet支持的语言环境，默认情况下Emmet不会主动对TSX启用支持。

步骤2：调整自定义代码片段格式 #

你的snippets.json中，TSX对应的片段写法需要适配JSX语法，建议修改为：

{
  "html": {
    "snippets": {
      "fm": "<FormattedMessage id=\"\" />"
    }
  },
  "typescriptreact": {
    "snippets": {
      "fm": "<FormattedMessage id=\"\" />"
    }
  }
}

如果已经完成步骤1的语言映射，仅保留html下的配置也可生效，但同时保留typescriptreact配置会更稳妥。

步骤3：确认Emmet触发设置 #

检查emmet.triggerExpansionOnTab设置是否为true，确保输入fm后按Tab键能触发代码片段展开。

完成以上操作后重启VSCode，在TSX文件中输入fm并按Tab，即可正常生成目标组件。

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