React常用开发调试工具

栏目: 服务器 · 发布时间: 5年前

内容简介:在开发react项目时,我们需要用到一些开发和调试工具来辅助,我整理了一下4个好用的工具。大家在开发中应该都有用到这个工具,它是安装之后,就可以在项目根目录中创建一个

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

1. ESLint

大家在开发中应该都有用到这个工具,它是 JavascriptJSX 的语法检查工具,当一个团队一起开发一个项目时,能用它保持代码风格一致。

安装

$ 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 模板,如果在代码末尾有空格就会出现提醒的红下划线,并提醒有多余空格:

React常用开发调试工具

如果定义了一个变量但是一直没有用到,也会有提醒下划线,变量还会变灰,这里的 testfoo 都是没有被使用,鼠标移到test上面,可以看到提示说:定义了单从没用到

React常用开发调试工具

除了检验普通的语法以外, eslint 还能对 react 中组件方法的声明顺序进行检查,如下图, componentWillMount 定义在了 render 方法后面,就有下划线提醒: render 应该放在 componentWillMount 后面

React常用开发调试工具

如果想要在提交代码时,阻止有代码风格不一致或者错误的代码上传,就可以在 package.json 里进行配置:

React常用开发调试工具

这样,在 git commit 之后,如果有错误或风格不一致,就会把所有有问题的文件路径都列举出来,并标明一共有多少 errorswarnings ,然后直接 commit 报错,无法上传代码。

React常用开发调试工具

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,我们在开发时可以为了方便写一行没有换行的代码:

React常用开发调试工具

保存后,会自动格式化代码:

React常用开发调试工具

配置文件中的 singleQuote 表示单引号,当设置为 false 时,输入单引号会自动保存为双引号。 tabWidth 是换行后的空格数。配置项最好设为和 eslint 一致,这样就能同步格式化代码。

3. React DevTools

React DevToolsChrome 的插件,可以在 Chrome 控制台查看 react 的组件结构。

安装了这个插件之后,控制台上方那一栏会显示 React 选项,然后点击左上角的定位 icon 就可以定位页面元素的组件:

React常用开发调试工具

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

React常用开发调试工具

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

React常用开发调试工具

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

React常用开发调试工具

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

4. Redux DevTool

这也是 Chrome 的一个插件之一,它可以让你实时的监控 Redux 的状态树的 Store ,这样就可以在浏览器中实时看到 state 的变化以及触发的 action

同样的,安装之后在控制台会有 Redux 选项,选择之后就能看到如下页面,我们可以看到当前页面的所有 state 和加载页面时依次触发的 action

React常用开发调试工具

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

React常用开发调试工具

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

React常用开发调试工具

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

React常用开发调试工具

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


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

高可用架构(第1卷)

高可用架构(第1卷)

高可用架构社区 / 电子工业出版社 / 2017-11-1 / 108.00元

《高可用架构(第1卷)》由数十位一线架构师的实践与经验凝结而成,选材兼顾技术性、前瞻性与专业深度。各技术焦点,均由极具代表性的领域专家或实践先行者撰文深度剖析,共同组成“高可用”的全局视野与领先高度,内容包括精华案例、分布式原理、电商架构等热门专题,及云计算、容器、运维、大数据、安全等重点方向。不仅架构师可以从中受益,其他IT、互联网技术从业者同样可以得到提升。一起来看看 《高可用架构(第1卷)》 这本书的介绍吧!

在线进制转换器
在线进制转换器

各进制数互转换器

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具