如何在VS Code中添加包含多元素的CSS代码片段（含CSS Reset）

当然可以，按照以下步骤就能把完整的CSS Reset代码添加为VS Code代码片段：

1. 打开用户代码片段配置文件 #

按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）打开命令面板，输入Configure User Snippets，然后选择css.json（全局CSS代码片段，所有项目生效）或项目中的.code-snippets文件（仅当前项目生效）。

2. 添加完整的CSS Reset代码片段 #

将以下代码粘贴到配置文件中（可替换或添加到现有内容里）：

"Complete CSS Reset": {
  "prefix": "resetcss",
  "body": [
    "html, body, div, span, applet, object, iframe,",
    "h1, h2, h3, h4, h5, h6, p, blockquote, pre,",
    "a, abbr, acronym, address, big, cite, code,",
    "del, dfn, em, img, ins, kbd, q, s, samp,",
    "small, strike, strong, sub, sup, tt, var,",
    "b, u, i, center,",
    "dl, dt, dd, ol, ul, li,",
    "fieldset, form, label, legend,",
    "table, caption, tbody, tfoot, thead, tr, th, td,",
    "article, aside, canvas, details, embed, ",
    "figure, figcaption, footer, header, hgroup, ",
    "menu, nav, output, ruby, section, summary,",
    "time, mark, audio, video {",
    "  margin: 0;",
    "  padding: 0;",
    "  border: 0;",
    "  font-size: 100%;",
    "  font: inherit;",
    "  vertical-align: baseline;",
    "}",
    "",
    "/* HTML5 display-role reset for older browsers */",
    "article, aside, details, figcaption, figure, ",
    "footer, header, hgroup, menu, nav, section {",
    "  display: block;",
    "}",
    "",
    "body {",
    "  line-height: 1;",
    "}",
    "",
    "ol, ul {",
    "  list-style: none;",
    "}",
    "",
    "blockquote, q {",
    "  quotes: none;",
    "}",
    "",
    "blockquote:before, blockquote:after,",
    "q:before, q:after {",
    "  content: '';",
    "  content: none;",
    "}",
    "",
    "table {",
    "  border-collapse: collapse;",
    "  border-spacing: 0;",
    "}",
    "$1"
  ],
  "description": "插入完整的CSS Reset代码"
}

3. 使用代码片段 #

保存配置文件后，打开任意CSS文件，输入你设置的前缀resetcss，按下Tab键就能插入完整的CSS Reset代码，光标会自动停留在$1标记的位置，方便继续编写后续样式。

关键说明 #

• 把CSS代码按行拆分为body数组的元素，能保证插入后的格式和原代码完全一致。
• prefix可以根据习惯修改（比如改成reset），只要方便记忆即可。
• description用于在代码片段提示中说明作用，建议清晰描述。

内容的提问来源于stack exchange，提问作者Ayoub El Haraoui