zoukankan      html  css  js  c++  java
  • webstorm 设置ES6语法支持以及添加vuejs开发配置

    webstorm中ES6语法配置

    当我们用webstorm打开我们所构建的elma项目中的main.js文件的时候,发现有标红的红线,原因是webstorm不支持es6语法,需要配置一下。
    这里写图片描述
    配置方法:
    打开file–>setting,做如下操作
    这里写图片描述
    如果想实现es6直接转化为es5,那么babel是个好选择。

    Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在浏览器或其他环境执行。这意味着,你可以用ES6的方式编写程序,又不用担心现有环境是否支持。
    而且你还希望每次修改代码时能自动转码,所以还要用到webstorm的file watcher(当然还有其他解决方案)
    首先要安装babel,同样也是使用npm安装

    npm install -g babel
    • 1

    这里写图片描述
    配置方式 file-settings File watcher
    这里写图片描述

    其中Program: 中填写的是babel的安装路径,其他的默认就好啦。这样就能实现ES6的语法支持以及ES6自动转换为ES5。 好了,开启第二个话题。

    webstorm支持vuejs文件

    当我们打开App.vue文件的时候,发现黑白分明啊,这说明此刻的webstorm并不支持vuejs文件,怎么办呢?还能说啥,配置呗!
    这里写图片描述

    1. webstorm安装vue插件
      当我们file —》 settings的时候,找到plugin是,在搜索框中输入vue 发现并没有vue插件,如图,点击图中的链接下载即可。
      这里写图片描述
      2.安装vue,重新启动webstorm,再次打开App.vue文件。
      这里写图片描述
      发现webstorm已经对vue文件有高亮显示啦。
      这里写图片描述

    设置webstorm的vue新建文件模板

    仅仅支持vue文件还不行,还需要当我们新建.vue文件的时候,能够创建出vue的文件,怎么做呢?
    方法:file–》settings —>file and code templates,在右侧找到vue点击,最右边设置 vue file 扩展名vue,如图:
    这里写图片描述

    这样在新建文件的时候就出现vue文件。
    这里写图片描述

    好啦,用webstorm开发vue的配置已经设置好了,可以愉快的敲代码啦。

  • 相关阅读:
    struts2乱码
    修改maven的war包生成路径
    cookie的坑
    linux jps 命令
    (转)如何使VMware ip与本机ip处于同一网段
    springboot + swagger2 学习笔记
    can not find java.util.map java.lang.Double问题
    为什么不写 @RequestParam 也能拿到参数?
    乱码问题
    PostMan的使用注意事项
  • 原文地址:https://www.cnblogs.com/Ting-log/p/9080970.html
Copyright © 2011-2022 走看看