关于vue.js:开发Vue或React项目时路径别名智能提示方案

开发 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