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 开发调试工具,希望对你有帮助!


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

查看所有标签

猜你喜欢:

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

点石成金

点石成金

[美] 史蒂夫·克鲁克 / De Dream' / 机械工业出版社 / 2006-8 / 39.00元

可用性设计是Web设计中最重要也是最困难的一项任务。《点石成金》的作者根据自己多年从业的经验,剖析用户的心理,在用户使用的模式、为浏览进行设计、导航设计、主页布局、可用性测试等方面提出了许多独特的观点,并给出了大量简单、易行的可用性设计的建议。这本书短小精悍,语言轻松诙谐,书中穿插大量色彩丰富的屏幕截图、趣味丛生的卡通插图以及包含大量信息的图表,使枯燥的设计原理变得平易近人。 此书适合从事W......一起来看看 《点石成金》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

html转js在线工具
html转js在线工具

html转js在线工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具