vscode 不支持 json 文件自动导入,需分别配置路径补全和格式化:ts/js 项目须在 tsconfig.json/jsconfig.json 中启用 resolvejsonmodule 和 moduleresolution;粘贴 json 字符串需用 paste json as code 和 pretty json 插件。

VSCode 本身不支持 JSON 数据文件的“自动导入”——它不会像 TypeScript 那样帮你把 .json 文件内容自动 import 到 JS/TS 代码里。所谓“JSON 自动导入”,实际是两类常见需求被混说:一是在代码中引用 JSON 文件时自动补全 import 路径,二是把粘贴进编辑器的原始 JSON 字符串自动格式化+保存为 .json 文件。两者机制完全不同,不能靠同一个设置解决。
为什么 import './data.json' 不提示自动补全?
VSCode 默认不识别 JSON 文件为可 import 的模块类型,除非你显式启用 JSON 模块支持:
- 确保项目有
tsconfig.json(TS 项目)或jsconfig.json(JS 项目),且其中"compilerOptions.moduleResolution"设为"node"或"nodenext" - 在
tsconfig.json中添加"resolveJsonModule": true(TS 必须),JS 项目还需加"allowSyntheticDefaultImports": true - 检查当前文件语言模式是否为
TypeScript或JavaScript(右下角状态栏),不是JSON或Plain Text - 输入
import data from './data.json'时,如果路径没提示,说明 VSCode 还没索引该文件——先保存data.json,再重启 TS Server(命令面板 →Restart TS server)
想把复制的 JSON 字符串一键转成格式化 .json 文件?
这不是“导入”,而是“粘贴即格式化并保存”。需要两个插件配合:
- 装
Paste JSON as Code:粘贴 JSON 字符串后,右键选Paste JSON as Code,它会自动缩进、加引号、转义,生成合法 JSON 结构 - 装
Pretty JSON:对已打开的.json文件按Alt+Shift+F(Windows/Linux)或Cmd+Shift+F(Mac)格式化 - 注意:VSCode 只对后缀为
.json的文件触发格式化;如果只是粘贴到.ts文件里,得先另存为.json再打开
为什么 Ctrl+. 不给 JSON 文件加 import?
因为 Ctrl+. 是语言服务的快速修复(Quick Fix),而原生 JSON 文件没有语言服务逻辑——它只是数据载体,不是可执行模块:
-
.json文件本身打开时,语言模式是JSON,此时Ctrl+.无反应是正常行为 - 只有在
.ts或.js文件中写 import 语句时,Ctrl+.才可能建议补全路径(前提是上面的tsconfig.json配置已生效) - 如果你在
.json文件里写了个错别字,比如多了一个逗号,VSCode 会标红,但不会弹Ctrl+.修复项——JSON 验证是语法层,不是语义层
真正容易被忽略的是:JSON 模块支持和路径别名(如 @/data/config.json)完全解耦。即使你配置了 baseUrl 和 paths,也必须同时开启 resolveJsonModule,否则 VSCode 看不到这个文件作为模块的存在。别指望只改 Webpack 或 Vite 的 alias 就能让 import 补全生效。











