React常用开发调试工具

jiezi

6 年前

在开发 react 项目时，我们需要用到一些开发和调试工具来辅助，我整理了一下 4 个好用的工具。

大家在开发中应该都有用到这个工具，它是 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 报错，无法上传代码。

Prettier的中文意思是“漂亮的、机灵的”，是一个代码格式化工具，它能够解析代码，使用你自己设定的规则来保存代码。跟 eslint 不同的是，eslint是把错误提示出来，而 Prettier 是在你按下 ctrl + s 的时候，直接帮你格式化代码。

Prettier 具有以下几个有优点：

可配置化；
支持多种语言；
集成多数的编辑器；
简洁的配置项；

$ 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 一致，这样就能同步格式化代码。

React DevTools是 Chrome 的插件，可以在 Chrome 控制台查看 react 的组件结构。
安装了这个插件之后，控制台上方那一栏会显示 React 选项，然后点击左上角的定位 icon 就可以定位页面元素的组件：

可以看到控制台的组件名，选择一个组件后，右侧会显示它的子组件、相应的 className 等信息：

点击右上方的设置图标，会弹出一个设置框，可以选择Highlight Updates，然后，在每次操作页面时，最新更新的组件会高亮：

比如，下图的时间是不停更新的，页面上的该组件就会有一个高亮的框：

这在 react 开发中能够对我们有很大帮助。

这也是 Chrome 的一个插件之一，它可以让你实时的监控 Redux 的状态树的 Store，这样就可以在浏览器中实时看到state 的变化以及触发的 action。
同样的，安装之后在控制台会有 Redux 选项，选择之后就能看到如下页面，我们可以看到当前页面的所有 state 和加载页面时依次触发的action：

点击一个 action 后，可以选择 Diff 来查看这一 action 触发时，一些 state 的变化，下图可以看到 fetchRedditListPending 从true变为了false：

下方有个时间线可以自定义某个时间点，如果想要调整一个 loading 图标就可以一直定在 loading 加载时，这样就能很方便做调整啦~

选择 Test 选项之后能看到一些测试代码，如果要做测试的话，可以直接复制该代码，稍作修改即可，是不是很方便？

以上就是常用的 React 开发调试工具，希望对你有帮助！

React常用开发调试工具

1. ESLint

安装

2. Prettier

安装

3. React DevTools

4. Redux DevTool