WebStorm 设置 import 引入不省略文件后缀

用 WebStorm 的自动导入补全模块路径时，它默认会把扩展名去掉，生成 import foo from './foo' 这种形式。走 Webpack、Vite 这类打包器时没问题，它们会按 resolve.extensions 自己补。但有两种场景会直接报错：一是项目用原生 ESM（浏览器里的 <script type="module"> 或 Node 的 "type": "module"），规范要求路径必须带完整扩展名；二是 TypeScript 开了 moduleResolution: "node16" / "nodenext"，同样要求写 .js 后缀。

这篇记的就是让 WebStorm 自动导入时保留文件扩展名的设置位置。

设置位置

打开设置面板，进入 Editor → Code Style → JavaScript（TypeScript 项目改 TypeScript 页面），切到 Imports 标签页，找到 Use file extension in module name 这一项。它是个下拉框，几个值的行为分别是：

Auto：由 IDE 根据项目类型猜，也就是默认行为，多数情况下会省略后缀。
Always：总是带上扩展名，原生 ESM 项目选这个。
Never：总是省略。

同一个 Imports 标签页里还有几个常用开关值得顺手确认：Use paths relative to the project, resource or sources roots 控制生成相对路径还是基于根目录的路径，Merge imports for the same module 控制同模块的多个导入是否合并成一条。

下图是这个面板，重点看 Imports 标签页里 Use file extension in module name 下拉框选中的值。

WebStorm 设置面板 Editor - Code Style - JavaScript 的 Imports 标签页，含 Use file extension in module name 下拉选项

注意事项

这个设置只影响 WebStorm 新生成的 import 语句，已经写好的老代码不会被批量改写。
TS 项目里要注意：源码写 .ts 但编译产物是 .js，走 nodenext 解析时 import 路径里应该写 .js 而不是 .ts，这是 TypeScript 的规定，不是 IDE 的 bug。
如果项目里配了路径别名（@/xxx），别名路径不受这个后缀设置影响，是否带后缀取决于 tsconfig.json 的 paths 和打包器配置。
Vue 单文件组件比较特殊，导入 .vue 文件必须带后缀，因为 TypeScript 不认识这个扩展名，需要靠后缀配合 shims-vue.d.ts 声明来识别类型。
想批量给老代码补后缀，可以用 ESLint 的 import/extensions 规则配合 --fix 自动改写，比在 IDE 里一个个点补全快得多。