如何向 VS Code 添加 css 代码片段

Question

是否有可能在 vs code 中添加包含多个元素或标签及其样式的 css 代码片段。

我已经了解了仅添加单个标签或元素的属性和值的基本方法，例如：

"reset the css": { "prefix": "resetcss", "body": [ "body { margin: 0}", "$1" ], "description": "Log output to console" }

但是我想添加（CSS RESET）作为一组元素，并将其样式作为一个片段：

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;
}

Thank You.

Answer 1

是的，您可以在 Visual Studio Code 中创建包含多个元素或标签及其样式的 CSS 代码片段。具体方法如下：

1. 打开 Visual Studio Code。
2. 转到“首选项”菜单并选择“用户片段”。
3. 选择您要为其创建代码片段的语言（在本例中为 CSS）。

将片段代码添加到 JSON 文件并保存文件。现在，当您在 CSS 文件中输入 cssreset 或作为代码片段前缀传递的任何内容并按 Tab 时，将插入 CSS 重置代码块。

JSON 文件-

"CSS Reset": {
    "prefix": "cssreset",
    "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;",
        "}"
    ],
    "description": "CSS Reset"
}