安装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环境的更多相关文章

  1. 玩转 sublime3 第一弹 文件介绍

    安装 官网下载地址:http://www.sublimetext.com/3 本文将以Windows 64 bit 进行讲解. 目录介绍 sublime默认安装之后会生成一个安装目录和数据目录: C: ...

  2. 青瓷引擎之纯JavaScript打造HTML5游戏第二弹——《跳跃的方块》Part 10(排行榜界面&界面管理)

    继上一次介绍了<神奇的六边形>的完整游戏开发流程后(可点击这里查看),这次将为大家介绍另外一款魔性游戏<跳跃的方块>的完整开发流程. (点击图片可进入游戏体验) 因内容太多,为 ...

  3. Hadoop基础-MapReduce的工作原理第二弹

    Hadoop基础-MapReduce的工作原理第二弹 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.Split(切片)  1>.MapReduce处理的单位(切片) 想必 ...

  4. es6环境中,export与import使用方法

    前言 参考自阮一峰大神的教程:http://es6.ruanyifeng.com/?search=export&x=6&y=5#docs/module#export-命令 声明:如有问 ...

  5. SOA=SOME/IP?你低估了这件事 | 第二弹

    ​        哈喽,大家好,第二弹的时间到~上文书说到v-SOA可以通过SOC.SORS和SOS来分解落地,第一弹中已经聊了SOC的实现,这部分也是国内各大OEM正在经历的阶段,第二弹,我们继续聊 ...

  6. 关于『Markdown』:第二弹

    关于『Markdown』:第二弹 建议缩放90%食用 道家有云:一生二,二生三,三生万物 为什么我的帖子不是这样 各位打工人们! 自从我学了Markdown以来 发现 Markdown 语法真的要比 ...

  7. ES6环境搭建及react-router学习

    一.起因 ES6新纳入了很多振奋人心的新特性,真的很让人忍不住去尝试一下.不过,由于现在大部分的浏览器对ES6的支持程度都不是很好.所以如果想要放心地使用一些新特性,还需要用一些工具,将ES6或者ES ...

  8. 浅谈Hybrid技术的设计与实现第二弹

    前言 浅谈Hybrid技术的设计与实现 浅谈Hybrid技术的设计与实现第二弹 浅谈Hybrid技术的设计与实现第三弹——落地篇 接上文:浅谈Hybrid技术的设计与实现(阅读本文前,建议阅读这个先) ...

  9. 前端学习 第二弹: JavaScript中的一些函数与对象(1)

    前端学习 第二弹: JavaScript中的一些函数与对象(1) 1.apply与call函数 每个函数都包含两个非继承而来的方法:apply()和call(). 他们的用途相同,都是在特定的作用域中 ...

随机推荐

  1. 消息摘要技术(MD5)

    1.使用消息摘要技术对密码加密 数据库存储的是经过消息摘要技术加密之后的信息, 避免保存密码明文,提升了系统安全性 必要性说明: 如果存储明文密码,数据库系统管理员和攻破系统的黑客是可以拿到你的所有信 ...

  2. JVM中锁优化,偏向锁、自旋锁、锁消除、锁膨胀

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcyt364 本文将简单介绍HotSpot虚拟机中用到的锁优化技术. 自旋锁 互斥同 ...

  3. 基于C语言的UTF-8中英文替换密码设计

    简要说明 本设计为湖南大学密码学的一次课程作业设计.非作业目的可随意引用. 由于本人初次接触密码学,本设计可能存在问题以及漏洞.若发现望指出. GitHub : https://github.com/ ...

  4. grunt之clean、copy

    心情不太好,正好这部分比较简单,记个流水账. ----------流水很清楚惜花这个责任,真的身份不过送运---------- clean.copy算是很重要也很简单的基本组件了. clean(V0. ...

  5. Mac上好用的视频播放器有哪些?

    首页发现话题 提问 登录加入知乎 Mac 上好用的视频播放器有哪些? 关注问题写回答 OS X 应用 多媒体播放器(软件) Mac 上好用的视频播放器有哪些? 关注者 2680 被浏览 981770 ...

  6. 软件工程HW1-四则运算软件

    题目描述 程序自动生成小学四则运算题目,用户输入每道题的答案之后,将答错的题目标出并计算此次答题的正确率. 项目链接 我的项目 项目运行截图 个人软件过程 此次开发的四个步骤: 1):需求分析 2): ...

  7. 201521123085 《Java程序设计》第8周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业 本次作业题集集合 List中指定元素的删除(题目4-1) 1.1 实验总结 要注意到在删除元素 ...

  8. 201521123074 《Java程序设计》第7周学习总结

    1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. (嗯..都画了那么久的导图,还是用导图归纳吧~) 2. 书面作业 ArrayList代码分析 1.1 解释ArrayList ...

  9. 201521123085 《JAVA程序设计》第6周学习总结

    1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 2. 书面作业 1.clone方法 1.1 Object对 ...

  10. 201521123106《java程序设计》第四周学习总结

    1. 本周学习总结 2. 书面作业 1.注释的应用使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图) 面向对象设计(大作业1-非常重要)2.1 讲故事:将在网上商 ...