前言

Webpack+React+ES6無疑是目前最火熱的開發模式了，為了與時俱進，開始對它進行探索和學習。工欲善其事必先利其器，眾所周知，ES6和JSX都是新的語法，而目前的Sublime2已經力不從心了，作為Sublime的忠實粉絲，換IDE又得重新適應，於是折騰了一番，升級Sublime3，不斷找相應外掛，這裡給大家分享一下必備的語法高亮、格式化、jsx的htlm自動補全、es6語法檢查外掛和安裝時遇到的坑。

1.下載Sublime3

2.安裝Package Control

離線安裝：

1.把下載好的zip包解壓，重新命名為Package Control。

2.開啟Sublime3，選單->Preferences->Browse Packages…然後複製Package Control資料夾到該目錄。

3.重啟Sublime3,如果選單->Preferences有Package Setting和Package Control就說明安裝成功。

4.Ctrl+Shift+p輸入install選中Install Package回車就可以安裝外掛。

3.安裝外掛

Babel
Sublime3才有的外掛，支援ES6、JSX語法高亮。

選單->View->Syntax->Open all with current extension as…->Babel->JavaScript(Babel) 高亮了有木有。

JsFormat
剛開始在JSX檔案格式化後慘不忍睹，其實配置一個屬性就可以支援JSX語法格式化。

選單->Preferences->Package Settings->JsFormat->Settings-User加入以下程式碼

{
  "e4x": true,//支援jsx格式化
  "format_on_save": true//儲存立即格式化，看個人喜好
} 

Emmet
這個html標籤自動補全的神外掛相信很多人都用上了，非常便捷，現在可以通過配置實現JSX的html內容自動補全。

安裝完Emmet後會自動安裝一個PyV8的依賴外掛，但網路不穩定會失敗，可以通過自行下載。

下載完後新建一個PyV8資料夾，把下載的包解壓到該資料夾中，放到 C:\Users\yourname\AppData\Roaming\Sublime Text 3\Installed Packages下，與Emmet同一個資料夾下（Emmet安裝完是在Installed Packages下而不是Packages） 。

選單->Preferences->Key Bindings - User加上以下程式碼（keys就是觸發自動補全的按鍵，可自定義）

[{
  "keys": [
    "tab"
  ],
  "args": {
    "action": "expand_abbreviation"
  },
  "command": "run_emmet_action",
  "context": [{
    "key": "emmet_action_enabled.expand_abbreviation"
  }]
}, {
  "keys": ["tab"],
  "command": "expand_abbreviation_by_tab",
  "context": [{
    "operand": "source.js",
    "operator": "equal",
    "match_all": true,
    "key": "selector"
  }, {
    "key": "preceding_text",
    "operator": "regex_contains",
    "operand": "(\\b(a\\b|div|span|p\\b|button)(\\.\\w*|>\\w*)?([^}]*?}$)?)",
    "match_all": true
  }, {
    "key": "selection_empty",
    "operator": "equal",
    "operand": true,
    "match_all": true
  }]
}]

看下效果：

自動補全的是className而不是class，so far so good!

（坑：網上有些教程是說複製PyV8資料夾到Packages，當按tab鍵，死活無效，這時ctrl+`看Sublime3的控制檯報了這個錯誤：

AttributeError: ‘module’ object has no attribute ‘JSContext’

被折騰了很久才知道PyV8必須要和Emmet同目錄。）

程式碼檢查
1.首先安裝SublimeLinter、SublimeLinter-jshint、SublimeLinter-jsxhint、SublimeLinter-contrib-eslint外掛。

2.然後命令列全域性安裝

npm install -g eslint
npm install -g babel-eslint
npm install -g eslint-plugin-react
npm install -g jsxhint

3.以ES6語法檢查為例，在專案工程根目錄新建.eslintrc,輸入

{
"parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
        "jsx": true
    }
},
"rules": {
    "semi": ["error", "always"]
    }
}

4.開啟Sublime3，選單->Tools->SublimeLinter->Toggle Linter…就可以開啟js、jsx、es6檢查規則。注意：當使用es6開發時務必把jshint關掉，否則報一堆警告錯誤。

總結

到此基本可以歡樂地用Sublime開擼ES6和ReactJs了。