【VSCode操作手册】点击Tab键,自动补全html标签

VSCode中如何输入标签名,点击Tab键自动补全html标签?

1.点击左下角设置。
2.输入trigger on tab并搜索,勾选上,重启VSCode生效。
在这里插入图片描述
3.还见到其他文章中提到有另一种方法。安装HTML Snippets插件,配合settings.json设置,也能实现。方法是,安装HTML Snippets插件,点击设置,输入settings.json搜索,将如下配置放入原有大括号中间,重启VSCode生效。不过HTML Snippets插件当前已经停止维护了。

"files.associations": {
        "*.vue":"html"
    },
    "emmet.triggerExpansionOnTab": true,
    "emmet.includeLanguages": {
        "vue-html":"html",
        "vue":"html"
    }

如果问题解决,希望可以点个赞,谢谢

### 解决 VSCodeHTML Emmet 自动补全感叹号不生效的问题 在 VSCode 中,如果发现输入 `!` 后无法触发 Emmet 的快捷方式(即生成基本的 HTML 结构),可以通过以下配置来解决问题。 #### 1. 确保启用了 Emmet 补全功能 确认 `emmet.triggerExpansionOnTab` 设置为 `true`。这允许在输入缩写后按下 Tab 即可展开 Emmet 缩写[^1]。 可以在 **Settings.json** 文件中添加或修改以下内容: ```json { "emmet.triggerExpansionOnTab": true, "editor.quickSuggestions": { "other": true, "comments": false, "strings": false } } ``` 上述配置中的 `"editor.quickSuggestions"` 是为了确保编辑器能够快速提供代码建议[^2]。 --- #### 2. 关联文件类型 有时,VSCode 可能未能正确识别当前文件的语言模式,从而影响 Emmet 功能的表现。可以尝试手动关联特定类型的文件到 HTML 或其他支持 Emmet 的语言模式下[^3]。例如,在 **Settings.json** 添加以下内容: ```json { "files.associations": { "*.js": "html", "*.vue": "html" }, "emmet.includeLanguages": { "javascript": "javascriptreact" } } ``` 此部分配置的作用是让 `.js` 和 `.vue` 文件也能享受 HTML 的 Emmet 支持[^4]。 --- #### 3. 安装扩展增强体验 除了调整设置外,还可以安装一些辅助插件提升开发效率。推荐安装 **Auto Rename Tag** 扩展,它可以帮助自动重命名成对的标签。虽然这个扩展主要针对标签重命名优化,但它也可能间接改善某些情况下 Emmet 的表现。 --- #### 4. 测试 Emmet 是否正常工作 完成以上配置之后,请重启 VSCode 并测试以下操作: - 输入 `!` 后按 Tab ,应自动生成标准的 HTML5 文档结构。 - 如果仍然无效,可尝试切换至另一种主题或者恢复默认设置再重新应用更改。 --- #### 注意事项 如果问题依旧存在,则需排查是否存在冲突的第三方插件干扰了 Emmet 的运行逻辑;另外也要注意操作系统环境变量可能带来的潜在影响。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值