VS Code 代码片段如何创建和使用？
VS Code 代码片段（Snippets）与自定义模板VS Code 代码片段是可重用的代码模板，可以通过快捷方式快速插入常用代码模式，显著提高编码效率。代码片段文件代码片段存储在 .vscode/*.code-snippets 文件中，或全局存储在用户目录下。创建代码片段通过菜单：File > Preferences > User Snippets选择语言或创建全局代码片段编辑 JSON 格式的代码片段文件代码片段语法基本结构{ "Snippet Name": { "prefix": "trigger", "body": [ "code line 1", "code line 2" ], "description": "Snippet description" }}占位符（Tabstops）使用 $1, $2 等定义光标位置：{ "Function Template": { "prefix": "func", "body": [ "function ${1:functionName}(${2:parameters}) {", "\t$0", "}" ], "description": "Create a function" }}选择占位符（Choice）提供多个选项供选择：{ "Console Log": { "prefix": "log", "body": [ "console.${1|log,warn,error|}($2);" ], "description": "Console log statement" }}变量（Variables）使用预定义变量：{ "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{ "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{ "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{ "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）对变量进行转换：{ "Import Statement": { "prefix": "import", "body": [ "import { ${1:${TM_FILENAME_BASE/(.*)/${1:/capitalize}/}} } from './${1}';" ], "description": "Import statement with capitalized name" }}嵌套代码片段在代码片段中调用其他代码片段。全局代码片段创建适用于所有语言的代码片段，文件名为 global.code-snippets：{ "TODO Comment": { "prefix": "todo", "body": [ "// TODO: ${1:description} - ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}" ], "description": "TODO comment with date" }}使用技巧触发方式: 输入前缀后按 Tab 键跳转占位符: 按 Tab 在占位符间跳转多光标编辑: 使用相同的占位符编号实现多光标编辑代码片段优先级: 项目代码片段 > 全局代码片段注意事项代码片段文件使用 UTF-8 编码避免使用过长的前缀提供清晰的描述测试代码片段在不同场景下的表现考虑团队协作，共享有用的代码片段
