- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端自习课
【推荐】1408- 分享 6 个 Vue3 开发必备的 VSCode 插件
Volar 下载数 153 万+ 相信使用 VSCode 开发 Vue2 的同学一定对 Vetur 插件不会陌生，作为 Vue2 配套的 VSCode 插件，它的主要作用是对 Vue 单文件组件提供高亮 而随着 Vue3 正式版发布，Vue 团队官方推荐 Volar 插件来代替 Vetur 插件，不仅支持 Vue3 语言高亮、语法检测，还支持 TypeScript 和基于 vue-tsc 的类型检查功能 postcss 使用 language-postcss，stylus 使用 language-stylus 拓展，sass 使用 Sass 拓展； Volar 不包含 ESLint 和 Prettier 该插件支持：Volar、Vue2 和 Vue3。 我比较强烈推荐实用 Volar 和 Vue VSCode Snippets 这 2 个插件。如果觉得不错，还请点赞支持。 大家有更好的插件，欢迎评论分享~
3.9K10编辑于 2022-11-15 - 来自专栏前端食堂
前端食堂技术周刊第 55 期：Rollup v3.0.0、Volar 1.0 Nika、TypeScript 十年
这是前端食堂的第 131 篇原创 美味值： 口味：桂花秋梨 食堂技术周刊仓库地址：https://github.com/Geekhyt/weekly[1] 本期摘要 Rollup v3.0.0 Volar 2.Volar 1.0 Nika[3] Volar 发布 1.0，代号 Nika，此次更新主要改进了 UX/DX、性能、包体积、Plugin API v1，将核心代码重构使其与框架无关。 github.com/Geekhyt/weekly [2] Rollup v3.0.0: https://github.com/rollup/rollup/releases/tag/v3.0.0 [3] Volar 1.0 Nika: https://blog.vuejs.org/posts/volar-1.0.html [4] TypeScript 十年，不忘初心: https://devblogs.microsoft.com
76920编辑于 2022-11-01 - 来自专栏fastmock
vscode编写vue3项目代码提示缓慢问题处理
在使用vscode + volar开发vue3项目时，开发了一段时间，尤其是在新建了很多次vue文件后，编辑器就会出现代码自动补全或者错误提示缓慢，或者根本不能提示的问题，每次遇到这种情况都要通过重启vscode 试了很多方式来解决，最后网上找到通过开启Volar Takeover *模式解决。 Vue3官网 https://cn.vuejs.org/guide/typescript/overview.html#volar-takeover-mode 有关于 Volar Takeover 的详细介绍 ， 为了优化性能，Volar 提供了一个叫做“Takeover 模式”的功能。 在这个模式下，Volar 能够使用一个 TS 语言服务实例同时为 Vue 和 TS 文件提供支持。
2.4K20编辑于 2023-10-23 - 来自专栏老怪兽的前端之旅
（一）创建项目和配置项目
初始化项目 说明 vue 支持通过 init 指定 latest 来配置初始化模板，这个命令使用的是 vite 脚手架 npm init vue@latest # 一、配置项目 说明 vscode 需要安装 volar 这个插件，他是 vue3 支持的插件 然后我们进行 TypeScript 开发的时候，因为 vscode 内置了 TypeScript Server, 而 volar 也提供了一个 TypeScript Server ，只不过 volar 是针对于 vue 优化过的 如果过在开发过程中同时使用了这两个插件，就会对代码进行两次编译，影响开发效率，还可能起冲突，vue 官方推荐的是把 vscode 自带的 TypeScript Server 关掉，只保留 volar # 二、关闭内置 TypeScript Server 打开控制面板快捷键 ctrl + shift + p 搜索 show buil 2.
76010编辑于 2023-02-22 - 来自专栏喇叭的学堂
基于 vite 创建 Vue3 项目，新增的目录文件分析，启动项目
---------------------- 3、新增的目录文件分析 1、extensions.json文件 提示我们去安装下面这两个插件 【TypeScript Vue Plugin (Volar )】 和【Vue - Official（volar改名成这个了）】 但是：【来自Vue - Official的提示】 The "TypeScript Vue Plugin (Volar)" extension 应该是Vue - Official2.0版本不需要TypeScript Vue Plugin (Volar)插件了 2、env.d.ts 本来ts不认识【.jpg、.txt等等文件】，我们这个文件引入对应包
63110编辑于 2024-03-11 - 来自专栏前端实验室
开发vue3必备的几个vscode插件，你用上了吗？
的时候能够极大的提高效率和方便程度 今天大师兄就把这几个插件分享出来，希望能够帮助大家提升开发效率 Vue Theme Vue Theme是我一直在使用的主题插件，它的主题配色和Vue一致，优雅而又美观 volar 但是它对于ts的支持，并不友好，而且Vue3是一整套从头到尾使用ts的新底层以及全新的composition-api,所以此时volar顺应而生。 volar不仅支持 Vue3 语言高亮、语法检测，还支持 TypeScript 和基于 vue-tsc 的类型检查功能。 需要注意的是：使用时需要禁用 Vetur 插件,Volar与它会有冲突 Vue VSCode Snippets 此插件为开发者提供了快速的生成 Vue 代码片段的方法，通过各种快捷键就可以在 .vue文件中快速生成各种代码片段
26.4K33编辑于 2022-12-02 - 来自专栏摘繁华
Vue学习笔记4-项目开发规范及插件
Vue 学习笔记 4-项目开发规范及插件 一、安装插件 开发必备： vscode-icons：编辑器图标插件； Vue Language Features (Volar)：在功能上 volar 和 vetur 是一致的，都是针对 vue 的插件（可以这样说， volar 是 vue3 的配套，vetur 是 vue2 的配套）； DotENV：.env 文件语法高亮； ESLint：件化的 javascript editor.formatOnSave": true } 一键安装项目推荐的 vscode 插件，新建 extensions.json 文件： { "recommendations": [ "vue.volar
85140编辑于 2023-11-14 - 来自专栏前端食堂
VueConf China 2021 《Vue3生态进展-尤雨溪》 Reaction
更好的 IDE/TS 支持 Volar[12] 是未来官方主推的 VS Code 插件，将会替代 Vetur(历史包袱)。 如上图，Volar 提供了几乎和 TSX 一样的开发体验，可以进行模板类型检查。 IDE 支持计划 未来会将 Vetur 的一些重要的功能以及一些新的探索整合到 Volar 上。 同时 Volar 的作者还开发了 vue-tsc，在 CI 上支持可以同时检查 TS 文件以及 Vue 文件里的 TS 类型错误，内部的实现适合 Volar 一样的。 227 [11] SFC style CSS variable injection (new edition): https://github.com/vuejs/rfcs/pull/231 [12] Volar : https://github.com/johnsoncodehk/volar [13] Proposal for dropping ie11 support in Vue 3: https://github.com
1.8K20发布于 2021-06-25 - 来自专栏知码前端
用Vue3开发，这几个工具你得知道。摸鱼不能耽误
03 volar 对于习惯使用了vscode开发的小伙伴来说，对于vutur肯定不会陌生，但是自从使用了Vue3之后，总感觉vutur不是那么好用，正好尤神也推出了volar。 与vetur相同，volar是一个针对vue的vscode插件，不过与vetur不同的是，volar提供了更为强大的功能。除了集成了vetur的相关功能，如高亮、语法提示等之外。
3.6K20编辑于 2022-10-28 - 来自专栏百宝箱
谈 VSCode 插件的自动化发布
其实当前wot-ui对typescript的支持其实还不错，在不使用wot-uiintellisense插件的情况下，也可以结合VSCode+Volar实现代码提示，不过Volar经常出现问题，导致代码提示时灵时不灵 ，所以wot-uiintellisense可以解决Volar出问题时代码提示失灵的问题。 还有就是VSCode插件更加自由，可以做到更多事情，比如跳转到文档地址、展示详细文档介绍等，相对Volar来说能够给开发者提供更大的便利。
8300编辑于 2026-01-11 - 来自专栏前端框架
分享几个从好用到离谱的vs code插件
另外每次review代码，可以看到历史记录，以及提交时间、作者，不要太方便了 image.png TypeScript Vue Plugin (Volar) 你要是写Vue3，一定要安装这个插件，太香了 ，用过的都说好，当然也有非ts版本的Vue Language Features (Volar)，不过这个插件目前需要手动将vs code升级到高于插件指定的版本，否则插件安装会失败。
24810编辑于 2025-03-14 - 来自专栏小鑫同学编程历险记
在实践中学习类型定义、类型覆盖、CSS Modules
typescript-plugin-css-modules" }] } } 配置插件到 Ts Server： 但是由于一些插件相互干扰的原因，你可能在 Vue 项目中不能很好的使用到这个插件： Volar 作为 Vuejs 目前组要推荐的编码插件，在插件文档要推荐使用接管模式来使用 Volar 而不是再去安装另外一个插件，启用接管模式就必须要关闭掉JavaScript 和 TypeScript 的语言功能插件 ，那么就没办法做上面第二步的配置； 关闭接管模式的情况，我们就需要安装****TypeScript Vue Plugin (Volar)****插件获得更多的编码支持，但是由于 Volar 的Ts 服务没有加载 tsconfig.json 中的插件，所以配置后也不会生效； 如果想使用typescript-plugin-css-modules插件来得到编写 CSS 时的代码提示，我现在只能是： 停止使用 Volar 的接管模式； 禁用 TypeScript Vue Plugin (Volar) 插件； 总结： 通过一个简单的案例来讲述了模块类型定义和覆盖的方式，并找到了正确使用 CSS Modules 的方法
2.1K20编辑于 2022-12-26 2025最新！VS Code插件全家桶推荐，从新手到大神的效率跃迁
二、 按技术栈选型：前端 / 后端 / 算法专属插件 （一）前端开发必备 插件名称 核心功能 适用场景 Volar Vue3 语法高亮、TypeScript 支持 Vue3 项目（替代旧版 Vetur） 五、 插件组合推荐（抄作业版） 前端开发者 Prettier + ESLint + Volar/Rect Snippets + Tailwind IntelliSense + REST Client 基础效率包 + 框架专属插件 + REST Client + Live Share + CodeSnap（代码截图分享） 避坑指南 插件不是越多越好：禁用不常用插件（如不用 Vue 时关闭 Volar
2.8K20编辑于 2025-12-15【vue】无法使用 JSX，除非提供了 “--jsx“ 标志
前言 生成vue3代码框架+插件volar后单标签报错 百度了一下大概意思就是vue3中要把单标签写成双标签 但很多时候又不想写双标签，没必要太麻烦。。。。
12410编辑于 2025-12-15- 来自专栏全栈开发工程师
类型“{}”上不存在属性“xxx”。ts(2339)-解决方案集锦
include": [ "src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue" ] 三、方案三 重启 Volar
1.6K10编辑于 2025-01-06 - 来自专栏前端框架
推荐几个从好用到离谱的vs code插件
另外每次review代码，可以看到历史记录，以及提交时间、作者，不要太方便了TypeScript Vue Plugin (Volar)你要是写Vue3，一定要安装这个插件，太香了，用过的都说好，当然也有非 ts版本的Vue Language Features (Volar)，不过这个插件目前需要手动将vs code升级到高于插件指定的版本，否则插件安装会失败。
1.2K90编辑于 2023-05-24 - 来自专栏Nodejs技术栈
Vite 为何短短几年内变成这样？
Volar 提供了在代码编辑器中为 Vue、MDX 和 Astro 等自定义编程语言构建可靠且高性能的编辑体验所需的工具。 Volar 允许框架向用户提供悬停信息、诊断和自动补全等功能，并共享 Volar 作为为它们提供支持的通用基建。
35510编辑于 2024-05-21 - 来自专栏前端从进阶到入院
VueConf 2021 抢先看，Evan You 和你聊聊 Vue 的未来
更好的 IDE/TS 支持 多个探索中的项目 Vetur VueDX Volar 获得了： 类型检查，语法提示和 SFC templates 的自动重构 接下来： 把这些努力整合成更推荐的链路 提供 CLI 工具来利用 TS 校验 SFC 计划： 基于 Volar 的新的官方 VSCode 插件，从 Vetur 和 VueDX 上汲取很多灵感。
95010编辑于 2022-03-10 - 来自专栏前端三元同学
今天来带大家抢先看VueConf 2021，一起聊聊 Vue 的未来？
更好的 IDE/TS 支持 多个探索中的项目 Vetur VueDX Volar 获得了： 类型检查，语法提示和 SFC templates 的自动重构 接下来： 把这些努力整合成更推荐的链路 提供 CLI 工具来利用 TS 校验 SFC 计划： 基于 Volar 的新的官方 VSCode 插件，从 Vetur 和 VueDX 上汲取很多灵感。
1.3K10发布于 2021-04-29 - 来自专栏前端技术江湖
Vue 3.4 来了！
需要采取的潜在行动 要充分利用 3.4 中的新功能，建议在升级到 3.4 时同时更新以下依赖项： Volar / vue-tsc@^1.8.27 (required) @vitejs/plugin-vue 除 Vue 核心外，新解析器还将有利于提高 Volar / vue-tsc 以及需要解析 Vue SFC 或模板（如 Vue 宏）的社区插件的性能。 这不会影响使用最新版 Volar 的纯 SFC 用户。
1.6K10编辑于 2024-01-05
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号