该文章内容的受众为满足下方条件的开发者哈，不在该条件下的同学可以选择性的阅读：
你在使用
vscode开发项目项目使用的是
TypeScript
❓：为什么会做这个插件呢？
🙋🏻♀️：因为目前项目中是使用React的TSX来做开发的，发现在添加组件时，其中props有点多，需要不断的手动触发提示来编写代码，有些繁琐，后来经过和好兄弟聊天得知webstorm这点做的非常好，在添加组件时，相关props可以非常方便的展示出来，于是我试了一下vscode，发现是没有这个功能的，所以就萌生了这个想法。
幸福感提升在何处呢？我们来看demo动图：
✋🏻 安装插件前：
👌🏻 安装插件后：
webstorm效果:
可以很明显的看出，安装插件之后，在添加一个组件的时候，可以做到不打断添加流程，将props参数以一种非常符合直觉的方式提示到你的眼前。
我们看下如果不这么提示的话，你该怎么才能得到这个提示呢？
有两种方式：
1、输入任意字符，此时会根据你输入的字符，去过滤参数，再展示。
2、手动执行 ctrl + i (command + i)，这个命令可以基于当前光标位置给出提示建议。
方式1看起来是最常用的方式，但是有一些心智成本，需要在输入的时候先想一下我应该输入的参数是什么，比如有个参数是taskId，你可能要先想到这个单词，再输入t，不出意外就可以得到这个提示，或者输入id等等，也可以得到这个提示。换个角度看，这种方式属于一种提示后置的逻辑，即需要用户先想到一些提示词，再根据提示词过滤并展示。
方式2是一种最常规的方式，其他IDE也有类似的快捷键，我不是说这种方式不好哈~ 这种方式其实设计的很合理，因为用户在输入空格的时候是不一定想要编辑器给提示的，所以想要提示的时候使用快捷键去获取也很符合直觉，但是我会觉得还是不太方便，执行快捷键次数少还好，次数多的时候真的还是挺麻烦的，起码对我来说是这样的hhh，自动提示在很大程度上可以给我不少幸福感。
目前空格的这种方式我认为也是最合理的一种方式，因为从第一个参数结束到输入第二个参数，中间本来就是需要空格来做隔离，所以即使没有提示，用户也需要输入这个空格，所以，这个空格是必须要输入的一个字符，所以在此时给到下个要输入的提示的话，是最符合习惯的。
另外，除了在添加组件时可以更幸福一些之外，还有就是调用方法时，比如你要发一个请求，参数比较复杂：
可以看到，请求体的内容可以非常舒服的编写完成，再也不需要一次一次执行快捷键啦。
另一个功能就是它可以尝试帮你补全所有必填参数:
其他的功能我暂时没有继续探索，后面我会简单展开一下如何实现的，感兴趣的同学可以继续读下去。
插件安装地址：marketplace.visualstudio.com/items?itemN...
或者直接在vscode的插件面板搜索：Enter Space Give Prompt 就可以搜索到啦~
安装后记得要重启一下vscode让该插件生效哈。
下面是一些实现思路，不感兴趣的同学读到这里就好啦~
实现思路
1、需求来自上周的一次讨论
好兄弟发现在
webstorm上可以非常完美的实现我们之前对的一个效果：props过多的时候，vscode提示的不太友好，然后就抽时间简单的了解了一下vscode种实现代码提示的逻辑，大致如下：
- 启用
typescript-language-features插件 - 插件内监听输入
- 判断输入的字符是否需要触发提示
- 构造
completionInfo方法需要的参数 - 请求
TsServer的completionInfo方法 - 得到提示
response - 分析
response，构造vscode的提示弹窗类型的数据 - 返回提示框数据，就可以展示提示框了
所以，我们这次主要的修改点就是在3、4这两点上。
经过一通debug，发现修改一些参数就可以比较好的实现空格提示的效果，开心了一阵，后面又发现其他的一个比较棘手的问题：
我们这次修改的代码已经就是vscode的插件了，我们无法再写一个插件来修改这个官方插件的功能
这个问题想了两天，期间萌生了一个类似游戏外挂的方式来实现这个效果，就是：写一个脚本，找到vscode安装包所在的位置，修改安装包里的 typescript-language-features 这个插件的编译后的产物的部分代码。
我本地试了一下，没什么问题，是可以实现这个效果的，但是，这毕竟是一个极其trick的方式，每次vscode有升级，这个改动就会失效，也不便后期维护。
基于这个想法，又想到是不是可以考虑将这段外挂脚本维护在一个vscode插件里呢？在vscode每次启动时运行我的插件，插件里执行这段脚本，岂不是可以完美的避开后期维护的成本呢？
简单写了一个demo试了一下，发现在vscode插件里去执行脚本是缺失权限的，我们也能很好的理解嘛，肯定是不可以随便的执行三方脚本的，不然安全问题就太大了。
最后还是决定fork一份官方的插件代码，修改部分逻辑，然后再发布出来，所以就有了这款插件，其中百分之99%的代码还是 typescript-language-features 的代码，我只修改了其中一些参数+不同平台的适配，这样也有一些好处：
易维护：后续vscode升级的话，几乎不影响该功能方便使用：启用、禁用、卸载会比较方便易分发：走插件发布逻辑，易分发
如果你感兴趣可以看一下源代码：
插件的github地址：github.com/xicunyang/t...