开发技巧
1. npm 使用别名
在项目中使用别名的方式，安装同一个 npm 包的不同版本
npm install <alias>@npm:<name>
2. react 的错误边界
为项目添加 错误边界 ，能够在界面 crash 后自定义崩溃的兜底页面，提供更好的 UX。
我个人更推荐使用 react-error-boundary 库，它提供了错误边界的简单封装，支持作为组件引入和作为高阶函数（HOC）引入。
语言的真正强大之处, 并不在于语言本身，而是其生态。
3. 查看常见库的替代品
https://www.libhunt.com/ 这个网站能够输入的库名对应的替代开源项目。非常适合在老项目改造过程中使用。
4. 如何批量自定义文件导出
webpack 中的 require.context 方法能够将特定文件夹下的文件，按照自定的方法导出。
举个 🌰
我们希望 Components 文件夹下的文件都已 大驼峰 的格式导出，并添加指定前缀。
5. vscode 扩展
yeoman 一个搭建 vscode 扩展的脚手架
6. figma 中创建 Component
figma 中如何创建具有多个 prop 的 Component ？ 首先将其变体统统罗列出来（复制）然后选中，点击 combine as variants 这样就能得到新的 「组件」。 具体可见：Youtube 这其中暗藏一个小规则：这些变体的名称可以用来快速创建 prop 的值。
v1,v2会被转化成property1=v1, property2=v2；k1=v1,k2=v2会被转化成k1=v1,k2=v2（默认为字符串类型）k1=true,k2=v2，k1 会被识别为布尔类型。
工具推荐
- vscode 插件 GistPad
github 的 gist 功能是用于存放和分享代码片段的平台。GistPad 能够在 IDE 中访问 github gist ，从而更好地使用这些代码片段，个人觉得非常方便。
- Chorme 的 snippet
类似 gist ，如果你经常在 Chrome console 里输入一些重复的指令。可以考虑将他们创建为 Chrome console snippets 从而更好地调用，
- Alfred 的 workflow
如果你和我一样，需要在多个文件夹下切换打开 vscode，可以试试这个 workflow ，能够大大节约打开仓库的时间。