You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

VSCode中Vue模板HTML标签注释快捷键生成//而非<!-- -->问题求助

解决Vue SFC模板区域注释快捷键错误的问题

Hey there! 我之前也碰到过一模一样的问题,这大概率是VS Code没正确识别.vue文件模板区域的语言类型,或者是注释配置出了问题,给你几个靠谱的解决步骤:

1. 确认当前文件的语言模式

打开你的.vue文件,看VS Code右下角的状态栏,那里会显示当前文件的语言模式(正常应该是「Vue」)。如果显示的是其他类型(比如「Plain Text」或者「JavaScript」),点击它,在弹出的菜单里选择「Vue」,还可以设置「Configure File Association for '.vue'...」把.vue文件默认关联到Vue语言模式,避免下次再出问题。

2. 调整VS Code的注释配置

打开VS Code的设置面板(快捷键Ctrl+,),直接搜索「editor.commentSnippet」,或者手动打开settings.json(通过「Ctrl+Shift+P」输入「Open Settings (JSON)」就能打开),添加以下配置:

"editor.commentSnippet": {
  "html": "<!-- $0 -->",
  "vue-html": "<!-- $0 -->"
}

这个配置会强制让HTML和Vue模板区域使用HTML风格的注释。另外,你也可以补充Emmet的关联配置,确保它能正确识别Vue模板:

"emmet.includeLanguages": {
  "vue-html": "html"
}

3. 确保使用正确的Vue扩展

现在VS Code官方推荐用「Volar」作为Vue的开发扩展(替代旧版的Vetur),它能更精准地识别Vue单文件组件的各个区域(模板、脚本、样式)。如果你之前装了Vetur,建议先卸载避免冲突,安装Volar后重启VS Code,再试试注释快捷键。

按照这几步操作,基本就能解决Ctrl+/生成//注释而非<!-- -->的问题啦!

内容的提问来源于stack exchange,提问作者Ray

火山引擎 最新活动