共计 1415 个字符,预计需要花费 4 分钟才能阅读完成。
开发 Vue 或 React 我的项目时门路别名智能提醒计划
前言
在咱们开发
Vue
或React
我的项目时,每次配置完门路别名,在输出门路时都没有对应的智能提醒门路,如何解决这个痛点呢?笔者通常都是应用
vscode
,本次应用vscode
来进行演示解决,非常简单的
计划一: path-alias 插件
俗话说的好「工欲善其事,必先利其器」那么 有没有一种插件能让咱们不同的我的项目中每次在输出门路别名时时,有相干的门路提醒呢?
答案是:当然有的,而且简直零配置哦,上面让咱们来看上面????
未装置成果
- 没有门路别名智能提醒,
vscode
并不能默认并不能辨认你配置的门路别名
装置成果和性能
- 在
vscode
插件商城中搜寻并装置:path-alias
- 不光具备路
径别名智能提醒
,还能够 点击别名门路跳转到该文件 - 看上面性能演示????
- 并 反对从别名中导入导入函数或者变量 , 有相干的智能提醒
选择性配置
- 入选后面咱们说了零配置,怎么这么快要打脸了?????
- 别急别急,听我一一道来,俗话说..,好吧别打脸????
-
回归正题:因为
path-alias
插件只默认配置门路@
映射到我的项目的src
目录- 当须要有更多的门路别名有对应的映射有智能提醒,只能配置一下了,也是非常简单的,不要慌
-
进入你的
vscode
的settings.json
文件- 如果不晓得
settings.json
文件在哪里能够右插件键进入设置,如???? 图所示
- 如果不晓得
![](https://gitee.com/xmkm/cloudPic/raw/master/img/20201028204449.png)
- 增加如下????
// 开发我的项目时应用门路别名时会有 ” 智能提醒 ”
“pathAlias.aliasMap”: {
// key 是你要定义的别名 | 应用 ${cwd}来代替当前工作目录的绝对路径
“@”: “${cwd}/src”,
“~”: “${cwd}/src”,
“components”: “${cwd}/src/components”
},
- 这时门路输出
component
也会有智能提醒了
一点点毛病
- 当然没有美中不足的插件,毛病就是: 占用内存有一点点高,作者近期也在保护的
- 这个次要还是看本人应用的体验和占用内存是否成正比,当然如果你想不每次新建我的项目都要配置
jsconfig.json
或tsconfig.json
的别名门路智能提醒的话,倡议间接应用这个插件即可 - 当然占用内存如果感觉过高的话,上面倡议应用
jsconfig.json
,也就是计划二????
计划二: jsconfig
jsconfig.json
- 在你的我的项目根目录下新建:
jsconfig.ison
文件 - 内存小举荐????,复制如下到你的文件,从新
vscode
即可
{
“compilerOptions”: {
“experimentalDecorators”: true,
“baseUrl”: “./”,
“paths”: {
“@/“: [“src/“],
“components/“: [“src/components/“],
“assets/“: [“src/assets/“],
“views/“: [“src/views/“],
“common/“: [“src/common/“],
}
},
“exclude”: [“node_modules”, “dist”]
}
总结一下
- 如果想一次配置且不在乎占用内存状况,倡议间接应用
path-alias
插件 - 如果本机内存不够或感觉这个插件应用体验不佳, 倡议应用
jsconfig.json
正文完