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状态
内容:
-
先给 Chrome 浏览器安装 redux 开发者工具,然后,就可以查看 Redux 状态了
步骤:
-
安装:
yarn add redux-devtools-extension
-
从该中间件中导入 composeWithDevTools 函数
-
调用该函数,将 applyMiddleware() 作为参数传入
-
打开 Chrome 浏览器的 redux 开发者工具并使用
import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'
const store = createStore(reducer, composeWithDevTools(applyMiddleware(thunk)))
export default store