vscode如何添加代码片段_片段管理教程介绍-VSCode-PHP中文网

vs code 添加代码片段的方法有两种：1. 用户自定义代码片段，通过命令面板选择“configure user snippets”，选择对应语言并编辑.json文件，定义prefix、body、description等字段，保存后即可在代码中通过快捷键触发；2. 安装扩展，通过扩展市场搜索并安装相关代码片段扩展，如“es7 react/redux/graphql/react-native snippets”，安装后按指定前缀加tab键使用。

vscode如何添加代码片段_片段管理教程介绍

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 仓库、云盘等)，然后在不同的项目中链接或复制这些文件。这种方法比较灵活，但需要手动维护文件的同步。