玩转 sublime3 第二弹 ES6环境
安装node:
node作为JS的运行环境必须安装
文件下载:https://nodejs.org/dist/v6.11.4/node-v6.11.4-x64.msi
备注:可以去官网 https://nodejs.org/en/ 获取最新的版本
安装完node之后NPM也会被安装,NPM:node包管理工具
安装babel插件
Sublime3才有的插件,支持ES6、JSX语法高亮。
安装Babel Snippets插件
定义了React快捷输入模版
安装JsFormat插件
配置使其支持JSX语法格式化。
{
"e4x": true,//支持jsx格式化
"format_on_save": true//保存立即格式化,看个人喜好
}
安装node插件
node插件可以在sublime中运行js脚本
修改Nodejs.sublime-build文件的配置为如下
{
"cmd": ["node", "$file"],
"file_regex": "^[ ]*File \"(...*?)\", line ([0-9]*)",
"selector": "source.js",
"shell": true,
"encoding": "GBK",
"windows":
{
"shell_cmd": "taskkill /f /im node.exe >nul 2>nul & node $file"
}
}
代码检查
安装SublimeLinter插件
它的作用是检查代码语法是否有错误
JS语法检查需要安装SublimeLinter-jshint插件
SublimeLinter-jshint 是基于 nodeJS 下的 jshint 的插件,实际上 SublimeLinter-jshint 调用了 nodeJS 中 jshint 的接口来进行语法检查的。
所以需要安装jslint的node包:npm install -g jshint
JSX语法检查需要安装SublimeLinter-jsxhint插件
SublimeLinter-jshint 是基于 nodeJS 下的 jsxhint 的插件,实际上 SublimeLinter-jsxhint 调用了 nodeJS 中 jsxhint 的接口来进行语法检查的。
所以需要安装jsxhint的node包:npm install -g jsxhint
Css语法检查需要安装SublimeLinter-csslint
SublimeLinter-csslint 也是基于 nodeJS 下的 csslint 的插件,实际上 SublimeLinter-csslint 调用了 nodeJS 中 csslint 的接口来进行语法检查的。
所以需要安装csslint的node包:npm install -g csslint
安装SublimeLinter-contrib-eslint插件
eslint可以支持js、jsx、es6(es2015)等代码的检测
需要安装node依赖包:
npm install eslint -g
npm install babel-eslint -g
在项目工程根目录新建.eslintrc,输入
{
"env": {
"browser": true,
"node": true,
"es6": true
},
"parser": "babel-eslint",
"ecmaFeatures": {
"jsx": true
},
"rules": {
"semi": [2, "always"],
"quotes": [2, "single"]
}
}
在subime菜单->Tools->SublimeLinter->Toggle Linter…就可以打开js、jsx、es6检查规则。
注意:当使用es6开发时务必把jshint关掉,否则报一堆警告错误。
玩转 sublime3 第二弹 ES6环境的更多相关文章
- 玩转 sublime3 第一弹 文件介绍
安装 官网下载地址:http://www.sublimetext.com/3 本文将以Windows 64 bit 进行讲解. 目录介绍 sublime默认安装之后会生成一个安装目录和数据目录: C: ...
- 青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 10(排行榜界面&界面管理)
继上一次介绍了<神奇的六边形>的完整游戏开发流程后(可点击这里查看),这次将为大家介绍另外一款魔性游戏<跳跃的方块>的完整开发流程. (点击图片可进入游戏体验) 因内容太多,为 ...
- Hadoop基础-MapReduce的工作原理第二弹
Hadoop基础-MapReduce的工作原理第二弹 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Split(切片) 1>.MapReduce处理的单位(切片) 想必 ...
- es6环境中,export与import使用方法
前言 参考自阮一峰大神的教程:http://es6.ruanyifeng.com/?search=export&x=6&y=5#docs/module#export-命令 声明:如有问 ...
- SOA=SOME/IP?你低估了这件事 | 第二弹
哈喽,大家好,第二弹的时间到~上文书说到v-SOA可以通过SOC.SORS和SOS来分解落地,第一弹中已经聊了SOC的实现,这部分也是国内各大OEM正在经历的阶段,第二弹,我们继续聊 ...
- 关于『Markdown』:第二弹
关于『Markdown』:第二弹 建议缩放90%食用 道家有云:一生二,二生三,三生万物 为什么我的帖子不是这样 各位打工人们! 自从我学了Markdown以来 发现 Markdown 语法真的要比 ...
- ES6环境搭建及react-router学习
一.起因 ES6新纳入了很多振奋人心的新特性,真的很让人忍不住去尝试一下.不过,由于现在大部分的浏览器对ES6的支持程度都不是很好.所以如果想要放心地使用一些新特性,还需要用一些工具,将ES6或者ES ...
- 浅谈Hybrid技术的设计与实现第二弹
前言 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 浅谈Hybrid技术的设计与实现第三弹——落地篇 接上文:浅谈Hybrid技术的设计与实现(阅读本文前,建议阅读这个先) ...
- 前端学习 第二弹: JavaScript中的一些函数与对象(1)
前端学习 第二弹: JavaScript中的一些函数与对象(1) 1.apply与call函数 每个函数都包含两个非继承而来的方法:apply()和call(). 他们的用途相同,都是在特定的作用域中 ...
随机推荐
- 常用Dos操作指令
1 dir 无参数:查看当前所在目录的文件和文件夹. /s:查看当前目录已经其所有子目录的文件和文件夹. /a:查看包括隐含文件的所有文件. /ah:只显示出隐含文件. /w:以紧凑方式(一行显示5个 ...
- 使用js jquery分别获取地址栏参数值
使用JS获取地址栏参数 方法一: function GetQueryString(name) { var reg = new RegExp("(^|&)"+ name +& ...
- websocket实现简单聊天程序
程序的流程图: 主要代码: 服务端 app.js 先加载所需要的通信模块: var express = require('express'); var app = express(); var htt ...
- Google的SPDY协议成为HTTP 2.0的基础
详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt384 据TNW援引 IFTF HTTP 工作组主席 Mark Notting ...
- Maven(二)Maven项目的创建(命令、myeclipse)及生命周期
上一篇给大家介绍了Maven的概念和仓库的一些信息,接下来给大家分享一下使用命令和MyEclipse创建Maven项目 一.使用命令管理Maven项目 1.1.创建Maven java项目 1)创建一 ...
- grunt之watch续
上一回没有说完,我就是这样,做之前心中波澜壮阔,锦绣山河,等画完小草开始烦躁,完成鲜花出现动摇,然后心神涣散,最后虎头蛇尾. 现在弥补下之前遗漏的问题. watch(V0.6.1)的tasks和opt ...
- Java 关于路径
在eclipse中如果没有指名文件的路径的话,系统默认是与src同一级别的目录路径!
- 201521123107 《Java程序设计》第9周学习总结
第9周作业-异常 1.本周学习总结 2.书面作业 本次PTA作业题集异常 1.常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什么异常.需要捕获吗(为什 ...
- Java中继承与多态
Java类的继承继承的语法结构: [修饰符列表] class 子类名 extends 父类名{ 类体; }子类就是当前这个类,父类就是我们要复用的那个类java中只支持单继承 ...
- 201521123026 《Java程序设计》第4周学习总结
1. 本章学习总结 尝试使用思维导图总结有关继承的知识点 使用常规方法总结其他上课内容 1.类的重写:在子类中重写的方法需要和父类被重写的方法具有相同的方法名.参数列表以及返回值类型.当子类重写父类的 ...