Sublime Text 3打造開發React的環境

Eddy2016-01-26標籤: React, Sublime Text 3點擊數: 19662

View Comments

前言

本文是設置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的外掛

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

要加裝的有以下幾個：

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

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，才能讓剛作的所有設定正常運作。