React經常使用開發調試工具

在開發react項目時，咱們須要用到一些開發和調試工具來輔助，我整理了一下4個好用的工具。

1. ESLint

你們在開發中應該都有用到這個工具，它是Javascript和JSX的語法檢查工具，當一個團隊一塊兒開發一個項目時，能用它保持代碼風格一致。

安裝

$ npm install eslint --save-dev

安裝以後，就能夠在項目根目錄中建立一個.eslintrc文件來進行規則配置，在eslint中有不少的規則，可能本身去選擇參數配置會有遺漏，通常都是用airbnb的模板，在github上，它已經有8萬+star了。
使用airbnb的模板，要先進行如下安裝：

$ npm install eslint-config-airbnb --save-dev

而後在.eslintrc中添加配置：

{
  "extends": "airbnb",      // 這裏的extends要加上airbnb
  "parser": "babel-eslint",
  "rules": {
    "arrow-body-style": [0],
    "consistent-return": [0],
    "generator-star-spacing": [0],
    "global-require": [1],
    "import/extensions": [0],
    "import/no-extraneous-dependencies": [0],
    "import/no-unresolved": [0],
    "import/prefer-default-export": [0],
    "jsx-a11y/no-static-element-interactions": [0],
    "no-bitwise": [0],
    "no-cond-assign": [0],
    "no-else-return": [0],
    "no-nested-ternary": [0],
    "no-restricted-syntax": [0],
    "no-use-before-define": [0],
    "react/forbid-prop-types": [0],
    "react/jsx-filename-extension": [1, { "extensions": [".js"] }],
    "react/jsx-no-bind": [0],
    "react/prefer-stateless-function": [0],
    "react/prop-types": [0],   // 這些react開頭的都是針對react獨有的
    "require-yield": [1]
  }
}

（附上github連接：https://github.com/airbnb/jav...）

這是很全面的一個eslint模板，若是在代碼末尾有空格就會出現提醒的紅下劃線，並提醒有多餘空格：

若是定義了一個變量可是一直沒有用到，也會有提醒下劃線，變量還會變灰，這裏的test和foo都是沒有被使用，鼠標移到test上面，能夠看到提示說：定義了單從沒用到

除了檢驗普通的語法之外，eslint還能對react中組件方法的聲明順序進行檢查，以下圖，componentWillMount定義在了render方法後面，就有下劃線提醒：render應該放在componentWillMount後面

若是想要在提交代碼時，阻止有代碼風格不一致或者錯誤的代碼上傳，就能夠在package.json裏進行配置：

這樣，在git commit以後，若是有錯誤或風格不一致，就會把全部有問題的文件路徑都列舉出來，並標明一共有多少errors和warnings，而後直接commit報錯，沒法上傳代碼。

2. Prettier

Prettier的中文意思是「漂亮的、機靈的」，是一個代碼格式化工具，它可以解析代碼，使用你本身設定的規則來保存代碼。跟eslint不一樣的是，eslint是把錯誤提示出來，而Prettier是在你按下ctrl + s的時候，直接幫你格式化代碼。

Prettier具備如下幾個有優勢：

1. 可配置化；
2. 支持多種語言；
3. 集成多數的編輯器；
4. 簡潔的配置項；

安裝

$ npm install prettier --save-dev --save-exact

$ npm install prettier --global

因爲Prettier自己就已經內置了不少配置，因此咱們須要配置的內容就很簡潔，下面是.prettierrc的配置：

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": false,
  "singleQuote": true
}

它支持不少語言，包括HTML和CSS，咱們在開發時能夠爲了方便寫一行沒有換行的代碼：

保存後，會自動格式化代碼：

配置文件中的singleQuote表示單引號，當設置爲false時，輸入單引號會自動保存爲雙引號。tabWidth是換行後的空格數。配置項最好設爲和eslint一致，這樣就能同步格式化代碼。

3. React DevTools

React DevTools是Chrome的插件，能夠在Chrome控制檯查看react的組件結構。
安裝了這個插件以後，控制檯上方那一欄會顯示React選項，而後點擊左上角的定位icon就能夠定位頁面元素的組件：

能夠看到控制檯的組件名，選擇一個組件後，右側會顯示它的子組件、相應的className等信息：

點擊右上方的設置圖標，會彈出一個設置框，能夠選擇Highlight Updates，而後，在每次操做頁面時，最新更新的組件會高亮：

好比，下圖的時間是不停更新的，頁面上的該組件就會有一個高亮的框：

這在react開發中可以對咱們有很大幫助。

4. Redux DevTool

這也是Chrome的一個插件之一，它可讓你實時的監控Redux的狀態樹的Store，這樣就能夠在瀏覽器中實時看到state的變化以及觸發的action。
一樣的，安裝以後在控制檯會有Redux選項，選擇以後就能看到以下頁面，咱們能夠看到當前頁面的全部state和加載頁面時依次觸發的action：

點擊一個action後，能夠選擇Diff來查看這一action觸發時，一些state的變化，下圖能夠看到fetchRedditListPending從true變爲了false：

下方有個時間線能夠自定義某個時間點，若是想要調整一個loading圖標就能夠一直定在loading加載時，這樣就能很方便作調整啦~

選擇Test選項以後能看到一些測試代碼，若是要作測試的話，能夠直接複製該代碼，稍做修改便可，是否是很方便？

以上就是經常使用的React開發調試工具，但願對你有幫助！