VSCode 用户代码片段里怎么插入带缩进的 CSS 代码？

书生シ迁迁提问于 2026-03-10 09:33:21 阅读 54

工具

我在配置 VSCode 的用户代码片段（User Snippets）时，想插入一段 CSS，但缩进总是不对。我试过直接复制样式进去，也试过用 t 转义，可生成的代码要么没缩进，要么格式乱掉。

比如我想输入这段：

.card {
    display: flex;
    padding: 16px;
    border-radius: 8px;
}

但在 snippet.json 里写完后，实际展开时所有行都顶格了，子属性没缩进。到底该怎么正确处理多行 CSS 的缩进啊？

VSCode 开发工具

我来解答赞 10 收藏

反馈

1 条解答

英旭 ☘︎ Lv1

啊这个坑我踩过，VSCode的snippet里处理缩进确实有点烦人。正确的做法是用美元符号加数字占位符来定义缩进层级，比如这样写：

{

    "css card snippet": {

        "prefix": "cardcss",

        "body": [

            ".card {",

            "    ${1:display: flex;}",

            "    ${2:padding: 16px;}",

            "    ${3:border-radius: 8px;}",

            "}"

        ],

        "description": "Card component CSS"

    }

}

关键点在于：
1. 每行用引号包起来，整个body是个数组
2. 用${1:default text}这种格式定义占位符，数字表示tab顺序
3. 缩进直接在字符串里用空格写死，别指望自动缩进

这样展开后就能保留你想要的缩进格式了。要是觉得写空格太麻烦，还有个野路子——直接在正经编辑器里写好看样式，然后整段复制过来用JSON转义工具处理下，不过我个人觉得还是手动控制更靠谱。

2026-03-10 10:00