返回

VSCode中Emmet修改默认html或css模板snippets

前端

  • 电脑环境：系统：macOS Ventura 13.0.1，VSCode：1.75.1
  • VSCode代码编辑器默认HTML或CSS代码模板Snippets是Emmet进行维护的，因此要想修改默认模板需要：
  1. 打开VSCode，安装扩展Emmet（Emmet对HTML，XML和CSS有很好的支持，可以对代码进行缩写，使代码更具可读性，并且可以使代码更快的生成）。
  2. 在命令面板（快捷键Ctrl+Shift+P）中搜索"workbench.json"，打开setting.json设置文件。
  3. 在setting.json中找到："emmet.syntaxProfiles": {，在该配置块里添加如下代码：
  "html": {
    "snippets": {
      "html": {
        "template": "<html>\n  <head>\n    <meta charset=\"UTF-8\">\n    \n  </head>\n  <body>\n  </body>\n</html>"
      }
    }
  },
  "css": {
    "snippets": {
      "css": {
        "template": "/* stylesheet */\n"
      }
    }
  }
}
  • 解释：
  • "html": 表示HTML语言的代码片段。
  • "snippets": 表示代码片段的集合。
  • "html": 表示HTML语言中"html"标签的代码片段。
  • "template": 表示代码片段的内容。
  • 完成以上步骤后，就可以自定义默认html或css模板snippets了，例如：
  • 想修改html模板，使模板中的title标签中的文本默认就是"My New Page"，可以将上面的template改为：
"template": "<html>\n  <head>\n    <meta charset=\"UTF-8\">\n    \n  </head>\n  <body>\n  </body>\n</html>"
  • 同理，想修改css模板，使模板中的注释内容默认是"My CSS Stylesheet"，可以将上面的template改为：
"template": "/* My CSS Stylesheet */\n"

  • 以上是VSCode中Emmet修改默认html或css模板snippets的方法。

  • 更多精彩内容，敬请关注我的博客！