webstorm添加vue模板支持

在 Vue 中,可以利用一个 .vue 文件实现组件化,而不需要对每个组件分别建立 style, scripts 和 view。
这样做的好处是使组件能更加直观,而坏处是目前有些 editor 对 .vue 的语法支持还是不太好。
我用 Atom 写 .vue 的时候,<style> 的那一块并不能自动补全。不过我个人不依赖 css 的补全,所以没有太大的影响。如果你比较依赖这个,建议你还是把这些代码分离出来。

引用自djyde博客-vuejs-and-webpack-3
Atom没用过,我是webstorm的死忠,所以还是可以so easy的添加对.vue的提示支持;
默认情况编辑器会把.vue文件作为.txt文件的提示方式处理,这对开发纵然是不便利的;乍一看.vue文件的编写结构

  • <style>css-样式
  • <template>html-模板
  • <script>js-脚本

这是什么?这不就是一个内联样式带有JS脚本的html文件吗!
通过webstorm中的File Types配置 将.vue格式的文件注册为HTML文件类型,这样html中的代码提示也会被用到.vue上;
设置演示:



 
演示动画

2016-6-29更新:

  1. 这两个月有两款vue的插件可以在ws上使用,一款叫vue-for-idea 一款就叫vue;不过有个问题 我建议大家升级到ws2016版本 不然插件容易出问题;
  2. 再一个就是es6语法报错的问题,大家在设置中找javascript 在framework里将其设定为ECMAScript6.0即可

2016-10-12更新:
评论区童鞋反馈vue-for-idea无法在idea的plugin资源中搜索到。因为已经被移除了,可能是被反馈用着不好?看作者也很久没有todo了



作者:懒先森
链接:https://www.jianshu.com/p/142dae4f8b51
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

猜你喜欢

转载自110shen110.iteye.com/blog/2419919