在.vue文件中让html代码自动补全的方法(支持vscode)

最新推荐文章于 2024-05-14 10:33:58 发布
最新推荐文章于 2024-05-14 10:33:58 发布
阅读量1.6w 收藏 6
点赞数 4
分类专栏： Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36529459/article/details/79196763
版权

在vue中，我们常常要用到各个组件之间的通信，这样就需要用到.vue的文件，而在单文件中写html的时候，是不能自动补全html代码的，这样就会使我们开发项目的效率大大减少。

在vscode中，只需要简单配置一下就可以让我们在.vue文件中编写html的时候进行自动补全

vscode中有一个以下图片中的文件夹，文件中包含一个setting.json文件

选择常用设置中的（需要用鼠标点击改行）

"files.associations" : {}

接着按下图进行配置，保存之后在单文件中写html代码就具有了自动补全功能


苏墨晨
关注
  • 4
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
前端HTML CSS JS VUE AJAX AXIOS技术人喜欢用的VSCode软件
03-17
3. **JavaScript**：作为JavaScript开发者，VSCode提供了对ES6+语法的良好支持，包括自动补全、重构、调试工具等。配合TSLint或ESLint扩展，可以确保代码质量。同时，VSCode还集成了Node.js开发环境，使得服务端...
VScode Vue项目使用html代码自动补全插件
marsur的博客
10-20 9184
打开文件方式：在VScode中同时按住Ctrl+Shift+P，搜索配置文件。（3）父子标签：输入父标签>子标签，按下tab键。（2）多个相同标签：输入标签名*5，按下tab键。（4）兄弟标签:输入兄标签+弟标签，按下tab键。（1）单个标签：输入标签名称，按下tab键。
Vue文件中无法自动补充html？
qq_54166879的博客
10-01 522
Vue文件中无法自动补充html？下面就让我来告诉你
2024年最全VSCode 开发Vue必备插件，2024年最新三面美团前端岗
最新发布
2401_84413092的博客
05-14 559
前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】语法纠错映射vscode上的断点到chrome上，方便调试（配置有点麻烦，其实我没用这个）自动闭合HTML/XML标签自动完成另一侧标签的同步修改ES6语法智能提示以及快速输入，除js外还支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各种包含js代码文件的时间自动路径补全。
在vscode中添加.vue文件代码自动补全插件及配置HTML Snippets
xsq123的专栏
06-25 1万+
在vscode中添加.vue文件代码自动补全插件及配置HTML Snippets
vscode中如何自动补全.vue文件的html代码
Maix_Y的博客
01-19 6051
1.在vscode中插件下载并重新加载HTML Snippets 2.2.settings.json中配置files.associations对象。 找到setting.json文件：文件 --> 首选项 --> 设置 就进入了我们setting.json文件编辑 然后在settings.json中找到“常用设置”里的files.associations对象（如找不到此对象，可...
VScode ---- vue中HTML代码tab键自动补全插件及配置
钱辉
06-16 7554
1. 首先在vscode商店中下载并重新加载 HTML Snippets 2. 在设置(settings.json)中搜索 files.associations 配置对象 3. 在 settings.json 对象最后插入代码: "files.associations": { "*.vue": "html" }, "emmet.triggerExpansionOnTab": true, "emmet.includeLanguages": {
VSCode的Vue工具
08-08
1. **语法加亮**：VSCode内置了对Vue单文件组件（Single File Component, SFC）的支持，可以自动识别并高亮.vue文件中的HTML、CSS（包括预处理器如Sass、Less）和JavaScript代码，使代码更易于阅读和理解。...
详解VSCode配置启动Vue项目
10-17
然后，同样在设置中配置ESLint，以确保它能对Vue项目中的JavaScript、HTML和Vue文件进行检查： ```json "eslint.validate": [ "javascript", "javascriptreact", "html", "vue" ], "eslint.options": { ...
vscode 离线插件vetur和vuehelper
09-10
7. **Vue组件文档预览**：在Vue组件的`.vue`文件中查看API文档。 8. **调试支持**：支持Vue应用的源码映射，方便进行Vue项目的调试。 **VueHelper** VueHelper则是另一款辅助Vue开发的插件，它提供了以下功能： 1...
vite+vue3使用模块化批量发布Mockjs接口
03-29
6. **配置编辑器支持**: `jsconfig.json`和`.vscode`目录下的配置文件可以帮助IDE更好地理解项目结构，提供代码补全和导航功能。 7. **版本控制**: `.gitignore`和`pnpm-lock.yaml`文件则用于管理版本控制和依赖...
最新方法VScode中html代码自动补全（超清晰详细，保证能用）
jdsydwr的博客
10-07 3万+
一、下载HTML Snippets插件 二、配置settings.json 1.在VScode窗口下按住ctrl + shift + P，调出搜索框，在搜索框中输入settings.json，选择打开设置，如下图所示。 2.在settings.json界面中添加代码如下：（注意这里将代码放在原有代码的下面，并且放在原有大括号的中间，了解编程的也应该知道为什么这么放。） "files.associations": { "*.vue":"html" }, "..
VSCode中写Vue没有代码提示的解决办法
qq_50564231的博客
02-18 2万+
但是经过我测试，两个插件在大部分时候都只支持单词语法的提示，Vetur在已创建的标签外使用时才支持模板创建，而Volar好像不支持模板创建？并且两个插件同时安装了，需要禁用其中一个才能正常使用。Vetur这个插件是对Vue2的项目适配比较好的，Vue3项目官方出了个插件叫Vue Language Features(Volar)。图4 Volar插件安装过程。2023.2.22更新。
VSCode中书写Vue无代码提示，如何解决？
热门推荐
柠夏
02-09 5万+
今天在配置VSC简便插件及实用技巧后书写Vue代码时，发现代码无提示，经过几轮查询资料后发现了问题所在，现给出解决措施。 第一步：我下载了  Vetur  和 Vue 2 Snippets 两个插件，随后创建了Vue模板，发现Vue并没有语法模板提示； 第二步：随后查询资料，发现还需要安装新插件  HTML Snippets ，然后进行  setting.json 文件配置:   ”文件“—”首选项“—”设置“—”文本编辑器
VsCode编辑器-使用优化/建议
~奇思妙想的王多鱼的博客
09-07 1万+
VsCode 一些配置 1. 配置Vscode自定义用户模板 比如 想要Vue的模板 ， 如果没有模板我们创建.vue文件时还需要手动输入Vue的固定模板这就比较麻烦 步骤 点击文件->首选项->用户片段 可以看到有一个新建全局代码片段文件 ， 我这里已经有了全局代码文件了就不再创建,再文件里边输入你想要提示的代码前缀和模板内容即可 { // Place your 全局 snippets here. Each snippet is defined under a snippet n
VS Code开发Vue项目常用插件
dreamingbaobei的博客
08-29 8328
VS Code是免费软件，直接到官网下载安装即可，如果选用这款编辑器，建议花点时间实习一下这款软件，安装必要的插件，会大大提供编码效率。 笔者从从前使用webstorm做前端项目，下面记录在项目实践中的一些配置。
在vue中使用html表格
weixin_43996368的博客
07-28 1834
在vue中使用html表格
vscode Vue代码提示
m0_73461567的博客
02-05 633
Vue VSCode Snippets插件，只需在代码前加上v 即可快捷生成代码片段。
VSCode开发 Vue3 建议必备的插件
程序研博客
11-28 1万+
在使用 Visual Studio Code (VSCode) 开发 Vue 3 项目时，有一些插件可以提高开发效率、代码质量和工作流程。
vscode中自动补全
09-07
在VScode中，可以通过安装插件cpptools-win32.vsix来实现自动补全功能。这个插件支持在无法连网的电脑上安装，安装完成后，重启VScode即可生效。使用自动补全功能时，可以按两次TAB键完成代码的补全，第一次TAB键是...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值