Skip to content

🐯 关于作者

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

目前是:

  • 农村程序员 (自 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

扩展的地址在这 [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 越来越好!

何以解忧,唯有代码。不忘初心,方得始终。