React常用开发调试工具

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

内容简介:在开发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 开发调试工具,希望对你有帮助!


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

查看所有标签

猜你喜欢:

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

云经济学

云经济学

乔·韦曼 (Joe Weinman) / 人民邮电出版社 / 2014-7-1 / CNY 75.00

在云计算日益成熟的今天,“接入而非拥有”的理念不断为人们所理解和接受。 《云经济学》阐述了“云经济学”不是经济理论中深奥的数学模型,而是技术革命的生动概括。“灵活的云计算能够有效提升企业的商业价值”则是本书的核心理念。 《云经济学——企业云计算战略与布局》从商业、金融及经济的视角解释了云经济的潜在原理,并通过易于理解的案例阐述了云计算是如何创造出综合价值的。无论你是供应商、零售商、服务......一起来看看 《云经济学》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

SHA 加密
SHA 加密

SHA 加密工具