react開發環境搭建

標籤：

---恢複內容開始---

要想用react，需要安裝：

1）babel-sublime；

作用：編譯es6，支援ES6， React.js, jsx代碼高亮，並對所編譯的代碼進行高亮顯示。

安裝步驟：在github(https://github.com/ruanyf/react-babel-webpack-boilerplate)中找到babel-sublime下載壓縮檔。解壓，把babel-sublime-master檔案夾，放在Packages中。

2）配置sublime-react

作用：類似於emmet的自動擴充代碼外掛程式，可自動補全react、jsx代碼。

安裝步驟：在github（https://github.com/facebookarchive/sublime-react）中找到sublime-react，下載sublime-react-master檔案，放到Packages中。

3）修改emmet相容jsx代碼

作用：emmet 作為前端開發必備外掛程式之一非常方便快捷，通過修改預設的 sublime就可以在 jsx 檔案中快速通過 emmet 編寫自訂群組件。

使用方法：開啟 preferences -> Key bindings - Users，把下面代碼複製到[]內部。（ps:一定要把下面的代碼放在[]中，我在剛開始安裝時，以為[]沒用，就直接複製粘貼，結果出錯，找了好幾遍，才發現錯誤。）

  {      "keys": [        "super+e"      ],      "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      }]    }

 4） 安裝JSFORMAT

作用：格式化JS代碼。

安裝步驟：在github上輸入JSFORMAT，下載JsFormat-master壓縮包，解壓後放到sublime的Packages檔案夾下。

開啟preferences -> Package Settings -> JsFormat -> Setting - Users,輸入以下代碼：

{  "e4x": true,  // jsformat options  "format_on_save": true,}

即可在儲存時，對代碼進行自動格式化，並支援 jsx 類型檔案。

5）sublimelinter-jsxhint

作用：試試提示並定位代碼的語法錯誤。

安裝步驟：首先安裝node.js。

其次，全域安裝jsxhint

npm install -g jsxhint

使用：在cmd中，定位到專案檔夾，以檢查index.jsx代碼是否有語法錯誤為例。

//在cmd中輸入下述代碼後，按斷行符號。如果代碼有語法錯誤，則會在cmd/sublime中提示/定位錯誤點。
jsxhint index.jsx

缺點：無法堅持es6代碼。針對此缺點，SublimeLinter-eslint。在github中尋找並下載，將SublimeLinter-eslint-master放在sublime安裝路徑下的package檔案夾下。

以上步驟完成後，需在cmd中全域安裝eslint

npm install -g eslint

若第一次使用eslint時，需先設定一個設定檔，你可以在項目根目錄下使用 --init選項產生：

//以下步驟均定位到項目根目錄下完成，即均裝在項目根目錄裡
//若項目根目錄下沒有package.json檔案，則需初始化一個package.json
npm init   //結果：在項目跟目錄下產生一個package.json檔案

//配置.eslintrc.js
eslint --init   //會有按裝提示，根據需求進行選擇   按裝完後

              //項目根目錄中會產生一個.eslintrc.js檔案。

然後通過 Preferences->Package Settings->SublimeLinter->Settings - User 進行整合：

{    "user": {        "debug": true,//開啟 debug 選項        "delay": 0.25,        "error_color": "D02000",        "gutter_theme": "Packages/SublimeLinter/gutter-themes/Default/Default.gutter-theme",        "gutter_theme_excludes": [],        "lint_mode": "background",        "linters": {            "eslint": {                "@disable": false,                "args": [],                "excludes": []            },            "jshint": {                "@disable": false,                "args": [],                "excludes": []            },            "php": {                "@disable": false,                "args": [],                "excludes": []            }        },        "mark_style": "outline",        "no_column_highlights_line": false,        "passive_warnings": false,        "paths": {            "linux": [],            "osx": [                "/Users/wang/.nvm/versions/node/v5.0.0/bin" //設定 node 路徑            ],            "windows": []        },        "python_paths": {            "linux": [],            "osx": [],            "windows": []        },        "rc_search_limit": 3,        "shell_timeout": 10,        "show_errors_on_save": false,        "show_marks_in_minimap": true,        "syntax_map": {            "html (django)": "html",            "html (rails)": "html",            "html 5": "html",            "javascript (babel)": "javascript",            "magicpython": "python",            "php": "html",            "python django": "python",            "pythonimproved": "python"        },        "warning_color": "DDB700",        "wrap_find": true    }}

以上步驟完成後，重啟sublime即可。

以上就是我的react配置之路，配置過程有點曲折。

安裝問題點：

1）babel編譯無結果。原因是，我沒配置babel.cmd。

2）在最後全部安裝完後，用babel編譯時間，老出錯。

解決辦法：npm babel-preset-react。並在.bablerc中輸入下述代碼。

{  "presets": ["es2015","react"],  "plugins": []}

以上，純屬小白的安裝之路，僅供參考。

 

參考：Sublime Text 中配置 ESLint       http://www.jianshu.com/p/e826e13c67ec

react開發環境搭建