VS Code 代码片段如何创建和使用？ - 面试题

VS Code 代码片段（Snippets）与自定义模板

VS Code 代码片段是可重用的代码模板，可以通过快捷方式快速插入常用代码模式，显著提高编码效率。

代码片段文件

代码片段存储在 .vscode/*.code-snippets 文件中，或全局存储在用户目录下。

创建代码片段

通过菜单：File > Preferences > User Snippets
选择语言或创建全局代码片段
编辑 JSON 格式的代码片段文件

代码片段语法

基本结构

json
{
  "Snippet Name": {
    "prefix": "trigger",
    "body": [
      "code line 1",
      "code line 2"
    ],
    "description": "Snippet description"
  }
}

占位符（Tabstops）

使用 $1, $2 等定义光标位置：

json
{
  "Function Template": {
    "prefix": "func",
    "body": [
      "function ${1:functionName}(${2:parameters}) {",
      "\t$0",
      "}"
    ],
    "description": "Create a function"
  }
}

选择占位符（Choice）

提供多个选项供选择：

json
{
  "Console Log": {
    "prefix": "log",
    "body": [
      "console.${1|log,warn,error|}($2);"
    ],
    "description": "Console log statement"
  }
}

变量（Variables）

使用预定义变量：

json
{
  "File Header": {
    "prefix": "header",
    "body": [
      "// File: ${TM_FILENAME}",
      "// Author: ${TM_USERNAME}",
      "// Date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}"
    ],
    "description": "File header comment"
  }
}

常用变量

TM_FILENAME: 当前文件名
TM_FILENAME_BASE: 不含扩展名的文件名
TM_DIRECTORY: 当前文件目录
TM_FILEPATH: 当前文件完整路径
CLIPBOARD: 剪贴板内容
CURRENT_YEAR: 当前年份
CURRENT_MONTH: 当前月份
CURRENT_DATE: 当前日期

语言特定代码片段

JavaScript/TypeScript

json
{
  "React Component": {
    "prefix": "react-component",
    "body": [
      "import React from 'react';",
      "",
      "interface ${1:ComponentName}Props {",
      "\t${2:prop}: ${3:type};",
      "}",
      "",
      "const ${1:ComponentName}: React.FC<${1:ComponentName}Props> = ({ ${2:prop} }) => {",
      "\treturn (",
      "\t\t<div>",
      "\t\t\t${4:content}",
      "\t\t</div>",
      "\t);",
      "};",
      "",
      "export default ${1:ComponentName};"
    ],
    "description": "React functional component with TypeScript"
  }
}

Python

json
{
  "Python Class": {
    "prefix": "class",
    "body": [
      "class ${1:ClassName}:",
      "\t\"\"\"${2:Class description}\"\"\"",
      "\t",
      "\tdef __init__(self${3:, args}):",
      "\t\t${4:pass}"
    ],
    "description": "Python class template"
  }
}

HTML

json
{
  "HTML5 Boilerplate": {
    "prefix": "html5",
    "body": [
      "<!DOCTYPE html>",
      "<html lang=\"en\">",
      "<head>",
      "\t<meta charset=\"UTF-8\">",
      "\t<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
      "\t<title>${1:Page Title}</title>",
      "</head>",
      "<body>",
      "\t${2:content}",
      "</body>",
      "</html>"
    ],
    "description": "HTML5 boilerplate"
  }
}

高级功能

转换（Transforms）

对变量进行转换：

json
{
  "Import Statement": {
    "prefix": "import",
    "body": [
      "import { ${1:${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}} } from './${1}';"
    ],
    "description": "Import statement with capitalized name"
  }
}

嵌套代码片段

在代码片段中调用其他代码片段。

全局代码片段

创建适用于所有语言的代码片段，文件名为 global.code-snippets：

json
{
  "TODO Comment": {
    "prefix": "todo",
    "body": [
      "// TODO: ${1:description} - ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}"
    ],
    "description": "TODO comment with date"
  }
}

使用技巧

触发方式: 输入前缀后按 Tab 键
跳转占位符: 按 Tab 在占位符间跳转
多光标编辑: 使用相同的占位符编号实现多光标编辑
代码片段优先级: 项目代码片段 > 全局代码片段

注意事项

代码片段文件使用 UTF-8 编码
避免使用过长的前缀
提供清晰的描述
测试代码片段在不同场景下的表现
考虑团队协作，共享有用的代码片段