V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
mutou945ya
V2EX  ›  分享创造

一个提升小幸福感的 VSCode 插件(输入空格时自动给到代码提示)

  •  1
     
  •   mutou945ya · 2023-11-29 20:40:55 +08:00 · 2270 次点击
    这是一个创建于 378 天前的主题,其中的信息可能已经有所发展或是发生改变。

    该主题内容的受众为满足下方条件的开发者哈,不在该条件下的同学可以选择性的阅读:

    1. 你在使用vscode开发项目

    2. 项目使用的是TypeScript


    ❓:为什么会做这个插件呢?

    🙋🏻‍♀️:因为目前项目中是使用ReactTSX来做开发的,发现在添加组件时,其中props有点多,需要不断的手动触发提示来编写代码,有些繁琐,后来经过和好兄弟聊天得知webstorm这点做的非常好,在添加组件时,相关props可以非常方便的展示出来,于是我试了一下vscode,发现是没有这个功能的,所以就萌生了这个想法

    幸福感提升在何处呢?我们来看demo动图:

    ✋🏻 安装插件

    ezgif-4-73afc4d1cc.gif

    👌🏻 安装插件

    ts-props.gif

    webstorm 效果:

    webstorm.gif

    可以很明显的看出,安装插件之后,在添加一个组件的时候,可以做到不打断添加流程,将props参数以一种非常符合直觉的方式提示到你的眼前。

    我们看下如果不这么提示的话,你该怎么才能得到这个提示呢?

    有两种方式:

    1 、输入任意字符,此时会根据你输入的字符,去过滤参数,再展示。

    2 、手动执行 ctrl + i (command + i),这个命令可以基于当前光标位置给出提示建议。

    方式 1看起来是最常用的方式,但是有一些心智成本,需要在输入的时候先想一下我应该输入的参数是什么,比如有个参数是taskId,你可能要先想到这个单词,再输入t,不出意外就可以得到这个提示,或者输入id等等,也可以得到这个提示。换个角度看,这种方式属于一种提示后置的逻辑,即需要用户先想到一些提示词,再根据提示词过滤并展示。

    方式 2是一种最常规的方式,其他IDE也有类似的快捷键,我不是说这种方式不好哈~ 这种方式其实设计的很合理,因为用户在输入空格的时候是不一定想要编辑器给提示的,所以想要提示的时候使用快捷键去获取也很符合直觉,但是我会觉得还是不太方便,执行快捷键次数少还好,次数多的时候真的还是挺麻烦的,起码对我来说是这样的 hhh ,自动提示在很大程度上可以给我不少幸福感。

    目前空格的这种方式我认为也是最合理的一种方式,因为从第一个参数结束到输入第二个参数,中间本来就是需要空格来做隔离,所以即使没有提示,用户也需要输入这个空格,所以,这个空格是必须要输入的一个字符,所以在此时给到下个要输入的提示的话,是最符合习惯的。

    另外,除了在添加组件时可以更幸福一些之外,还有就是调用方法时,比如你要发一个请求,参数比较复杂:

    func-gif.gif

    可以看到,请求体的内容可以非常舒服的编写完成,再也不需要一次一次执行快捷键啦。

    另一个功能就是它可以尝试帮你补全所有必填参数:

    fill-all.gif

    其他的功能我暂时没有继续探索,后面我会简单展开一下如何实现的,感兴趣的同学可以继续读下去。

    插件安装地址: https://marketplace.visualstudio.com/items?itemName=xicunyang.ts-space-prompt

    或者直接在vscode的插件面板搜索: [ Enter Space Give Prompt ] 就可以搜索到啦~

    安装后记得要重启一下vscode让该插件生效哈。

    插件的github地址: https://github.com/xicunyang/ts-space-prompt

    实现思路: https://juejin.cn/post/7290034121011560500

    9 条回复    2023-12-02 14:40:41 +08:00
    K1W1
        1
    K1W1  
       2023-11-29 23:00:25 +08:00
    不错,挺好的
    showgood163
        2
    showgood163  
       2023-11-30 00:00:20 +08:00
    有意思,准备尝试一下
    zhiyu1998
        3
    zhiyu1998  
       2023-11-30 08:36:22 +08:00
    支持一下
    mutou945ya
        4
    mutou945ya  
    OP
       2023-11-30 19:36:47 +08:00
    @K1W1 @showgood163 @zhiyu1998
    感谢使用~
    auh
        5
    auh  
       2023-12-01 13:56:45 +08:00
    人机交互的一小步,效率提升的一大步。
    mutou945ya
        6
    mutou945ya  
    OP
       2023-12-01 15:27:39 +08:00
    @auh 哈哈哈哈哈~
    mmx12138
        7
    mmx12138  
       2023-12-02 14:26:18 +08:00
    Codeium
    mmx12138
        8
    mmx12138  
       2023-12-02 14:26:49 +08:00
    Codeium 可以试试这个 免费
    mutou945ya
        9
    mutou945ya  
    OP
       2023-12-02 14:40:41 +08:00
    @mmx12138

    首先谢谢回复哈~ 我解释一下,目前这个插件并不是接入了任何的 API 来给到的代码提示,仅仅是官方 ts 的类型提示哈~ 只是小小的改进了一下官方 ts 提示机制,丝滑了一点点~
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5053 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 20ms · UTC 07:56 · PVG 15:56 · LAX 23:56 · JFK 02:56
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.