Visual Studio Code - 技巧与窍门 - 代码片段

如果您以前使用过 Visual Studio，那么您可能已经对 Snippets 有所了解。
此功能在 VsCode 中也是开箱即用的。
如果您打开一个 JavaScript 文件或 TypeScript 文件并输入内容log，按下 TAB 键后，您将获得此结果。

VsCode 中已经实现了许多其他开箱即用的代码片段，但 VsCode 团队的贡献远不止于此。VsCode
允许您创建自己的代码片段，或从扩展中导入它们。但这还不是全部，您可以创建适用于所有项目的自定义代码片段，或者为特定项目创建可供该项目所有团队访问的代码片段。了解
完这些之后，让我们看看代码片段的工作原理以及如何创建自己的代码片段。
首先，要创建新的代码片段，您必须打开命令面板，输入“Configure User snippets”并按 ENTER。之后，VsCode 会为您推荐一些选项，其中两个是：

• 新的全局片段文件...
• ' ' 的新片段文件name of your project...

选择你的偏好设置，再次按下 ENTER 键，输入代码片段的名称，最后按下 ENTER 键。瞧，你的第一个代码片段配置就完成了。

如您所见，您可以在两种配置类型之间进行选择：全局代码片段和项目代码片段。
毋庸置疑，前者会创建一个只有您自己可以访问的代码片段文件，而后者则创建一个所有项目团队都可以访问的代码片段文件（如果您将文件提交到存储库中）。
根据选择，VsCode 会在两个不同的文件夹中创建代码片段文件。
全局代码片段保存在此路径下Code/User/snippets/{snippet-name}.code-snippets，Code文件夹会根据您的平台而有所不同：

• 视窗%APPDATA%\Code\User\
• macOS$HOME/Library/Application\ Support/Code/User/
• Linux$HOME/.config/Code/User/

您可以在此处找到有关该配置的更多信息

相反，项目片段保存在.vscode项目根目录下的文件夹内，并且片段文件具有这种形式{snippet-name}.code-snippets。

除了这两个选择之间的区别之外，在创建流之后，VsCode 会为您创建包含以下内容的文件

{
    // Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and 
    // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope 
    // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is 
    // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: 
    // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. 
    // Placeholders with the same ids are connected.
    // Example:
    // "Print to console": {
    //  "scope": "javascript,typescript",
    //  "prefix": "log",
    //  "body": [
    //      "console.log('$1');",
    //      "$2"
    //  ],
    //  "description": "Log output to console"
    // }
}

这是一个代码片段的例子，具体来说这个例子就是本文开头看到的日志代码片段。

但是让我们继续创建一个代码片段来生成获取请求。

{
  "Fetch Request": {
    "scope": "javascript,typescript",
    "prefix": "fetch",
    "body": [
      "fetch(\"$1\")",
      " .then(response => response.json())",
      " .then(data => $2)",
      " .catch(error => console.error(error));"
    ],
    "description": "Fetch request"
  }
}

首先让我们看看这个片段是如何工作的

您可以看到，输入fetch并按下 ENTER 或 TAB 键，VsCode 会将代码片段的代码插入文件中。但让我们看看代码片段文件是如何组成的。
首先，代码片段文件是一个 JSON 文件。
要做的第一件事是给出代码片段的名称，在本例中，Fetch Request这是标识此文件内代码片段的属性。在这里，您必须描述您的代码片段。
描述的第一个属性是scope，此属性标识相对于此代码片段的语言，在本例中，代码片段是为 javascript 和 typescript 编写的（如果您不指示此属性，您的代码片段将出现在所有文件中）。在此示例中，
属性prefix标识在 VsCode 的 IntelliSense 中查找代码片段时要键入的单词。description 属性用于描述代码片段的原因。body 属性是代码片段生成的代码。如您所见，此属性是一个数组，其中每一项都是生成代码的一行。主体内部使用了两个“奇怪”的符号：$1 和 $2。这种特殊的语法有助于 VsCode 理解用户在此代码片段中需要指定两件事：获取的 URL 和用于操作获取结果的函数。要在编辑器中填写参数时在参数之间跳转，您必须使用 TAB 键。 正如您所见，创建代码片段并不难，但让我们看另一个案例来演示 VsCode 提供的其他可能性。 在此示例中，该代码片段创建了一个具有 FC 类型和 Props 的 React Function 组件。fetch

{
  "React Functional Component with Props": {
    "scope": "typescriptreact",
    "prefix": "rfcpt",
    "body": [
      "import { FC } from 'react'",
      "",
      "type ${1:$TM_FILENAME_BASE}Props = {",
      "  $2",
      "}",
      "",
      "const ${1:$TM_FILENAME_BASE}: FC<${1:$TM_FILENAME_BASE}Props> = (props) => {",
      "  return <>$3</>",
      "}",
      "",
      "export default ${1:$TM_FILENAME_BASE};"
    ],
    "description": "React.FC component with Props in TypeScript"
  }
}

在此示例中，一个参数具有特殊语法${1:$TM_FILENAME_BASE}，这表示当代码片段出现时，第一个参数将仅使用文件名进行编译，但用户可以根据需要对其进行编辑。您可以在 VsCode 中指定许多其他特殊变量来预填充参数，您可以在此处
找到所有可能性。

您可以在单个文件中指定多个代码片段。为此，您需要在文件中创建另一个部分，该部分以名称开头，并在其中填充有关另一个代码片段的信息。这里有一个示例。

此功能在扩展中被广泛使用，您可以找到许多为您创建代码片段的扩展，例如：Angular Snippets、ES7+ React/Redux/React-Native 代码片段...

现在，您已经了解了创建代码片段所需的所有概念（如果需要）。此功能通常可以帮助我自动生成应用程序中某些特定可重复组件的结构，例如 React 组件、Angular 组件或其他类似的组件。我希望此功能也能帮助您节省编写可重复代码的时间。

以上就是所有片段，各位！
再见！👋

注意：你可以在这里找到这篇文章的相关代码