用好 jsconfig.json 能提升 VS Code 对纯 JS 项目的理解,实现精准补全、稳定跳转和及时类型提示;通过 baseUrl、include/exclude 明确源码范围,paths 支持路径别名,typeAcquisition 和 types 启用全局类型提示,并协同 ESLint 确保路径校验准确。

用好 jsconfig.json 能让 VS Code 更懂你的 JavaScript 项目,自动补全更准、跳转更稳、类型提示更及时,尤其在没有 TypeScript 的纯 JS 项目里效果明显。
明确项目根目录和源码范围
VS Code 默认把整个文件夹当项目,但实际开发中常有 node_modules、dist、build 等非源码目录。通过 compilerOptions.baseUrl 和 include 可精准圈定“JS 关心的区域”。
-
include列出要索引的路径,比如["src/**/*", "test/**/*"] -
exclude显式排除干扰项,如["node_modules", "dist", "coverage"] -
baseUrl设为"./"或"src",后续路径别名才可被正确解析
支持路径别名,告别 ../../../
在 jsconfig.json 中配置 compilerOptions.paths,就能用简短别名代替冗长相对路径,既提升可读性,也避免重构时路径出错。
- 例如:
"@utils/*": ["src/utils/*"],之后可直接写import { debounce } from '@utils/helpers' - 注意:别名结尾必须带
/*,对应目标路径也要以/*结尾 - VS Code 会自动识别并支持跳转、重命名、补全,无需额外插件
启用全局声明与类型提示
纯 JS 项目也能享受类似 TS 的智能提示。通过 typeAcquisition 和 types 字段,让 VS Code 主动加载类型定义。
-
"typeAcquisition": { "enable": true }开启自动获取 @types 包(如@types/node、@types/react) -
"types": ["node", "jest"]显式声明需要的类型库,避免漏掉关键接口 - 搭配 JSDoc(如
/** @type {import('./api').User} */),提示精度大幅提升
配合 ESLint 和 Prettier 更顺手
jsconfig.json 本身不负责校验或格式化,但它为 ESLint(尤其是 eslint-plugin-import)提供路径解析依据,确保 import 路径检查、排序、别名解析都准确无误。
- ESLint 报
import/no-unresolved?先确认jsconfig.json的baseUrl和paths是否匹配 ESLint 配置中的settings.import/resolver - Prettier 不直接受影响,但路径简化后,代码更整洁,Prettier 格式化结果也更易读
- 建议在项目根目录放一份最小可用
jsconfig.json,哪怕只写{"compilerOptions": {"baseUrl": "./"}},也有基础收益
基本上就这些。不需要复杂配置,几行 JSON 就能让 VS Code 对 JS 项目理解更深——不是“能用”,而是“懂你”。










