代码片段 #

什么是代码片段？ #

代码片段（Snippets）是预定义的代码模板，可以通过简短的触发词快速插入常用代码结构。

text 
┌─────────────────────────────────────────────────────────────┐
│                     代码片段示例                              │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  输入触发词：                                                 │
│  for                                                        │
│                                                             │
│  自动展开为：                                                 │
│  for (let i = 0; i < array.length; i++) {                   │
│      const element = array[i];                              │
│  }                                                          │
│                                                             │
└─────────────────────────────────────────────────────────────┘

使用代码片段 #

触发片段 #

功能 Mac Windows/Linux 说明
触发建议 ⌃Space Ctrl+Space 显示代码片段建议
接受片段 Tab Tab 插入选中的片段
下一个占位符 Tab Tab 跳转到下一个占位符
上一个占位符 ⇧Tab Shift+Tab 跳转到上一个占位符

使用流程 #

text 
1. 输入触发词（如 "for"、"if"、"func"）
2. 按 Tab 或 Enter 接受建议
3. 使用 Tab 在占位符之间跳转
4. 填写占位符内容

内置代码片段 #

JavaScript 常用片段 #

触发词 展开内容
log console.log()
for for 循环
forof for…of 循环
foreach forEach 方法
if if 语句
ife if…else 语句
switch switch 语句
try try…catch 语句
function 函数声明
arrow 箭头函数
import import 语句
require require 语句

HTML 常用片段 #

触发词 展开内容
html HTML 文档结构
head head 元素
body body 元素
div div 元素
span span 元素
a 链接元素
img 图片元素
table 表格结构
form 表单元素
input 输入框

CSS 常用片段 #

触发词 展开内容
bg background 属性
bd border 属性
fs font-size 属性
fw font-weight 属性
ta text-align 属性
m margin 属性
p padding 属性
w width 属性
h height 属性
flex display: flex

创建自定义片段 #

打开片段配置 #

text 
1. 按 ⌘⇧P / Ctrl+Shift+P
2. 输入 "Configure User Snippets"
3. 选择语言（如 "javascript.json"）

片段语法 #

json 
{
    "片段名称": {
        "prefix": "触发词",
        "body": [
            "代码行1",
            "代码行2",
            "代码行3"
        ],
        "description": "片段描述"
    }
}

创建示例 #

示例1：React 组件片段 #

json 
{
    "React Functional Component": {
        "prefix": "rfc",
        "body": [
            "import React from 'react';",
            "",
            "const ${1:ComponentName} = () => {",
            "    return (",
            "        <div>",
            "            $0",
            "        </div>",
            "    );",
            "};",
            "",
            "export default ${1:ComponentName};"
        ],
        "description": "Create a React functional component"
    }
}

示例2：Console Log 片段 #

json 
{
    "Console Log Variable": {
        "prefix": "clg",
        "body": [
            "console.log('${1:variable}:', ${1:variable});"
        ],
        "description": "Log variable with name"
    }
}

示例3：函数注释片段 #

json 
{
    "Function Comment": {
        "prefix": "cmt",
        "body": [
            "/**",
            " * ${1:函数描述}",
            " * @param {${2:type}} ${3:param} - ${4:参数描述}",
            " * @returns {${5:type}} ${6:返回值描述}",
            " */"
        ],
        "description": "Create function comment"
    }
}

片段变量 #

内置变量 #

