React学习_14_常用的开发调试工具

Posted 2021-04-26 码农帮派

React开发中常用的开发调试工具：ESLint、Prettier、React DevTool、Redux DevTool

ESLint：用于做语法风格的检查

Prettier：Facebook提供的用于格式化代码的工具

React DevTool：用来调试React代码的Chrome插件

Redux DevTool：用来调试Redux代码的Chrome插件

ESLint

ESLint用于检查代码规范的问题，可以在.eslintrc文件和package.json文件中定义规范检查的规则；当前比较流行的是AirBnb提供的一整套javascript代码风格。

使用AirBnb的eslint代码风格：

npm install eslint-config-airbnb

然后需要在本地的.eslintrc文件中引入：

Prettier

需要在IDE中首先安装好Prettier插件，然后使用npm进行初始化安装：

npm install prettier

Prettier代码风格规范可以在项目根目录下的.prettierrc文件中规定：

Prettier和ESLint的不同在于，ESLint会告诉你什么地方的代码不符合规范，但不会自动修改，但Prettier会修改不符合规范的代码。

React DevTool

Chrome插件，可以帮助我们查看React组件结构树；React DevTool还可以标识出数据发生改变的时候界面发生重新render的地方，以便代码优化。

Redux DevTool

Chrome插件，可以直观的调试Redux数据的变化。还可以根据时间线恢复某个操作之前的Redux状态。Redux DevTool还可以针对特定的操作生成单元测试代码。