写storybook时报错 preview hooks及Webstorm与VS Code的全方位比较

描述

其实是个小错误，就是怎么也想不通，还以为hooks不能直接写story，想想也不对啊，难道只是不支持useContext吗？

之所以有这个想法是之前在使用react-three-fiber时遇到的一个BUG，redux的数据是不能在一个 canvas组件中通过useSelector等API拿到的，所以在这里想当然想偏了。

错误是这样的：

Storybook preview hooks can only be called inside decorators and story functions.

解决

其实是使用VSCode时他的智能提示引入的API出错了。这里我使用到了useState，然而他是从:

import { useEffect } from "@storybook/addons";

而正是引入方式的不同才导致的刚刚所描述的问题。

说一下编辑器

最近捡起来WebStorm去做一下Vue Composition API的学习，因为看webstorm 2020.1版本宣传的还挺好的。所以对比一下使用webStorm和vscode开发下来的感受。

1. 首先是启动速度和运行流畅度，一个是IDE一个是编辑器，对于我8+128G的7代I5小苏菲来说，vscode使用起来自然是更流畅些，打开速度webstorm差不多是VScode的两倍左右（包括扩展），而且使用过程中webstorm也会有崩溃几秒的情况。不过这一点webstorm锅不大，我的电脑配置也背一半。
2. 接着是JS应用的开发体验，这一点可以说webstorm完虐vscode，无论是依赖引入，依赖检查，智能提示，webstorm都要好很多。
3. 然后是Vue的应用开发体验，当初也是奔着这一点上手的webstorm 2020.1，可能是还在基于vue2和VCA做，体验并没有想象中那么顺利，甚至有些地方还不如vetur做的好。不过无需配置就能提高vue文件的模板标签配合还是很方便的，总体来说是要优于vscode，但是差距不大。
4. 再然后是React应用的开发体验，因为React一直在写TSX，这里只能说体验相较于VsCode还是差点事的，无论是TS的智能补全，依赖引入，webStorm做的都没有VsCode的准确率高。可能jsx开发WebStorm会更好一点吧。
5. 最后是配置等其他问题，首先WebStorm插件基本都帮你装好了，这一点体验是优于VSCode的，因为像vetur，Bracket Pair Colorizer，Prettier，Colorize这样优秀的插件都是要自己找自己装的，少不留心还可能装了一堆废物插件，这里点名http snip之类的插件。所以这方面来说webStorm确实要省心一些，但是也有一个明显的缺陷，毕竟东西不是自己喜欢而去配置的，有些时候会被约束了手脚。

最后，因为最近都在基于TS进行开发，所以这里还是更倾向于使用vscode，一方面基于TS的开发它的表现是略优于webstorm的，另一方面他的灵活配置和轻量级确实是目前的我很喜欢的。