在开发前端项目时,通常会配置路径别名,通过创建的项目中默认会将 @/
指向src
,避免了使用一层层的相对路径及相关的不便。
但是又增加了一个新的问题,如果是使用相对路径,通过 ctrl 加鼠标左键点击是能够快速定位到对应文件/代码的,而使用别名后的绝对路径却是无法做到。
解决方法:
- 安装以下 VSCode 插件,做相关配置
path-intellisense
- 配置1:针对VSCode扩展,
setting.json
中编辑:
{
"path-intellisense.mappings": {
"@": "${workspaceRoot}/src"
}
}
- 配置2:项目根目录,
package.json
同级,新建jsconfig.json
文件,内容如下:
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true,
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": [
"node_modules"
]
}
效果:(按着 ctrl 键)
其它:
基本功能就是补全路径和文件名,编写代码时的提示也是有的