玩轉 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檢查規則。
玩轉 sublime3 第二彈 ES6環境