VS Code中HTML代码为何有两种注释方式？该选哪一种？

为什么会有两种注释？ #

• <!-- -->是原生HTML的标准注释语法，属于HTML规范的一部分，所有浏览器都支持，注释内容不会被浏览器渲染到页面上，但会保留在最终的HTML源码里。
• {% comment %}{% endcomment %}是模板引擎（如Liquid、Jekyll）专用的注释语法，这类注释在项目编译阶段就会被移除，不会出现在最终生成的HTML文件中，主要用于注释模板里的动态逻辑代码。

你在VS Code中用快捷键得到{% comment %}注释，是因为当前文件的语言模式被识别成了模板语言（比如Liquid），VS Code会根据当前语言匹配对应的注释快捷键。

应该选用哪一种？ #

• 如果你写的是纯HTML文件：必须用<!-- -->，这是通用标准，任何场景下的纯HTML都兼容。
• 如果你在使用模板引擎的项目（比如Jekyll博客、Shopify主题开发）：
  • 注释模板里的动态逻辑（比如循环、变量）时，用{% comment %}{% endcomment %}，避免注释内容出现在最终HTML源码中。
  • 注释原生HTML结构时，还是用<!-- -->，方便后续查看HTML源码时参考。

另外，你可以通过VS Code右下角的语言选择器，把文件切换为HTML模式，这样快捷键就会生成标准的<!-- -->注释了。

内容的提问来源于stack exchange，提问作者My Car