webstorn中的vue文件识别es6代码

1.webstorm中es6语法报错,解决方法:

打开 Settings => Languages & Frameworks => Javascript
把 Javascript Language version 改为 ECMAScript 6

这样做所有的.js文件中es6不再报错,但是.vue文件中es6语法依然报错。

2.  .vue文件中es6语法报错

(1)打开 Settings => File Types 找到 HTML 添加 *.vue

这样vue文件就相当于html文件,可以编辑css,js,也都有智能提示。但是,在.vue文件中es6语法还是报错。

(2).粗暴:直接在<script>标签中添加type="text/ecmascript-6",.vue里面的代码会高亮并支持ES6。

(3).将script标签添加 type=”es6” 属性

<script type="es6">
</script>

然后打开 Settings => Language Injections 添加 XML Tag Injection,内容如下图。

3.补充新功能:右键新建时出现.vue文件类型,就像新建html文件一样,方法:

Setting-Editor-File and Code Templates 点击右上角的加号 添加vue文件 Name为vue File, Extension 为vue,下面的位置可以填写自定义的初始化模板内容。

点击OK 返回,在项目中新建会出现vue文件 webstorm配置新建vue文件完成。

原文地址:http://www.cnblogs.com/chenguangliang/p/6433462.html

webstorn中的vue文件识别es6代码的更多相关文章

  1. 在webstrorm中配置好es6 babel【更新:在webstorm中配置.vue和.vue文件中支持es6】

    第一步:全局安装babel-cli npm install -g babel-cli 第二步,新建一个空项目,在 WebStorm 中的当前项目中打开 Terminal,进入项目的根目录下, 安装 E ...

  2. Vue.js源码中大量采用的ES6新特性介绍:模块、let、const

    1 关于ES6      ECMAScript6(以下简称ES6)是JavaScript语言的最新一代标准,发布于2015年6月,因为ECMA委员会决定从ES6起每年更新一次标准,因此ES6被改名为E ...

  3. 在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示

    在vue项目中使用codemirror插件实现代码编辑器功能(代码高亮显示及自动提示) 1.使用npm安装依赖 npm install --save codemirror; 2.在页面中放入如下代码 ...

  4. Sumblime Text3中使用vue-cli创建vue项目,代码不高亮,解决

    问题如下:在Sumblime Text3中打开vue-cli常见的项目,代码一片灰色 解决如下: 第一步:下载文件Vue components  链接 GitHub - vuejs/vue-synta ...

  5. 如何在webpack开发中利用vue框架使用ES6中提供的新语法

    在webpack中开发,会遇到一大推问题,特别是babel6升级到babel7,要跟新一大推插件,而对于安装babel的功能就是在webpack开发中,vue中能够是用ES6的新特性: 例如ES6中的 ...

  6. atom中开发vue常用插件

    atom: 开发利器,界面友好,配色出色,好用的插件众多. language-vue: 这个是首推,因为它就是为vue而生的呀,支持很多vue里的提示.在空的vue页面敲tem,vue模板的提示就自动 ...

  7. Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏

    Vue+WebSocket+ES6+Canvas 制作「你画我猜」小游戏 转载 来源:jrainlau 链接:https://segmentfault.com/a/1190000005804860 项 ...

  8. 011 webpack中使用vue

    一:在webpack中使用vue 1.安装vue的包 2.index.html <!DOCTYPE html> <html lang="en"> <h ...

  9. render方法渲染组件和在webpack中导入vue

    使用component注册的组件div容器里可以放多个,但是使用render的只能放一个 <div id="app"> <p>我可以放两个</p> ...

随机推荐

  1. DP Intro - Tree POJ2342 Anniversary party

    POJ 2342 Anniversary party (树形dp 入门题) Anniversary party Time Limit: 1000MS   Memory Limit: 65536K To ...

  2. 白话SpringCloud | 第八章:分布式配置中心的服务化及动态刷新

    前言 上一章节,简单介绍了分布式配置中心Spring Cloud Config的使用.同时,我们也遗漏了一些问题,比如如何配置实时生效,当服务端地址变更或者集群部署时,如何指定服务端地址?回想,在服务 ...

  3. 用DebuggerDisplay在Visual Studio的调试器中定制类的显示方式

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:用DebuggerDisplay在Visual Studio的调试器中定制类的显示方式.

  4. python数据处理

    1.数据清洗 1.1 数据格式化 数据格式化是数据清洗常见的形式之一,就是将可读性差的或无法阅读的数据转换成可读性较强的数据格式. python对字符串和数字都有格式化的方法,如%s, %d分别代表格 ...

  5. IDEA安装及破解永久版教程————鹏鹏

    ---恢复内容开始--- 首先我们先来介绍下什么是IDEA? IDEA 全称 IntelliJ IDEA,是java编程语言开发的集成环境.IntelliJ在业界被公认为最好的java开发工具之一,尤 ...

  6. uva 10635 LCS转LIS

    这道题两个数组都没有重复的数字,用lcs的nlogn再适合不过了 #include <iostream> #include <string> #include <cstr ...

  7. 采用 ITextPDF 类库测试向 PDF 中加入图片的示例

    package com.smbea.image; import com.artup.util.image.ImageUtil; import com.itextpdf.text.*; import c ...

  8. less自动编译 VScode 开发工具配置

    1.首先在vscode商店下载EasyLess插件,安装 2.在VS Code项目中,有一个.vscode的文件夹,找里面的settings.json文件(或者在文件-首选项-设置-搜索setting ...

  9. arcgis 10.2 安装教程(含下载地址)

    http://jingyan.baidu.com/article/fc07f98911b66912ffe5199b.html 2013年7月,Esri即将推出全新的版本——ArcGIS 10.2,那些 ...

  10. IntelliJ、ReSharper 6折 加入慧都“惊喜惠”

    慧都2013岁末回馈惊喜不断!著名的软件开发公司JetBrains旗下所有产品加入"惊喜惠"活动环节, JAVA IDE——IntelliJ IDEA,.NET效率工具集——ReS ...