变量 说明
$1, $2, $3 占位符（按 Tab 跳转）
$0 最终光标位置
${1:default} 带默认值的占位符
`${1 a,b,c

特殊变量 #

变量 说明
TM_FILENAME 当前文件名
TM_FILENAME_BASE 文件名（不含扩展名）
TM_DIRECTORY 当前文件目录
TM_FILEPATH 当前文件完整路径
CURRENT_YEAR 当前年份
CURRENT_MONTH 当前月份
CURRENT_DATE 当前日期
CURRENT_HOUR 当前小时
CURRENT_MINUTE 当前分钟
CURRENT_SECOND 当前秒
CURRENT_DAY_NAME 当前星期名
RANDOM 随机数
UUID UUID

变量示例 #

文件名片段 #

json 
{
    "File Header": {
        "prefix": "header",
        "body": [
            "/**",
            " * @file ${TM_FILENAME}",
            " * @description ${1:文件描述}",
            " * @author ${2:作者}",
            " * @date ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}",
            " */"
        ],
        "description": "Add file header comment"
    }
}

React 组件（使用文件名） #

json 
{
    "React Component from Filename": {
        "prefix": "rfcn",
        "body": [
            "import React from 'react';",
            "",
            "const ${TM_FILENAME_BASE} = () => {",
            "    return (",
            "        <div>",
            "            $0",
            "        </div>",
            "    );",
            "};",
            "",
            "export default ${TM_FILENAME_BASE};"
        ],
        "description": "Create React component with filename"
    }
}

片段进阶技巧 #

1. 嵌套占位符 #

json 
{
    "Nested Placeholder": {
        "prefix": "test",
        "body": [
            "${1:outer ${2:inner} text}"
        ]
    }
}

2. 正则替换 #

json 
{
    "CamelCase to snake_case": {
        "prefix": "snake",
        "body": [
            "${1/([A-Z])/_${1:/downcase}/g}"
        ]
    }
}

3. 多选项占位符 #

json 
{
    "Variable Declaration": {
        "prefix": "vard",
        "body": [
            "${1|const,let,var|} ${2:name} = ${3:value};"
        ]
    }
}

项目级片段 #

创建项目片段 #

在项目 .vscode 目录下创建 *.code-snippets 文件：

text 
项目目录/
├── .vscode/
│   └── project.code-snippets
└── ...

项目片段示例 #

json 
{
    "Project Component": {
        "scope": "javascript,typescript",
        "prefix": "pcomp",
        "body": [
            "import React from 'react';",
            "import styles from './${TM_FILENAME_BASE}.module.css';",
            "",
            "export const ${TM_FILENAME_BASE} = () => {",
            "    return (",
            "        <div className={styles.container}>",
            "            $0",
            "        </div>",
            "    );",
            "};"
        ]
    }
}

片段工作流 #

text 
┌─────────────────────────────────────────────────────────────┐
│                     代码片段使用流程                          │
├─────────────────────────────────────────────────────────────┤
│                                                             │
│  识别重复代码                                                │
│     │                                                       │
│     ├─────▶ 创建片段                                         │
│     │        │                                              │
│     │        ├─▶ 打开片段配置                                │
│     │        │                                              │
│     │        ├─▶ 定义触发词                                  │
│     │        │                                              │
│     │        ├─▶ 编写片段内容                                │
│     │        │                                              │
│     │        └─▶ 添加占位符                                  │
│     │                                                       │
│     └─────▶ 使用片段                                         │
│              │                                              │
│              ├─▶ 输入触发词                                  │
│              │                                              │
│              ├─▶ 按 Tab 接受                                │
│              │                                              │
│              └─▶ 填写占位符                                  │
│                                                             │
└─────────────────────────────────────────────────────────────┘

快捷键速查表 #

片段操作 #

功能 Mac Windows/Linux
触发建议 ⌃Space Ctrl+Space
接受片段 Tab Tab
下一个占位符 Tab Tab
上一个占位符 ⇧Tab Shift+Tab

常见问题 #

Q: 片段不显示？ #

A: 检查片段的 scope 设置，确保与当前文件类型匹配。

Q: 如何查看所有可用片段？ #

A: 按 ⌘⇧P / Ctrl+Shift+P，输入 “Insert Snippet”。

Q: 如何导入/导出片段？ #

A: 片段存储在用户配置目录，可以直接复制 JSON 文件。

练习建议 #

练习1：使用内置片段 #

text 
1. 创建 JavaScript 文件
2. 输入 "log" 按 Tab
3. 输入 "for" 按 Tab
4. 输入 "if" 按 Tab

练习2：创建自定义片段 #

text 
1. 打开 JavaScript 片段配置
2. 创建一个常用的代码片段
3. 测试片段是否正常工作

练习3：使用变量 #

text 
1. 创建带文件名变量的片段
2. 创建带日期变量的片段
3. 测试变量是否正确展开

下一步 #

现在你已经掌握了代码片段，接下来学习：

最后更新：2026-04-11