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开发调试工具，但愿对你有帮助！