如何让VSCode Emmet在Tab展开时自动导入React组件

两种组件补全方式的差异 #

• 方式1（IntelliSense补全）：输入<后开始输入组件名，接受VSCode的导入建议，完成后会自动生成闭合标签，同时自动在文件顶部导入组件。
• 方式2（Emmet补全）：直接输入组件名（无需<），通过Emmet建议展开，支持添加ID、className、嵌套结构等丰富语法（示例如下），但不会自动导入组件。

Emmet语法示例 #

输入：

CustomPanel.std-pnl>CustomImage[someProp={someValue}]/+CustomButton#btn-1.std-btn[onClick={onClickHandler}]{This the button text}

展开后生成：

<CustomPanel className="std-pnl">
  <CustomImage someProp={someValue} />
  <CustomButton id="btn-1" className="std-btn" onClick={onClickHandler}>This the button text</CustomButton>
</CustomPanel>

当前环境配置 #

VSCode版本：1.77.3
settings.json中的Emmet配置：

"emmet": { 
  "includeLanguages": {
    "javascript": "javascriptreact",
    "typescript": "typescriptreact"
  },
  "showExpandedAbbreviation": "always"
}

曾尝试添加"js/ts.implicitProjectConfig.checkJs": true，但无效果。

可行解决方案 #

目前VSCode原生Emmet本身不支持触发自动导入，但可以通过以下两种方式实现需求：

1. 启用Emmet与IntelliSense的联动 #

在settings.json中添加以下配置，让Emmet建议通过IntelliSense渠道触发，从而继承自动导入能力：

"emmet.triggerExpansionOnTab": true,
"editor.suggest.snippetsPreventQuickSuggestions": false,
"editor.suggest.showSnippets": true,
"typescript.suggest.completeFunctionCalls": true,
"javascript.suggest.completeFunctionCalls": true

配置后，输入组件名时IntelliSense会同时显示Emmet补全选项，选择后既能展开Emmet语法，又会自动导入组件。

2. 使用第三方插件增强 #

安装Auto Import - ES6, TS, JSX, TSX插件，它可以监听文件中新增的未导入组件，自动弹出导入提示，即使是Emmet生成的组件也能触发。
注意：部分插件需在设置中开启对React/TSX的支持，确保配置正确。

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