🐯 关于作者
大家好，我是前端之虎陈随易。
目前是：
- 农村程序员 (自
2020 年离职至今都在农村待着)
- 独立开发者 (有多个已经在盈利中的产品)
- 自由职业者 (睡到自然醒，困就马上睡)
- 个人创业者 (注册了自己的公司，为产品服务)
- 自驾爱好者 (经常自驾，边看风景边敲码)
- 小说写作者 (断更
10年，目前构思新作品中)
- 开源推进者 (自
2019 年持续开源至今)
欢迎跟我交朋友：
如果微信加不上，可以公众号留言你的微信号，我加你。
让我们一起积极向上，为自己而努力奋斗！
一点碎碎念
这个版本挺期待的，因为 v1.87版本 搭载的 Electron 是 v27 版本。
而在 2024年4月4日 发布了 v1.88 版本后，我查看了一下 关于 信息，显示的是 Electron v28 版本。
这个版本有什么特点呢？
![picture 0]()
由以上截图可以看到，Electron v28 版本正式支持了 ESM。
那么什么是 ESM 呢？
这是 JavaScript 的官方模块化标准，其实就是用 export、import 这几个概念替换 require、exports。
同时呢，也不得不提到一个在前端界举足轻重的男人 sindresorhus。
![picture 1]()
截至目前，他一共发布了 1234 个 npm包，而且，很多包都成为了现代化前端开发的基建。
也就是说，如果他的包被删除掉，那么整个前端界将无法正常运转。
那么他在 2021年2月28日 创建了这个文件 esm-package.md
倡导大家把项目和生态都变成 ESM 模式，以推进 JS 的标准化进程。
简而言之，意思就跟让大家不要用 IE，要用 Chrome 差不多。
我自己写 VSCode 插件的时候，是无法直接使用 import，export 语法 (ESM) 来发布插件的，必须被编译成 require，exports 语法 (Commonjs)。
怎么说呢，对于结果来说，无伤大雅，插件也可以正常运转。
但是，作为一个有着偏执症的程序员来说，有更好，更官方，更标准的语法不能使用，确实还是有那么一点点膈应。
这不，上次 v1.87 版本发布的时候，激动地查看了 Electron 版本，稍有失望地看到是 v27 版本。
那么本次发布了 v1.88 版本，看到 Electron 变成 v28 后，惊喜地以为可以在 VSCode 插件开发中使用 ESM 了。
于是马上写了个 Demo 测试，没想到还是不能如愿，那么继续等待吧。
那么其实，之所以费劲巴拉地说这么一段呢，是想告诉屏幕前的读者们，写代码也可以很有趣，也可以有自己的技术追求。
很多东西可能无所谓，但是也可能让我们在编程的道路上，走得更远，希望我们可以减少浮夸和躁动，发现编程之美。
那么下面正式开始介绍 VSCode v1.88 的本次更新内容 (只挑选重要的分享)
正文开始
开放编辑器的自定义标签
![picture 2]()
如上动图，当我们打开了几个文件，但是文件名都一样的时候，有时候就不能直观地看出，文件属于哪个目录。
那么我们就可以找到 workbench.editor.customLabels.patterns 配置，通过 glob 语法，去匹配文件，并使用 ${filename}，${extname}，${dirname} 和 ${dirname(N)} 这几个变量来自定义显示名称。
本功能可以通过 workbench.editor.customLabels.enabled 开关来启用和禁用。
随易点评
VSCode 编辑器最近的几个版本呢，在人性化体验上面真的是做得越来越棒了。
我个人也早已将 VSCode 作为自己写代码，写文章，写故事的唯一编辑器了。
glob 语法
*：代表任意数量的字符 (包括零个字符)。例如，*.txt 会匹配所有以 .txt 结尾的文件，而 a* 会匹配所有以字母 a 开头的文件。?：代表任意单个字符。例如，a?.txt 会匹配 a1.txt 或 ab.txt 等，但不会匹配 abc.txt。\\[...\\]：代表方括号内的任意单个字符。例如，a[bc].txt 会匹配 a.txt、ab.txt 或 ac.txt，但不会匹配 ad.txt。\\[^...\\] 代表不在方括号内的任意单个字符。例如，a[^b].txt 会匹配 a.txt 和 ac.txt，但不会匹配 ab.txt。
滚动锁定
![picture 3]()
可以搜索并使用 Toggle Locked Scrolling Across Editors 命令，将窗口锁定，多个窗口同步滚动。
适用于不同的文件行与行对比。
随易点评
这个也是体验增强的内容，对 VSCode 越来越爱不释手了。
曾经有很多人问我，为什么不用 WebStorm？
我就喜欢 VSCode 这种，每个月月底或月初，给我不断带来惊喜的编辑器~~。
底部活动栏
![picture 4]()
可以设置 workbench.activityBar.location 配置为 bottom 或 top，将默认位于左侧的 活动栏，移动到下方或上方。
随易点评
这个功能我自己用不到，因为安装的插件多一点的话，横放比竖放更挤，容易误触。
不过，对于有需要的朋友来说，可以多出左侧大概 一厘米 的空间，还是不错的。
搜索编辑器单击行为
![picture 5]()
这个功能官方没有提供示意图，我测试了下，大家根据图中的标记序号看过来。
首先呢，当我们搜索关键字的时候，其实是可以点击 (1) 处位置，打开一个搜索编辑页面 (2) 的。
那么，在本次的 v1.88 版本更新之前呢，我们点击 (3) 处的文件名，是不会有任何变化的。
在 v1.88 版本更新之后，却可以显示一个弹框，并显示该文件的内容，鼠标滚动就能看到文件的全部内容。
![picture 6]()
这个功能呢，我们可以通过设置 search.searchEditor.singleClickBehaviour 为 peekDefinition 来开启。
随易点评
爱了，爱了，如此细微之处，竟然考虑如此周到，不愧是宇宙第一编辑器！
搜索增强之目录吸附
![picture 7]()
请注意搜索框下方，在搜索文件的下拉面板中进行鼠标滚动时，该文件所属的目录并不会随着鼠标滚动，而是吸附在顶部。
这样，我们就能非常方便且直观地看到文件所属的目录啦~
随易点评
又是一个体验增强，看起来很小的一个改变，但是却能给用户体验带来神清气爽的感觉。
很多时候，程序员做产品，只追求功能上的强大，代码上的技巧，却忽视了用户的体验。
那么在这个方面，不放像 VSCode 的开发团队学学吧~
扩展更新重载
![picture 8]()
当扩展更新的时候，之前是需要重新加载整个编辑器才能生效的。
那么在本次更新之后呢，我们可以仅仅只是 重新加载扩展，而不用重新打开一遍编辑器啦。
随易点评
很棒的改进，不过呢，如果你是远程开发，使用了 WSL，SSH 或者 Dev Container 的话，还是需要重新加载整个编辑器的。
小地图部分标题
![picture 9]()
可以在代码中使用 //#region 注释或 MARK: 标记，这样的话，将会在小地图中显示该注释或标记的名称，方便我们查看代码范围。
随易点评
小地图使用者的一个小惊喜，我不喜欢用小地图，因为我的屏幕就这么大。。。
重命名建议行为
![picture 10]()
选择某个变量，按下 F2 后，将会出现一个输入框，同时也会显示该变量相关的建议。
当通过鼠标上下键切换列表内容时，输入框也会同步变化。
按下回车后，所有该同名变量都会同步改变。
随易点评
有用的功能。
终端粘性滚动透明度支持
![picture 11]()
如上图所示，在终端显示文件列表后，鼠标滚动时，文件所在的目录也会吸附在顶部。
同时呢，目前支持该吸附行可以设置透明度啦，这样就不会挡住滚动到该位置的文件名称了。
随易点评
好！
TypeScript 5.4
当前版本，内置的 TypeScript 升级到 v5.4 版本啦。
带来了类型检测和智能感知上的提升，也修复了一些语言层面的 bug。
在 Markdown 中更智能地插入图像和链接
![picture 12]()
当复制并粘贴文件到 markdown 文件中时，可以智能地判断是否生成图片的 markdown 链接了。
随易点评
我个人不喜欢自带的这个功能，我用的是一个专门处理在 Markdown 文件中插入图片的一个扩展 Markdown Image。
扩展的地址在这 [https://marketplace.visualstudio.com/items?itemName=hancel.markdown-image] https://marketplace.visualstudio.com/items?itemName=hancel.markdown-image。
提交消息生成改进
为了提高生成的提交信息的质量，v1.88 版本开始，将会使用最近的 10个 仓库提交信息作为参考。
随易点评
对于不想写提交信息，又不想乱写提交信息的朋友来说，这是非常有用的改进。
不过，好像需要购买了 Github Copilot 套餐才可以用？
Electron 更新到 v28
自 VSCode v1.88 开始，内置的 Electron 版本终于走到了 v28 了。
不过，正如我本文开头所说，开发扩展还是不支持 ESM 语法。
这是我最期待的 VSCode 更新，让我们继续拭目以待吧，希望 VSCode 越来越好！
