webstorm小技巧:使用library功能,下载第三方资源到本地,实现全局变量在编写时有提示

痛点描述:

image.png

引用外部js资源中的变量时,IDE警告变量未定义,并且在编写时无提示,大大的影响开发体验、效率,增大bug率。下面为大家介绍二种解决方案。

解决方案

一、webstorm library功能,下载远程资源到本地

原理:

  • 把远程资源下载到webstorm中的lib本地空间
  • 设置lib的生效的范围 (默认是global全局作用域)

使用方法

把光标移动到资源的url上,并点击下载到本地后,提示出现了
image.png

webstorm左侧导航栏library出现了下载的库
image.png

wxSdk.js代码内容

const wxSdk={
    getUserInfo:function(cb){
        return 11;
    },
    getUserId:function(){
        return 22
    },
}
window.wxSdk=wxSdk;

其他说明:
class类也是可以有提示的
image.png

point.js

class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    distance(a, b) {
        const dx = a.x - b.x;
        const dy = a.y - b.y;
        return Math.hypot(dx, dy);
    }
    fn2(){
        return 1;
    }
}
window.Point=Point;

远程jquery文件测试,引用远程和引用下载到本地后的对比效果
image.png

不适用的场景,某些打包的内容

哪位大佬知道解决方案,欢迎留言。

uuid没有提示

image.png

ant design 没有生效

image.png

二、安装第三方的插件

比如这个,安装react插件
image.png

你可能感兴趣的:(webstorm小技巧:使用library功能,下载第三方资源到本地,实现全局变量在编写时有提示)