Sublime Text 3打造開發React的環境


前言

本文是設置Sublime Text 3如何打造一個開發React的環境。主要提供了幾個功能:

  • 語法高亮度顯示
  • 語法檢查
  • 程式片段(Snippets)
  • 自動完成代碼

不過缺少了一些功能,例如HTML轉換JSX之類的,目前沒有看到有可以使用的這些外掛。就加減使用了。

2016/1/29 加上自動完成套件和(Zen Coding)Emmet支援JSX的說明

步驟一:安裝所需的模組

NPM要先安裝,node.js安裝後就有npm了。一共要裝三個模組:

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

步驟二:安裝Sublime Text 3的外掛

下面這幾套應該一般都會有裝了,沒有就裝上吧:

  1. Emmet
  2. SublimeCodeIntel
  3. SublimeLinter

要加裝的有以下幾個:

  1. SublimeLinter-contrib-eslint
  2. babel-sublime
  3. Babel Snippets

兩個設定,一個是高亮度顯示,另一個是減少其他的外掛衝突到:

  • Color Scheme: Preferences -> Color Scheme -> Babel
  • (可選的)在你的Preferences.sublime-settings加上:"ignored_packages": ["JavaScript"]

步驟三:設定 ESLint的設定檔

在專案的根目錄加一個.eslintrc檔案,檔案的內容如下:

{
  // use babel-eslint for parsing!
  "parser": "babel-eslint",
  "env": {
    // for browser
    "browser": true,
    // in CommonJS
    "node": true
  },
  // some rule options:
  "rules": {
    "quotes": [2, "single"],
    "eol-last": [0],
    "no-mixed-requires": [0],
    "no-underscore-dangle": [0]
  }
}

所有的可設定的規則在這裡

(附加說明)Emmet可以支援JSX

現在Emmet已經可以直接支援JSX。在js或jsx檔案中,用control+e展開。

影片:Emmet expansions and className in React JSX

(可選的)步驟:關閉jshint

如果你也有安裝sublime-jshint(SublimeLinter的外掛),記得要關閉它。關閉它的方法是打開專案的.sublime-project檔案,加上以下的設定值:

{

    "SublimeLinter":{
        "linters":{
            "eslint":{
                "excludes":[
                    "dist/*",
                    "node_modules/*"
                ]
            },
            "jshint":{
                "@disable":true
            }
        }
    }
}

步驟四:重開Sublime Text 3(ST3)

最後要重開ST3,才能讓剛作的所有設定正常運作。

參考資料