在VScode中注释css内容，编辑器错误使用HTML注释符进行注释

SK战无

1910人浏览 · 2025-09-14 21:15:05

SK战无 · 2025-09-14 21:15:05 发布

在使用vscode进行前端开发的时候，有可能会遇到在注释CSS内容时，编辑器错误使用HTML的注释符

/* color:red */  //正确的css注释
<!-- color:red -->   //错误使用HTML注释符的css注释

针对这个情况，一般都是：1、插件出现冲突；2、VScode识别语言错误；3、快捷键冲突等

虽然可以自己手打css注释符，但是很麻烦，一般都会使用快捷键进行注释，我会先分享我本次遇到的情况的解决办法，然后再分享AI生成的处理办法。

因为我遇到的情况仅限于vscode出现问题，遇到可以先试试使用其他编辑器（如HBuilder X等）打开.html或.css文件看看是都有问题还是就vscode出现该问题。

插件冲突：

1、WeChat Snippets

如图所示，本次我出现该问题的罪魁祸首就是这个插件，这是23年做小程序毕设的时候为了方便看代码一并下载的插件（微信开发者小程序这个编辑器，我觉得难用的一，所以在vscode安装了对应插件方便找BUG），一开始没有出现问题，但是突然在24年左右就出现编辑器使用错误的注释符，如果遇到这个情况，可以尝试先禁用这个插件

2、尝试禁用所有插件看看是否还有问题，如果没有问题就把一个个打开试（不是特别适用像我一样装有多个插件的情况）

在vscode页面中按下通过Ctrl+Shift+P，输入Disable All Extensions禁用所有插件后尝试。当然也可以选择部分插件进行禁用，如Emmet相关扩展、自动闭合标签类扩展（如Auto Close Tag等）、注释增强类扩展等。

快捷键冲突：

不排除是快捷键导致的原因，可以点击Ctrl+k Ctrl+s打开快捷键设置，搜索注释，检查 切换行注释命令 的快捷键绑定，如果是Ctrl+/，一般来说就是正常的。

语言模式识别错误：

可以尝试打开一个项目或者单独打开个.html、.css文件等，点到对应的区域，查看右下角（默认在右下角）的识别是否正确，如果不正确的话可以尝试手动调整

<!DOCTYPE html>
<html>
    <head>
      <style>
        .container {
          overflow: hidden; //光标点在此处，编辑器右下角应该显示为css
        }
      </style>
    </head>
    <body>
      <div>Content</div>  //光标点在此处，编辑器右下角应该显示为html
    </body>
    <script>
        ...  //光标点在此处，编辑器右下角应该显示为js
    </script>
</html>

输入法冲突：

确实不排除有可能是输入法的问题，此时可以尝试禁用输入法工具（如搜狗输入法等）、关闭全局快捷键软件（如 AutoHotkey）进行尝试

最简单粗暴的解决办法：

完全卸载VScode，通过控制面板或者设置卸载vscode（搜索记得搜索M开头的程序），这里要分为Mac、Windows和Linux，注意一下，这是AI给的办法，因为要涉及删除注册表，不太明白的可以只删除相关文件这些不去动注册表，免得弄出问题。目前我只使用了Windows的方法，主要就是删除文件件一般不会去动注册表，还是那句话，不懂的不清楚的就不要乱动了。