完美解决Webstorm不支持nodejs等语法提示和补全

问题

在使用 Webstorm 写 es6、node的时候,会出现没有语法提示甚至是产生波浪线,例如常用的 require, import

ws没有nodejs语法提示

不仅是内置函数语法,不仅是 js,在一些第三方npm库(比如 element-ui),在 vue/html 等上也被黄色背景色标上“未知标签名”的语法提示

ws没有element-ui第三方npm库语法提示

既影响美观,又不支持代码候选补全,实在对不起 WebStorm 前端开发利器的称号。

 

解决方法

1. 设置 Webstorm js 语法支持到 es6(或根据需要选择)

js语法支持到es6

2. 下载 node 语法库

下载node语法库

下载node语法库

将node语法库打钩

3. 不要过滤node_modules文件夹!

这一步是网上很多博客没有的,但又是最关键的。因为语法库就是在来自本机和当前项目的node_modules文件夹中。

其实过滤node_modules文件夹是有一定道理的,它虽然总体积不大,每个文件体积也小,但是它文件数量巨大,特别是较大的项目,node_modules包含的文件数量多似繁星…,如果让 Webstorm 加载进来,轻则出现一小段时间软件卡顿,重则电脑长时间崩溃,当然这和电脑的性能有关。所以有一些博客可能会建议开发者特别是初学者在设置中过滤掉node_modules文件夹。

虽然加载node_modules会让电脑卡顿一段时间,但是给Webstorm足够时间,在电脑性能不会太差的情况下还是可以加载完的,换来的编程便利还是值得的。

不要过滤node_modules

然后就慢慢等待加载完毕

等待加载

加载完毕之后,如果当前项目下也有 node_modules,也会自动挂到 JavaScript Library 中

 

效果

设置后,不仅没有语法波浪线,在输入的时候已经有代码候选补全,并且按ctrl点击还能跳转查看源码

设置后不会出现波浪线,还有语法提示,还能ctrl点击查看源码

标签组件名也能补全了

标签名也能代码补全了

标签也不会出现语法背景黄色,并且还支持自定义属性参数的补全

标签属性也能补全了

  • 24
    点赞
  • 46
    收藏
    觉得还不错? 一键收藏
  • 14
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 14
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值