陈随易:VSCode 1.88更新记录

7,479 阅读8分钟

🐯 关于作者

大家好,我是前端之虎陈随易。

目前是:

  • 农村程序员 (自 2020 年离职至今都在农村待着)
  • 独立开发者 (有多个已经在盈利中的产品)
  • 自由职业者 (睡到自然醒,困就马上睡)
  • 个人创业者 (注册了自己的公司,为产品服务)
  • 自驾爱好者 (经常自驾,边看风景边敲码)
  • 小说写作者 (断更 10年,目前构思新作品中)
  • 开源推进者 (自 2019 年持续开源至今)

欢迎跟我交朋友:

如果微信加不上,可以公众号留言你的微信号,我加你。

让我们一起积极向上,为自己而努力奋斗!

一点碎碎念

这个版本挺期待的,因为 v1.87版本 搭载的 Electronv27 版本。

而在 2024年4月4日 发布了 v1.88 版本后,我查看了一下 关于 信息,显示的是 Electron v28 版本。

这个版本有什么特点呢?

picture 0

由以上截图可以看到,Electron v28 版本正式支持了 ESM

那么什么是 ESM 呢?

这是 JavaScript 的官方模块化标准,其实就是用 exportimport 这几个概念替换 requireexports

同时呢,也不得不提到一个在前端界举足轻重的男人 sindresorhus

picture 1

截至目前,他一共发布了 1234npm包,而且,很多包都成为了现代化前端开发的基建。

也就是说,如果他的包被删除掉,那么整个前端界将无法正常运转。

那么他在 2021年2月28日 创建了这个文件 esm-package.md

倡导大家把项目和生态都变成 ESM 模式,以推进 JS 的标准化进程。

简而言之,意思就跟让大家不要用 IE,要用 Chrome 差不多。

我自己写 VSCode 插件的时候,是无法直接使用 importexport 语法 (ESM) 来发布插件的,必须被编译成 requireexports 语法 (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 作为自己写代码,写文章,写故事的唯一编辑器了。

  1. glob 语法
    1. *:代表任意数量的字符 (包括零个字符)。例如,*.txt 会匹配所有以 .txt 结尾的文件,而 a* 会匹配所有以字母 a 开头的文件。
    2. ?:代表任意单个字符。例如,a?.txt 会匹配 a1.txtab.txt 等,但不会匹配 abc.txt
    3. \[...\]:代表方括号内的任意单个字符。例如,a[bc].txt 会匹配 a.txtab.txtac.txt,但不会匹配 ad.txt
    4. \[^...\] 代表不在方括号内的任意单个字符。例如,a[^b].txt 会匹配 a.txtac.txt,但不会匹配 ab.txt

滚动锁定

picture 3

可以搜索并使用 Toggle Locked Scrolling Across Editors 命令,将窗口锁定,多个窗口同步滚动。

适用于不同的文件行与行对比。

随易点评

这个也是体验增强的内容,对 VSCode 越来越爱不释手了。

曾经有很多人问我,为什么不用 WebStorm

我就喜欢 VSCode 这种,每个月月底或月初,给我不断带来惊喜的编辑器~~。

底部活动栏

picture 4

可以设置 workbench.activityBar.location 配置为 bottomtop,将默认位于左侧的 活动栏,移动到下方或上方。

随易点评

这个功能我自己用不到,因为安装的插件多一点的话,横放比竖放更挤,容易误触。

不过,对于有需要的朋友来说,可以多出左侧大概 一厘米 的空间,还是不错的。

搜索编辑器单击行为

picture 5

这个功能官方没有提供示意图,我测试了下,大家根据图中的标记序号看过来。

首先呢,当我们搜索关键字的时候,其实是可以点击 (1) 处位置,打开一个搜索编辑页面 (2) 的。

那么,在本次的 v1.88 版本更新之前呢,我们点击 (3) 处的文件名,是不会有任何变化的。

v1.88 版本更新之后,却可以显示一个弹框,并显示该文件的内容,鼠标滚动就能看到文件的全部内容。

picture 6

这个功能呢,我们可以通过设置 search.searchEditor.singleClickBehaviourpeekDefinition 来开启。

随易点评

爱了,爱了,如此细微之处,竟然考虑如此周到,不愧是宇宙第一编辑器!

搜索增强之目录吸附

picture 7

请注意搜索框下方,在搜索文件的下拉面板中进行鼠标滚动时,该文件所属的目录并不会随着鼠标滚动,而是吸附在顶部。

这样,我们就能非常方便且直观地看到文件所属的目录啦~

随易点评

又是一个体验增强,看起来很小的一个改变,但是却能给用户体验带来神清气爽的感觉。

很多时候,程序员做产品,只追求功能上的强大,代码上的技巧,却忽视了用户的体验。

那么在这个方面,不放像 VSCode 的开发团队学学吧~

扩展更新重载

picture 8

当扩展更新的时候,之前是需要重新加载整个编辑器才能生效的。

那么在本次更新之后呢,我们可以仅仅只是 重新加载扩展,而不用重新打开一遍编辑器啦。

随易点评

很棒的改进,不过呢,如果你是远程开发,使用了 WSLSSH 或者 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

扩展的地址在这 [marketplace.visualstudio.com/items?itemN…] https://marketplace.visualstudio.com/items?itemName=hancel.markdown-image

提交消息生成改进

为了提高生成的提交信息的质量,v1.88 版本开始,将会使用最近的 10个 仓库提交信息作为参考。

随易点评

对于不想写提交信息,又不想乱写提交信息的朋友来说,这是非常有用的改进。

不过,好像需要购买了 Github Copilot 套餐才可以用?

Electron 更新到 v28

VSCode v1.88 开始,内置的 Electron 版本终于走到了 v28 了。

不过,正如我本文开头所说,开发扩展还是不支持 ESM 语法。

这是我最期待的 VSCode 更新,让我们继续拭目以待吧,希望 VSCode 越来越好!