VSCode配置：实现无index后缀的导入路径自动补全

1. 确认VSCode核心设置生效 #

你设置的javascript.preferences.importModuleSpecifierEnding: 'shortest'和typescript.preferences.importModuleSpecifierEnding: 'shortest'是正确方向，需确保：

• 打开VSCode设置（快捷键Ctrl+,），搜索这两个选项，确认工作区设置（而非全局用户设置）中已配置该值，避免全局设置覆盖工作区配置。

2. 配置Path Intellisense插件 #

由于你使用了Path Intellisense，需要在settings.json中添加以下配置，让插件适配无index后缀的导入：

"path-intellisense.extensionOnImport": false,
"path-intellisense.autoSlashAfterDirectory": true

打开settings.json的方式：按Ctrl+Shift+P，输入Preferences: Open Settings (JSON)。

3. 添加项目级解析配置文件 #

在项目根目录创建或修改对应配置文件，明确模块解析规则，让VSCode识别目录下的index文件作为入口：

JavaScript项目（jsconfig.json） #

{
  "compilerOptions": {
    "baseUrl": ".",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*"]
}

TypeScript项目（tsconfig.json） #

{
  "compilerOptions": {
    "baseUrl": ".",
    "moduleResolution": "Node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true
  },
  "include": ["src/**/*"]
}

4. 重启VSCode并验证 #

完成以上配置后，重启VSCode，尝试导入./foo目录，此时应该会自动补全为import './foo'而非import './foo/index'。如果仍有问题，暂时禁用其他导入相关插件（仅保留React和Path Intellisense），排查是否存在插件冲突。

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