webpack路径别名识别
-
安装path intellisence 设置图标--扩展设置--setting.json
···
"path-intellisense.mappings": {
"@": "${workspaceRoot}/src"
}
···
image.png 重启vscode
根目录package.json同级添加jsconfig.js
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true,
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": [
"node_modules"
]
}
重启vscode
webpack配置别名
config.resolve.alias.set('@', resolve('src/'))
- 重新运行webpack
- 使用时注意需要点时间去加载，大概两三秒，如果还没反应就证明没设置对
安全起见还是先试下无别名访问时加载提示目录和文件速度，因为有时vscode会卡住
函数注释悬浮和定义跳转
- 基于导入文件的路径能被vscode识别，webpack路径别名识别就成为了关键
- 光标放在函数中，按ctrl+alt或者F12
import customer from '@/api/customer' //前提是设置了path intellisense
// import customer from '../../../api/customer' //vscode悬浮提示时能往上查找到
