VsCode 语音注释, 让信息更丰富 (上)

前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

vscode语音注释, 让信息更丰富 (上)

这个系列我会将我制作"语音注释"插件的完整过程分享出来, 还是那句话'过程'比'结果'更有趣。

用法展示

下载: voice-annotation

配置+创建语音文件存放地址

image.png

右键呼出'录制音频注释'

image.png

录制完成点击'保存到项目'

image.png

悬停即可播放语音

image.png

背景

当你开始阅读一份工程代码时, 也许偶尔就会读到一些不知其意的代码, 如果其有注释但是看后仍是一头雾水或者其就压根没写注释, 那么解决这个问题最方便的办法就是直接问问原本的开发者, 同学这里为啥这么写啊?

不仅是 js 语言里, 大部分语言都已经提供了"文字注释"的语法, 为什么我们还是会遇到上述问题那? 假设我们每段代码里都写了注释但还是看不懂, 看看都有哪些问题是我们可以通过语音插件"缓解"的:

写的挺明白了, 看不懂的确是读者自身的问题 (无法解决)
写了但是没写明白, 开发者自身表达能力 (无法解决, 介于"达克效应"&"知识的诅咒"无法自我觉察)
也许与某几个需求有关, 用文字描述清楚甚是 '复杂', 索性不写了(也许可以缓解)
文字的形式说不明白, 我们日常沟通中比较常见, 线上说不清楚了, 直接面对面solo (也许可以缓解)
跨页的描述, 比如阐述大段的"调试方法", 隐藏哪个变量, 强行赋值某个变量, 某些操作可以达到某些效果, 常用于前端mock某些场景 (也许可以缓解)

没做过vscode插件的同学推荐先读读我写的入门教程:

记一次前端"vscode插件编写实战"超详细的分享会(建议收藏哦)(上篇)
记一次前端"vscode插件编写实战"超详细的分享会(建议收藏哦)(下篇)

一、功能点'技术方案'分析

① 识别特定注释

我们需要约定一个特定的写法, 插件将这种写法识别为"语音注释", 并且当鼠标悬停在其上时可以正确的进行播报, 当前我使用的就是// voice_annotation + _数字这种形式。

② 播放注释音频

既然写在vscode里面, 那其实第一选择就是使用node来控制音频输出设备, 如果采用打开一个web新页面的方式播放声音, 会增长用户的操作链路, 调研了市场上现有的音频插件, 以音乐播放插件为主还是通过打开web页面的方式, 但是我们这里对播放没有其余的操作, 比如快进循环播放等稍微复杂一点的需求, 所以选择使用node播放。

③ 录制注释内容

想吃鸡蛋当然要有