玩转 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检查规则。