跳转到主内容
新派编程网 - 新潮编程理念,全新技术课堂!

VSCode如何开发Vue项目_需要安装哪些必要扩展【教程】

必须安装Volar(非Vetur)、正确启用takeover模式、使用工作区TypeScript版本,并配置ESLint校验vue类型;否则将出现类型推导失效、eslint不识别、模板无高亮、保存不修复等问题。 VSCode 开发 Vue 项目本身不需要任何扩展就能写代码,但缺了几个关键扩展,你会反复遭遇
eslint
报错不识别、
ref()
类型推导失效、
.vue
文件里模板语法没高亮、保存后不自动修复——这些不是配置问题,是扩展没装对。 必须装的三个扩展:Volar 而不是 Vetur Volar 是 Vue 官方推荐的现代 Vue(3.2+)语言支持工具,Vetur 已停止维护且与组合式 API + TypeScript 配合极差。装错直接导致
defineProps
类型丢失、
setup
中无法跳转到组件定义。 卸载所有带 “Vetur” 字样的扩展(包括旧版 “Vue Language Features (Volar)”) 安装
Volar
(作者:johnsoncodehk),并启用它作为
.vue
文件的语言服务器 在 VSCode 设置中搜索
“volar: enable take over mode”
,勾选——这会让 Volar 接管
.vue
文件的全部语言功能,禁用内置 HTML/TypeScript 插件的干扰 TypeScript 支持要关掉内置 TS 插件的 . vue 处理 VSCode 自带的 TypeScript 插件默认不识别
.vue
文件中的
script setup
,会报
Cannot find name 'ref'
这类错误,即使你已装 Volar。 打开命令面板(
Ctrl+Shift+P
/
Cmd+Shift+P
),运行
Typescript: Select TypeScript Version
选择
Use Workspace Version
(确保使用项目里的
typescript
版本,而非 VSCode 内置版本) 在设置中搜索
“typescript.preferences.includePackageJsonAutoImports”
,设为
auto
;再搜
“typescript.suggestionActions.enabled”
,确保开启 ESLint 和 Prettier 协同工作必须手动配 override 只装
ESLint
扩展(dbaeumer. vscode -eslint)和
Prettier
(esbenp.prettier-vscode)不够,Vue 项目里
.vue
文件的 script/template/style 三块内容需分别指定解析器,否则保存时
eslint --fix
对 template 部分完全无效。 Eclipse导入Android或其他的JAVA项目的正确方法 WORD版 本文档主要讲述的是Eclipse导入Android或其他的JAVA项目的正确方法;希望本文档会给有需要的朋友带来帮助;感兴趣的朋友可以过来看看 下载 立即学习 “ 前端免费学习笔记(深入) ”; 项目根目录确保有
.eslintrc.cjs
或
eslint.config.js
,且已包含
plugin:vue/vue3-essential
规则集 在
.vscode/settings.json
中添加:
{ "editor.codeActionsOnSave": { "source.fixAll.eslint": true }, "eslint.validate": ["javascript", "typescript", "vue"], "prettier.vueIndentScriptAndStyle": true }
如果用了
defineOptions
或
defineSlots
,确认 ESLint 配置中启用了
vue/setup-compiler-macros
规则 真正卡住人的往往不是“该装什么”,而是 Volar 的 takeover 模式是否生效、TS 是否用了 workspace 版本、ESLint 是否被明确告知要校验
vue
类型——这三个点任意一个漏掉,都会让编辑器看起来“不工作”。

相关文章