VS Code自动导入NodeJS模块时未添加.js后缀的问题

在开发使用ES模块（ESM）的Node.js项目时，VS Code自动导入生成的语句不会添加.js后缀，但Node.js的ESM规范要求相对路径导入必须带完整文件后缀，这会直接触发ERR_MODULE_NOT_FOUND错误。

问题示例 #

• Node.js要求的正确导入语句：

  import { foo } from './foo.js'
  

• VS Code自动生成的错误导入语句：

  import { foo } from './foo'
  

触发的错误信息 #

node:internal/process/esm_loader:91
    internalBinding('errors').triggerUncaughtException(
                              ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '\mbot\util\strings' imported from \mbot\index.js
Did you mean to import ../util/strings.js?
    at new NodeError (node:internal/errors:372:5)
    at finalizeResolution (node:internal/modules/esm/resolve:405:11)
    at moduleResolve (node:internal/modules/esm/resolve:966:10)
    at defaultResolve (node:internal/modules/esm/resolve:1176:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:605:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:318:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:80:40)
    at link (node:internal/modules/esm/module_job:78:36) {
  code: 'ERR_MODULE_NOT_FOUND'
}

解决方法 #

方法1：修改VS Code全局设置

1. 打开VS Code设置面板（快捷键Ctrl+,或Cmd+,）
2. 搜索框输入javascript.preferences.importModuleSpecifierEnding，将选项设为js
3. 若项目用TypeScript，同步设置typescript.preferences.importModuleSpecifierEnding为js

也可直接在settings.json中添加配置：

{
  "javascript.preferences.importModuleSpecifierEnding": "js",
  "typescript.preferences.importModuleSpecifierEnding": "js"
}

方法2：仅针对当前项目生效

在项目根目录创建.vscode/settings.json文件，写入上述配置，仅对当前项目生效，不影响全局设置。

注意事项 #

Node.js的ES模块规范和CommonJS不同，相对路径导入必须指定完整文件后缀（.js、.mjs等），调整VS Code自动导入设置后，就能自动生成符合规范的导入语句，避免此类错误。

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