vscode在html编写vue代码提示,vscode编写vue代码没有代码提示

5721605a3b1ce0682d6ab09b0d3742d3.png

一、安装插件

在左侧有个安装插件的按钮,点击后即可通过关键词搜索来安装插件

8e67ed44fe0c3b38b5e8decad12adc6e.png

二、插件配置

文件 =》首选项=》设置=》用户设置

852106852149ae3d021eb0c1ccbea1ed.png

三、插件

vetur

作用:代码提示,高亮

配置:

"emmet.syntaxProfiles": { "vue-html": "html", "vue": "html" }

ESLint

作用:代码错误检查

配置:

"eslint.validate": [ "javascript", "javascriptreact", { "language": "html", "autoFix": true // HTML自动修复, }, { "language": "vue", "autoFix": true // vue 自动修复 } ], "eslint.autoFixOnSave": true // 文件保存时自动修复

File Peek

作用:路径跳转

配置:

"file_peek.activeLanguages": [ "typescript", "javascript", "python", "vue"],"file_peek.searchFileExtensions": [ ".js", ".ts", ".html", ".css", ".scss", ".vue"]

相关文章教程推荐:vscode教程

### 启用 VSCodeVue3 的代码自动补全功能 为了确保在 VSCode 中能够正常使用 Vue3 的代码自动补全功能,需确认几个关键设置和扩展已正确配置。 #### 配置 VSCode 设置 确保 VSCode 设置中启用了自动完成功能。通过搜索 `autocomplete` 来查找相关选项,并将其值设为 `true`[^1]。此操作保证了编辑器的基础自动完成机制处于激活状态。 #### 使用合适的插件 对于 Vue3 项目,推荐使用 Volar 插件而非旧版的 Vetur。Volar 是由 Vue 官方团队维护的新一代 IDE 支持工具,专门为 Vue3 设计优化。如果当前环境中同时存在 Vetur 和 Volar,则可能会导致重复的代码提示现象,影响用户体验[^2]。因此应当卸载 Vetur 并单独保留 Volar。 #### HTML 标签自动补全 针对 `.vue` 文件内的 HTML 结构部分,默认情况下可能无法直接利用 Tab 键触发 div 等常见标签的快速展开。可以通过调整特定的工作区或全局设置来改善这一点。例如,在用户偏好设置 JSON 文件里加入如下片段: ```json { "emmet.includeLanguages": { "vue-html": "html", "vue": "html" }, "emmet.triggerExpansionOnTab": true, } ``` 这段配置使得 Emmet 工具可以在 .vue 文件内识别并处理 HTML 片段,从而允许按下 Tab 实现元素快捷输入[^3]。 #### 路径自动补全支持 为了让相对路径如 `@/components/Button.vue` 这样的语法得到良好解析和支持,可以考虑安装 Path Intellisense 扩展程序。该插件提供了基于工作空间根目录下的 tsconfig.json 或 jsconfig.json 文件定义的别名映射关系来进行智能感知的能力[^4]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值