该主题内容的受众
为满足下方条件的开发者哈,不在该条件下的同学可以选择性
的阅读:
你在使用vscode
开发项目
项目使用的是TypeScript
🙋🏻♀️:因为目前项目中是使用React
的TSX
来做开发的,发现在添加组件时,其中props
有点多,需要不断的手动触发
提示来编写代码,有些繁琐
,后来经过和好兄弟聊天得知webstorm
这点做的非常好,在添加组件时,相关props
可以非常方便的展示出来,于是我试了一下vscode
,发现是没有这个功能的,所以就萌生了这个想法
。
幸福感提升在何处呢?我们来看demo
动图:
✋🏻 安装插件前
:
👌🏻 安装插件后
:
webstorm 效果:
可以很明显
的看出,安装插件之后,在添加一个组件
的时候,可以做到不打断添加流程
,将props
参数以一种非常符合直觉
的方式提示到你的眼前。
我们看下如果不这么提示的话
,你该怎么才能得到这个提示呢?
有两种方式:
1 、输入任意字符
,此时会根据你输入的字符,去过滤参数,再展示。
2 、手动执行 ctrl + i (command + i)
,这个命令可以基于当前光标位置给出提示建议。
方式 1
看起来是最常用
的方式,但是有一些心智成本
,需要在输入的时候先想一下我应该输入的参数是什么,比如有个参数是taskId
,你可能要先想到这个单词,再输入t
,不出意外就可以得到这个提示,或者输入id
等等,也可以得到这个提示。换个角度看,这种方式属于一种提示后置
的逻辑,即需要用户先想到一些提示词,再根据提示词过滤并展示。
方式 2
是一种最常规
的方式,其他IDE
也有类似的快捷键,我不是说这种方式不好哈~ 这种方式其实设计的很合理,因为用户在输入空格的时候是不一定想要编辑器给提示的,所以想要提示的时候使用快捷键去获取也很符合直觉,但是我会觉得还是不太方便,执行快捷键次数少还好,次数多的时候真的还是挺麻烦的,起码对我来说是这样的 hhh ,自动提示在很大程度上可以给我不少幸福感。
目前空格的这种方式我认为也是最合理的一种方式
,因为从第一个参数结束到输入第二个参数,中间本来就是需要空格来做隔离,所以即使没有提示,用户也需要输入这个空格
,所以,这个空格是必须要输入的一个字符,所以在此时给到下个要输入的提示的话,是最符合习惯的。
另外,除了在添加组件时可以更幸福一些之外
,还有就是调用方法
时,比如你要发一个请求,参数比较复杂:
可以看到,请求体的内容可以非常舒服的编写完成
,再也不需要一次一次执行快捷键啦。
另一个功能就是它可以尝试帮你补全所有必填参数:
其他的功能我暂时没有继续探索
,后面我会简单展开一下如何实现的,感兴趣的同学可以继续读下去。
插件安装地址: https://marketplace.visualstudio.com/items?itemName=xicunyang.ts-space-prompt
或者直接在vscode
的插件面板搜索: [ Enter Space Give Prompt ] 就可以搜索到啦~
安装后记得要重启一下vscode
让该插件生效哈。
插件的github
地址: https://github.com/xicunyang/ts-space-prompt
1
K1W1 363 天前
不错,挺好的
|
2
showgood163 363 天前
有意思,准备尝试一下
|
3
zhiyu1998 363 天前
支持一下
|
4
mutou945ya OP |
5
auh 362 天前
人机交互的一小步,效率提升的一大步。
|
6
mutou945ya OP @auh 哈哈哈哈哈~
|
7
mmx12138 361 天前
Codeium
|
8
mmx12138 361 天前
Codeium 可以试试这个 免费
|
9
mutou945ya OP |