React工具

1. 使用prettier插件 

目标：

学习如何配置vscode插件进行代码格式化

内容：

• prettier插件是一个代码格式化插件，可以格式化react代码

• 安装插件

• 添加prettier的配置  

// 保存的时候用使用prettier进行格式化
"editor.formatOnSave": true,
// 默认使用prittier作为格式化工具
"editor.defaultFormatter": "esbenp.prettier-vscode",
 
// 不要有分号
"prettier.semi": false,
// 使用单引号
"prettier.singleQuote": true,

总结：

• 配置prettier插件可以提高react开发效率

2. react插件的安装

目标：

• 安装 Chrome 浏览器插件react-devtools

内容：

• 安装后，只会在使用了 React 的网站中出现

3. vscode配置自动补全

目标：

配置vscode，在vscode中使用tab键可以快速生成HTML内容

内容：

无需安装额外插件，直接在设置中添加如下设置即可。

核心代码：

// 在 js 文件中启用 emmet 语法 
"emmet.includeLanguages": {
  "javascript": "javascriptreact"
},
// 按tab键展开 emmet 语法
"emmet.triggerExpansionOnTab": true,

4. redux-devtools-extension中间件

目标：能够使用chrome开发者工具调试跟踪redux状态

内容：

• redux-devtools-exension 文档

• 先给 Chrome 浏览器安装 redux 开发者工具，然后，就可以查看 Redux 状态了

步骤：

1. 安装： yarn add redux-devtools-extension

2. 从该中间件中导入 composeWithDevTools 函数

3. 调用该函数，将 applyMiddleware() 作为参数传入

4. 打开 Chrome 浏览器的 redux 开发者工具并使用

import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'
 
const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk)))
 
export default store