玩转 sublime3 第二弹 ES6环境

Posted 2020-10-09

安装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检查规则。