1. 程式人生 > >玩轉 sublime3 第二彈 ES6環境

玩轉 sublime3 第二彈 ES6環境

語法高亮 菜單 文件的 支持 插件 必須 win sem babel

安裝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環境