vscode 的 snippets 代码片段有哪些高级的使用技巧？1. 创建代码片段 1.1 全局代码片段全局代码片段

1. 创建代码片段

1.1 全局代码片段

全局代码片段可以在所有项目中使用。要创建全局代码片段，可以按照以下步骤操作：

打开 VS Code。
按下 Ctrl+Shift+P（Windows/Linux）或 Cmd+Shift+P（Mac）打开命令面板。
输入 Preferences: Configure User Snippets 并选择它。
选择语言，例如 javascript.json，来创建针对 JavaScript 的代码片段文件。

1.2 项目代码片段

项目代码片段仅在当前工作区使用。创建方法与全局代码片段类似，但需要选择 New Global Snippets file 并手动将文件保存到项目文件夹中。

2. 代码片段的基本结构

一个代码片段的基本结构如下：

{
  "Print to console": {
    "prefix": "log",
    "body": [
      "console.log('$1');",
      "$2"
    ],
    "description": "Log output to console"
  }
}

Print to console：代码片段的名称。
prefix：触发片段的关键词。
body：代码片段的内容，可以是字符串数组或单个字符串。
description：对代码片段的描述。

3. 高级用法

3.1 占位符

占位符用来定义光标停留的位置，方便开发者填写代码。使用 $ 符号和数字来定义占位符。

"body": [
  "function $1($2) {",
  "  $0",
  "}"
]

$1：第一个占位符。
$2：第二个占位符。
$0：光标最后停留的位置。

3.2 选择项

选择项允许开发者在几个选项中选择一个值。

"body": [
  "const ${1|foo,bar,baz|} = require('$2');",
  "$0"
]

3.3 变量

变量可以自动填充一些常用的信息，如文件名、时间等。

"body": [
  "Created by ${TM_USERNAME} on ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}"
]

一些常用的变量包括：

${TM_FILENAME}：当前文件名。
${TM_DIRECTORY}：当前文件所在目录。
${CURRENT_YEAR}：当前年份。
${CURRENT_MONTH}：当前月份。
${CURRENT_DATE}：当前日期。

3.4 转义字符

在代码片段中，使用反斜杠 \ 来转义特殊字符。

"body": [
  "console.log(\"Hello, \\\"World\\\"\");"
]

4. 使用和管理代码片段

4.1 插入代码片段

要插入代码片段，只需在代码编辑器中输入前缀，然后按 Tab 键。

4.2 查看所有代码片段

你可以使用命令面板（Ctrl+Shift+P 或 Cmd+Shift+P），输入 Snippets，选择 Preferences: Configure User Snippets，然后查看和编辑所有代码片段。

5. 实例：创建复杂的代码片段

以下是一个复杂的 JavaScript 代码片段示例，展示了占位符、变量和转义字符的高级用法。

{
  "React Functional Component": {
    "prefix": "rfc",
    "body": [
      "import React from 'react';",
      "",
      "const ${1:ComponentName} = (${2:props}) => {",
      "  return (",
      "    <div>",
      "      $0",
      "    </div>",
      "  );",
      "};",
      "",
      "export default ${1:ComponentName};",
      "// Created by ${TM_USERNAME} on ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE}"
    ],
    "description": "Create a React functional component"
  }
}

prefix：rfc 是触发这个代码片段的前缀。
body：包含了占位符、变量和转义字符的代码块。
description：对这个代码片段的描述，便于识别。

通过以上步骤和技巧，你可以高效地创建和使用代码片段，从而提升开发效率。在 VS Code 中，代码片段不仅可以用于代码的快速编写，还可以用于模板化重复代码，极大地减少了手动输入的时间和错误。