Skip to content

大家好,我是农村程序员,独立开发者,行业观察员,前端之虎陈随易。

我会在这里分享关于 独立开发编程技术思考感悟 等内容,欢迎关注。

如果你觉得本文有用,一键三连 (点赞评论转发),就是对我最大的支持~


VSCode 编辑器中的 Vue(Official) 官方扩展 v3.0 发布了,这是写 Vue 必备的一个插件,大家快快更新吧。

另外名称不要搞错了,这是 vue 扩展从 0 到 3 的名称变化:

  • [0.x] Volar
  • [1.x] Vue Language Features
  • [2.x] Vue - Official
  • [3.x] Vue (Official)

至于 vuter 呢,这是专门给 vue2 用的,根据最后的发布时间2023年来看,早已处于无人维护状态,大家尽快升级到 vue3 吧。

下面是 vue3.0 的更新内容:

混合模式永远开启

混合模式 (Hybrid Mode) 模式是一种高级语言服务协作机制,旨在优化 Vue 与 TypeScript 的协同开发体验。

允许 Vue 语言服务与 VSCode 内置的 TypeScript 服务并行运行,避免 传统模式 下的资源冲突。

通过智能路由机制:Vue 单文件组件 (SFC) 由 Volar 处理,普通 TS/JS 文件由内置 TypeScript 服务处理,实现职责分离。

当混合模式启用时,插件不启动嵌入式 TS 服务 (embedded ts_ls),直接复用 VSCode 的 TS 服务。

混合模式默认开启 (且不可禁用),极大地减轻了官方的维护精力,不用在混合模式和非混合模式两边跑了。

更好的连接

增强了 Vue 扩展与 TypeScript 语言服务之间的通话,使其更加稳定。

如果你曾遇到过开发过程中 vue 扩展动不动卡死的情况,那么这个版本针对这个问题有所改善和增强了。

版本匹配

Vue 语言服务器现在需要特定的 Volar 版本才能在所有编辑器中正常工作。

也就是说,vue 扩展和下载的 vue 语言服务器,从 v3.0 版本开始,必须要完全匹配才能正常工作,这进一步提高了插件的稳定性。

修复启动问题

在某些情况下,VSCode 会优先加载 typescript-language-features 主脚本而不是 Vue 扩展主脚本,因此导致官方的 hack 代码不起作用,本次更新修复了这个问题,使其更具容错性。

全局组件跳转

现在,全局组件的调整会直接到达源码定义处,而不是类型定义处。

支持排序和移除未使用导出

增加了 TypeScript 的 sortImportsremoveUnusedImports 命令。

在 vue 文件中可以通过按下 f1 呼出命令面板,搜索 typescript: 即可看到这 2 个命令,其他文件是没有这 2 个命令的。

实现了模板引用文档链接

与 css 的引用链接相似,本次更新增加了对 ref 引用的展示,可以更加直观地看到文档应用的可用性,有效性。

本地语言支持

本次更新增加了如下语言的支持:

  • 中文 (简体/繁体)
  • 俄语
  • 日语

状态栏界面调整

一图胜千言。

编译参数更新

新的 TSConfig 参数:

  • strictSlotChildren:严格限制插槽子元素的类型。
  • strictVModel:v-model 的严格类型约束。
  • strictCssModules:严格检查 CSS 模块。
  • resolveStyleImports:指定是否为通过 <style src="...">@import "..." 的外部 CSS 文件生成类型导入。

设置重命名

  • vue.complete.casing.propsvue.suggest.propNameCasing
  • vue.complete.casing.tagsvue.suggest.componentNameCasing
  • vue.complete.defineAssignmentvue.suggest.defineAssignment

完整的更新日志https://github.com/vuejs/language-tools/blob/master/CHANGELOG.md

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