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