vs code 添加代码片段的方法有两种：1. 用户自定义代码片段，通过命令面板选择“configure user snippets”，选择对应语言并编辑.json文件，定义prefix、body、description等字段，保存后即可在代码中通过快捷键触发；2. 安装扩展，通过扩展市场搜索并安装相关代码片段扩展，如“es7 react/redux/graphql/react-native snippets”，安装后按指定前缀加tab键使用。
VS Code 添加代码片段，简单来说，就是让你常用的一段代码，比如一个函数模板、一个循环结构，可以像快捷键一样快速生成。这能大幅提升开发效率，避免重复劳动。
解决方案
VS Code 提供了强大的代码片段功能，可以通过用户自定义或者安装扩展的方式添加代码片段。下面详细介绍两种方法：
1. 用户自定义代码片段
这是最灵活的方式，你可以根据自己的需求定制任何代码片段。
-
打开用户代码片段配置: 在 VS Code 中，按下 Ctrl+Shift+P (windows/linux) 或 Cmd+Shift+P (Mac)，打开命令面板，输入 “snippet”，选择 “Configure User Snippets”。
-
选择语言: 选择你要配置代码片段的语言，比如 “JavaScript”、”python“、”html” 等。 VS Code 会打开一个 .json 文件，如果没有，它会创建一个。
-
编写代码片段: 在 .json 文件中，你可以定义你的代码片段。 一个代码片段的基本结构如下：
{ "Snippet Name": { "prefix": "shortcut", "body": [ "// Your code snippet here", "// Use $1, $2, ... for tab stops", "// Use ${1:default text} for default text in tab stops" ], "description": "A description of the snippet" } }
* `Snippet Name`: 代码片段的名称，随意起，方便自己识别就行。 * `prefix`: 触发代码片段的快捷方式，比如输入 "shortcut" 然后按下 `Tab` 键，就会生成代码片段。 * `body`: 代码片段的主体，是一个字符串数组，每一项代表一行代码。 可以使用 `$1`, `$2` 等作为占位符，按下 `Tab` 键可以在这些占位符之间跳转。 `${1:default text}` 表示占位符 1，并带有默认文本 "default text"。 * `description`: 代码片段的描述，在 VS Code 的代码提示中会显示。
- 示例: 假设我们要创建一个 JavaScript 的 console.log 代码片段，可以这样配置：
{ "Console Log": { "prefix": "clog", "body": [ "console.log('$1', $2);", "$3" ], "description": "快速生成 console.log 语句" } }
保存这个 `.json` 文件，然后在 JavaScript 文件中输入 "clog"，按下 `Tab` 键，就会生成 `console.log('', );`，光标会停留在第一个引号内，可以输入要打印的内容，然后按下 `Tab` 键，光标会跳到第二个参数的位置，继续输入，最后按下 `Tab` 键，光标会跳到下一行。
- 转义字符: 如果你的代码片段中包含特殊字符，比如 或 “，需要进行转义。 转义为 ， ” 转义为 “。
2. 安装代码片段扩展
VS Code 市场上有大量的代码片段扩展，涵盖各种语言和框架。
-
搜索扩展: 在 VS Code 中，点击左侧的扩展按钮 (或按下 Ctrl+Shift+X / Cmd+Shift+X)，搜索 “snippets” 或具体的语言/框架名称，比如 “javascript snippets”、”react snippets”。
-
安装扩展: 选择一个评分高、下载量大的扩展，点击 “Install” 安装。
-
使用扩展: 安装完成后，按照扩展的说明文档使用代码片段。 通常，扩展会在你输入特定的前缀时，自动弹出代码提示。
例如，安装了 “ES7 React/Redux/GraphQL/React-Native snippets” 扩展后，输入 “rfc” 然后按下 Tab 键，就可以快速生成 React 函数组件的代码。
如何管理和组织 VS Code 代码片段，使其更易于查找和使用？
管理代码片段的关键在于清晰的命名、合理的分类和有效的搜索。
-
清晰的命名: 给每个代码片段起一个有意义的名字，方便你在代码提示中快速找到它。 名字应该简洁明了，能够准确描述代码片段的功能。
-
合理的分类: 如果你有很多代码片段，可以按照语言、框架、功能等进行分类。 例如，可以创建不同的 .json 文件，分别存放 JavaScript、python、React 等代码片段。
-
使用描述: 在代码片段的 description 字段中，添加详细的描述，说明代码片段的用途、用法和注意事项。 这有助于你在代码提示中更好地理解代码片段的功能。
-
善用搜索: VS Code 的代码提示功能支持模糊搜索，你可以输入代码片段名称或描述中的关键词来查找代码片段。
-
代码片段管理器扩展: 有一些扩展可以帮助你更好地管理代码片段，比如 “Snippet Manager”。 这些扩展通常提供更强大的搜索、编辑和组织功能。
-
版本控制: 将你的代码片段文件纳入版本控制系统 (比如 git)，可以方便地备份、同步和分享你的代码片段。
代码片段中的占位符 $1, $2 和 ${1:default text} 有什么区别和用法？
占位符是代码片段中非常重要的组成部分，它们允许你在生成代码片段后，快速地编辑和修改代码。
-
$1, $2, $3, …: 这些是简单的占位符，表示按下 Tab 键后光标跳转的位置。 $1 表示第一个占位符，$2 表示第二个占位符，以此类推。 它们按照数字顺序排列，按下 Tab 键会依次跳转到这些占位符。
-
${1:default text}, ${2:another text}, …: 这些是带有默认文本的占位符。 1 和 2 仍然表示占位符的顺序，default text 和 another text 是默认文本。 当代码片段生成时，这些占位符会被默认文本填充，你可以直接修改它们。 如果没有修改，按下 Tab 键会直接跳到下一个占位符。
-
${1}, ${2}, …: 虽然看起来和 $1, $2 类似，但它们的作用略有不同。 ${1} 允许你使用更复杂的表达式，比如变量、函数调用等。 在某些情况下，${1} 可以更好地处理特殊字符和转义。
-
$0: 这是一个特殊的占位符，表示代码片段生成后，光标的最终位置。 如果没有 $0，光标会停留在代码片段的最后一行。
示例:
{ "Function Template": { "prefix": "func", "body": [ "function ${1:functionName}(${2:parameters}) {", " ${3:// Your code here}", " return ${4:returnValue};", "}$0" ], "description": "快速生成函数模板" } }
在这个例子中：
- 输入 “func” 然后按下 Tab 键，会生成函数模板。
- 光标会停留在 ${1:functionName} 的位置，可以输入函数名。 默认文本是 “functionName”。
- 按下 Tab 键，光标会跳到 ${2:parameters} 的位置，可以输入函数参数。 默认文本是 “parameters”。
- 按下 Tab 键，光标会跳到 ${3:// Your code here} 的位置，可以输入函数体代码。
- 按下 Tab 键，光标会跳到 ${4:returnValue} 的位置，可以输入返回值。 默认文本是 “returnValue”。
- 按下 Tab 键，光标会跳到 $0 的位置，也就是函数定义的最后一行。
如何在 VS Code 代码片段中使用变量和表达式？
VS Code 代码片段支持使用一些预定义的变量和简单的表达式，可以让你更灵活地生成代码。
预定义变量:
- $TM_FILENAME: 当前文件的文件名。
- $TM_FILENAME_BASE: 当前文件的文件名（不包含扩展名）。
- $TM_DIRECTORY: 当前文件的目录。
- $TM_FILEPATH: 当前文件的完整路径。
- $TM_CURRENT_LINE: 当前行的内容。
- $TM_CURRENT_WORD: 光标下的单词。
- $TM_SELECTED_TEXT: 选中的文本。
- $CURRENT_YEAR: 当前年份。
- $CURRENT_YEAR_SHORT: 当前年份的后两位。
- $CURRENT_MONTH: 当前月份（两位数）。
- $CURRENT_MONTH_NAME: 当前月份的英文名称。
- $CURRENT_MONTH_NAME_SHORT: 当前月份的英文简称。
- $CURRENT_DATE: 当前日期（两位数）。
- $CURRENT_DAY_NAME: 当前星期的英文名称。
- $CURRENT_DAY_NAME_SHORT: 当前星期的英文简称。
- $CURRENT_HOUR: 当前小时（24 小时制）。
- $CURRENT_MINUTE: 当前分钟。
- $CURRENT_SECOND: 当前秒。
- $RANDOM: 随机的 6 位十六进制数。
- $RANDOM_HEX: 随机的 6 位十六进制数。
- $UUID: 一个 UUID。
- $BLOCK_COMMENT_START: 当前语言的块注释开始标记。
- $BLOCK_COMMENT_END: 当前语言的块注释结束标记。
- $LINE_COMMENT: 当前语言的行注释标记。
表达式:
VS Code 代码片段支持使用 TM_SELECTED_TEXT 变量和正则表达式来进行简单的文本替换。 语法是 ${TM_SELECTED_TEXT/regexp/format/}。
- TM_SELECTED_TEXT: 选中的文本。
- regexp: 一个正则表达式。
- format: 替换格式。
示例:
{ "Surround with console.log": { "prefix": "sclog", "body": [ "console.log('$TM_FILENAME_BASE: ${TM_SELECTED_TEXT}');$0" ], "description": "用 console.log 包裹选中的文本，并显示文件名" }, "Convert to Upper Case": { "prefix": "upper", "body": [ "${TM_SELECTED_TEXT/([a-z]+)/U$1/g}" ], "description": "将选中的文本转换为大写" } }
- Surround with console.log 代码片段会将选中的文本用 console.log 包裹，并显示当前文件的文件名（不包含扩展名）。
- Convert to Upper Case 代码片段会将选中的文本转换为大写。 ([a-z]+) 是一个正则表达式，匹配所有小写字母。 U$1 表示将第一个捕获组（也就是匹配到的小写字母）转换为大写。 g 表示全局匹配，替换所有匹配到的文本。
这些变量和表达式可以让你创建更智能、更灵活的代码片段，减少手动输入，提高开发效率。
如何在不同项目中使用相同的 VS Code 代码片段？
让代码片段在不同项目中可用，主要有以下几种方法：
-
全局用户代码片段: 这是最简单的方法。 你只需要在用户代码片段配置文件中定义代码片段，它们就会在所有项目中生效。 用户代码片段配置文件位于：
- Windows: %APPDATA%CodeUsersnippets
- macos: ~/Library/Application Support/Code/User/snippets
- Linux: ~/.config/Code/User/snippets
-
工作区代码片段: 如果你只想在特定的项目中使用某些代码片段，可以创建工作区代码片段。 在 VS Code 中，打开项目文件夹，然后选择 “File” -> “Preferences” -> “Configure Workspace Snippets”。 VS Code 会在项目文件夹中创建一个 .vscode 文件夹，并在其中创建一个 .code-snippets 文件。 在这个文件中定义的代码片段只会在当前项目中生效。
-
扩展: 你可以将你的代码片段打包成一个 VS Code 扩展，然后发布到 VS Code 市场上。 这样，其他人就可以安装你的扩展，并在他们的项目中使用你的代码片段。 这种方法比较复杂，但可以方便地分享你的代码片段。
-
共享代码片段文件: 你可以将你的代码片段文件 (.json 或 .code-snippets) 放到一个共享的存储空间 (比如 Git 仓库、云盘等)，然后在不同的项目中链接或复制这些文件。 这种方法比较灵活，但需要手动维护文件的同步。
选择哪种方法取决于你的需求：
- 如果你想让代码片段在所有项目中都可用，使用全局用户代码片段。
- 如果你只想在特定的项目中使用代码片段，使用工作区代码片段。
- 如果你想分享你的代码片段给其他人，创建扩展或共享代码片段文件。
无论选择哪种方法，都需要注意代码片段文件的版本控制和同步，确保在不同的项目中使用的代码片段是最新的。
