让IDE识别webpack的别名alias的实现方法


Posted in Javascript onMay 06, 2020

许多项目脚手架默认就会把src目录添加一个@别名,项目中实际引入时,虽然可以精简路径,但也带来一个很麻烦的问题:
IDE无法识别这些别名,因此导致无法自动完成路径、无法识别引用资源的输出、出现不必要的告警等情况。

偶然发现vscode的web项目里有一个jsconfig.json文件,如:

{
 "compilerOptions": {
  "baseUrl": ".",
  "paths": {
   "@/*": ["src/*"]
  },
  "target": "ES6",
  "module": "commonjs",
  "allowSyntheticDefaultImports": true
 },
 "include": ["src/**/*"],
 "exclude": ["node_modules"]
}

只要有这个文件,vscode就可以正常识别出别名了。

后来发现JetBrains家的IDE更简单,配置指定一下就行:

让IDE识别webpack的别名alias的实现方法

在项目设置的webpack标签页里,将配置文件指向<projectRoot>/node_modules/@vue/cli-service/webpack.config.js即可。

保存并重新打开项目以后,不只src,所有的别名比如utils等等都可以被正常识别。

其实这都已经写在vue-cli3的文档里了,只是原始表述不太直观,被我一直忽略了。

到此这篇关于让IDE识别webpack的别名alias的实现方法的文章就介绍到这了,更多相关ide webpack alias别名内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
用Javascript同时提交多个Web表单的方法
Dec 26 Javascript
jQuery数据显示插件整合实现代码
Oct 24 Javascript
javascripit实现密码强度检测代码分享
Dec 12 Javascript
js文件包含的几种方式介绍
Sep 28 Javascript
分享一个常用的javascript静态类
Dec 31 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
Jan 03 Javascript
jQuery实现最简单实用的分秒倒计时
Feb 05 Javascript
vue 粒子特效的示例代码
Sep 19 Javascript
jquery实现倒计时小应用
Sep 19 jQuery
详解Angular5 路由传参的3种方法
Apr 28 Javascript
layui table数据修改的回显方法
Sep 04 Javascript
基于Vue中的父子传值问题解决
Jul 27 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 #Javascript
JS 设计模式之:单例模式定义与实现方法浅析
May 06 #Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 #Javascript
JavaScript布尔运算符原理使用解析
May 06 #Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
May 06 #Javascript
Vue 的双向绑定原理与用法揭秘
May 06 #Javascript
微信小程序中使用 async/await的方法实例分析
May 06 #Javascript
You might like
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
56.com视频采集接口程序(PHP)
2007/09/22 PHP
php实现的一个简单json rpc框架实例
2015/03/30 PHP
php自定义时间转换函数示例
2016/12/07 PHP
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
理解javascript中的回调函数(callback)
2014/09/02 Javascript
jquery实现select下拉框美化特效代码分享
2015/08/18 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
2017/04/22 Javascript
JavaScript函数中的this四种绑定形式
2017/08/15 Javascript
vue 解决文本框被键盘遮住的问题
2019/11/06 Javascript
javascript 高级语法之继承的基本使用方法示例
2019/11/11 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
基于JavaScript实现留言板功能
2020/03/16 Javascript
实例分析javascript中的异步
2020/06/02 Javascript
原生javascript如何实现共享onload事件
2020/07/03 Javascript
Python中easy_install 和 pip 的安装及使用
2017/06/05 Python
python扫描proxy并获取可用代理ip的实例
2017/08/07 Python
Centos7 Python3下安装scrapy的详细步骤
2018/03/15 Python
python实现爬取图书封面
2018/07/05 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
详解Python装饰器
2019/03/25 Python
Python面向对象进阶学习
2019/05/21 Python
PIL图像处理模块paste方法简单使用详解
2019/07/17 Python
pytorch标签转onehot形式实例
2020/01/02 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
MATLAB数学建模之画图汇总
2020/07/16 Python
python爬虫工具例举说明
2020/11/30 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
纯CSS3打造动感漂亮时尚的扇形菜单
2014/03/18 HTML / CSS
耐克美国官网:Nike.com
2016/08/01 全球购物
捷克鲜花配送:Florea.cz
2018/10/29 全球购物
澳大利亚领先的在线礼品网站:Gifts Australia
2020/08/15 全球购物
销售主管岗位职责范本
2014/02/14 职场文书
工程部岗位职责
2015/02/10 职场文书
学习《中小学教师职业道德规范》心得体会
2016/01/18 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书