大家好,我是农村程序员,独立开发者,行业观察员,前端之虎陈随易。
我会在这里分享关于 独立开发
、编程技术
、思考感悟
等内容,欢迎关注。
- 个人网站 1️⃣:https://chensuiyi.me
- 个人网站 2️⃣:https://me.yicode.tech
如果你觉得本文有用,一键三连 (点赞
、评论
、转发
),就是对我最大的支持~
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 的 sortImports
和 removeUnusedImports
命令。
在 vue 文件中可以通过按下 f1
呼出命令面板,搜索 typescript:
即可看到这 2 个命令,其他文件是没有这 2 个命令的。
实现了模板引用文档链接
与 css 的引用链接相似,本次更新增加了对 ref 引用的展示,可以更加直观地看到文档应用的可用性,有效性。
本地语言支持
本次更新增加了如下语言的支持:
- 中文 (简体/繁体)
- 俄语
- 日语
状态栏界面调整
一图胜千言。
编译参数更新
新的 TSConfig 参数:
strictSlotChildren
:严格限制插槽子元素的类型。strictVModel
:v-model 的严格类型约束。strictCssModules
:严格检查 CSS 模块。resolveStyleImports
:指定是否为通过<style src="...">
或@import "..."
的外部 CSS 文件生成类型导入。
设置重命名
vue.complete.casing.props
→vue.suggest.propNameCasing
vue.complete.casing.tags
→vue.suggest.componentNameCasing
vue.complete.defineAssignment
→vue.suggest.defineAssignment
完整的更新日志:https://github.com/vuejs/language-tools/blob/master/CHANGELOG.md