vscode插件安装路径与js执行路径必须区分:插件需装入对应系统扩展目录(如windows为%userprofile%\.vscode\extensions),而js运行依赖node的cwd和模块解析规则;@/别名仅编辑器跳转有效,运行时需打包工具或node配置支持。

VSCode 里插件和 JS 代码执行路径不是一回事,别混着配——插件装在哪影响它能不能加载,而 JS 执行路径决定 node 能不能找到你的文件、require() 能不能解析模块、@/ 别名跳转会不会失效。
插件到底装在哪儿?查不到就等于没装上
插件不是“点安装就完事”,它得落到正确目录才能被 VSCode 加载。默认路径由系统决定,改环境变量或启动参数才会变:
- Windows:
%USERPROFILE%\.vscode\extensions(比如C:\Users\Alice\.vscode\extensions) - macOS:
~/.vscode/extensions(常见路径如/Users/Alice/.vscode/extensions) - Linux:
~/.vscode/extensions
如果某个插件功能不生效(比如 Path Intellisense 不补全 @/),先打开终端执行:ls ~/.vscode/extensions | grep path-intellisense(macOS/Linux)或 dir %USERPROFILE%\.vscode\extensions | findstr path-intellisense(Windows)。没输出?说明插件根本没装进去——重装或检查是否被防火墙/杀软拦截。
JS 执行路径出错:Cannot find module 的真实原因
这个错误几乎从不来自代码本身,而是 node 启动时的当前工作目录(cwd)和 require() 解析逻辑打架。比如你在 /project/src 下打开 VSCode,但 launch.json 里 "program": "./index.js",实际运行的是 /project/index.js,就会报错。
-
node总是按当前终端 pwd 执行,不是按文件位置 -
require('./utils')是相对__dirname,不是相对launch.json的program -
jsconfig.json的baseUrl和paths只影响 TS/JS 跳转和类型检查,不影响运行时
验证方式:在 VSCode 终端里手动跑 node -e "console.log(__dirname)",再对比你 require() 的路径。不一致?加 "cwd": "${workspaceFolder}" 到 launch.json 的配置里。
@/ 路径能跳转但运行报错?两套机制根本不同
@/components/Button 在编辑器里点一下能跳过去,不代表 node 能加载它——前者靠 jsconfig.json + 插件解析,后者靠运行时模块解析器(比如 Webpack alias 或 Node 的 --loader)。
- VSCode 跳转依赖
jsconfig.json中的"paths": { "@/*": ["src/*"] }和"baseUrl": "src" - 运行时报
Cannot find module '@/components/Button',说明你没配打包工具或 ESM 的import映射(Node 默认不认@) - 临时绕过:用
require('./src/components/Button')或确保package.json有"type": "module"并配好exports
别指望 Path Intellisense 让 node 自动识别 @——它只管编辑器里的“看”,不管终端里的“跑”。
Quokka / Code Runner 运行路径容易被忽略的细节
这两个插件默认都用当前编辑器打开的文件所在目录作为 cwd,但它们处理 import/require 的方式完全不同:
-
Code Runner直接执行node /full/path/to/file.js,所以require('./config')是相对于该文件位置,不是项目根目录 -
Quokka默认走 Node 运行时,但如果你开了"babel": true,它会把代码丢给本地 Babel 处理,此时paths映射必须写进babel.config.js,jsconfig.json无效 - 两者都不读
tsconfig.json或webpack.config.js,纯靠 Node 原生规则或自身配置
最稳的做法:所有测试脚本放在项目根目录下,或统一用 "cwd": "${workspaceFolder}" 显式指定工作目录,别依赖“看起来应该对”的相对路径。
路径问题最难 debug 的地方在于:编辑器里一切正常,终端里一跑就崩。关键不是“怎么让它跳转”,而是“node 实际在哪儿执行、往哪儿找文件”。盯着 pwd 和 __dirname 看两眼,比反复重装插件有用得多。











