从WebStorm转VSCode后，如何设置仅显示导入文件的可用导入项？

刚从WebStorm转VSCode的话，这种精准的导入提示需求确实很常见！我刚好折腾过类似的配置，给你几个靠谱的方案：

一、调整VSCode原生配置 #

VSCode自带的智能提示（IntelliSense）其实就支持这个功能，只是需要优化几个设置：

• 打开设置面板（快捷键Ctrl+,或Cmd+,），搜索editor.suggest.showImportedCompletions，确保勾选开启（设置为true）。这个选项会让编辑器优先展示已导入模块中的可用成员，不会混入无关的全局提示。
• 如果是TypeScript项目，搜索typescript.preferences.importModuleSpecifier，可以根据项目需求设置为relative或non-relative，规范导入路径的同时，提升提示的精准度。
• 另外，确保editor.suggest.snippetsPreventQuickSuggestions设置为false，避免代码片段干扰导入成员的提示。

二、推荐实用扩展 #

如果原生配置还满足不了需求，这两个扩展能帮你进一步强化功能：

• Auto Import - ES6, TS, JSX, TSX：这个扩展会在你输入时，智能过滤出当前已导入模块的所有可用导出项，不仅能实时提示，还能自动帮你补全导入语句（如果还没导入的话）。适配JS/TS/JSX/TSX各种场景，完全覆盖你的示例需求。
• Import Magic：除了精准的导入提示，它还能自动清理未使用的导入语句，同时支持根据你当前的代码上下文，只展示关联模块的可用成员，让提示列表更简洁。

三、额外优化（针对TS项目） #

如果是TypeScript项目，检查你的tsconfig.json配置：

{
  "compilerOptions": {
    "moduleResolution": "node", // 确保Node模块解析规则生效
    "allowSyntheticDefaultImports": true, // 支持默认导入的类型提示
    "esModuleInterop": true
  }
}

正确的TS配置能让VSCode更准确地解析模块的导出内容，提示自然就更精准了。

举个你的示例场景：当你导入actionTypes后，输入actionTypes.时，编辑器应该只弹出GET_JOB_STAMP等该对象的成员；导入InternalDataObject后，输入InternalDataObject.就会显示它的可用方法/属性。如果没生效，试试重启VSCode或者重新加载窗口（Ctrl+Shift+P输入Reload Window）。

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