在交付项目时，每个公司和开发人员都希望尽快完成。作为开发人员，我们总是寻找一些工具或技巧来提高开发速度和生产力。没有人喜欢花费数小时为程序编写每一行代码或在多个地方编写同一行代码。今天在这个博客中，我们将讨论 Visual Studio Code 中的代码片段，它们可以帮助您提高开发速度。让我们从什么是代码片段开始……
代码片段
代码片段是可用于在程序中输入重复代码模式（如循环、条件语句和其他常用代码）的模板。
Visual Studio Code 中的代码片段：在 Visual Studio Code 中，片段出现在 IntelliSense 中，其他建议如下：
来自ES7 React/Redux/GraphQL/React-Native 片段扩展的片段
让我们讨论一下 Visual Studio Code 中的不同代码片段……
1. 扩展的片段
有 VS Code 扩展市场上的许多扩展，其中包括代码段。如果您找到喜欢使用的插件，请安装它并重新启动 VS Code，新的代码段扩展将可用。一些在其语言支持中包含片段的流行扩展是：
- Python
- C/C++
- C＃
- ES7 React/Redux/GraphQL/React-Native 片段
- JavaScript (ES6) 代码片段
您可以从 VS-Code 的 Extensions Marketplace 选项卡安装这些扩展和许多其他流行的扩展，这些扩展在其语言支持中包含片段。
成功安装扩展程序后，单击扩展程序并向下滚动以查看可用代码段，如下所示
输入前缀以获取智能感知，然后按 Enter 以获取相应的代码片段。
2. 自定义代码片段
您还可以创建自己的片段，而无需任何扩展。要创建或编辑您自己的代码段，请转到文件 > 首选项下的用户代码段，然后选择代码段应显示的语言，或者如果代码段应针对所有语言显示，则选择新建全局代码段文件选项。片段文件是用 JSON 编写的，我们可以根据需要定义无限数量的片段。
要编写自己的自定义片段，您必须：
- 确定片段范围并选择相应的文件。
- 使用代码段语法编写您的自定义代码段。
确定代码段范围并选择对应的文件
片段的范围仅限于建议相关的片段，并且可以通过以下任一方式确定范围：
- 语言片段范围
- 项目片段范围
1. 语言片段范围
根据是在语言片段文件还是全局片段文件中定义，所有片段的范围都限定为一种、多种或所有语言（即全局）。对于语言范围的片段，从列表中选择语言（文件 > 首选项 > 用户片段），对于全局范围的片段，选择新建全局片段文件。
2. 项目片段范围
您可以将全局代码段文件（文件后缀为 .code-snippets 的 JSON）限定在您的项目范围内。对于项目范围的片段，请转到文件 > 首选项 > 用户片段，为（您的存储库名称）选项选择新建片段文件。
在如下所示的输入字段中键入您希望为代码片段文件提供的名称，然后按 Enter。
一个后缀为 .code-snippets 的 JSON 文件将在项目的根目录下的 .vscode 文件夹中创建，如下所示。
使用代码段语法编写自定义代码段
选择片段范围后。在代码段正文中编写您自己的自定义代码段。片段主体可以使用特殊结构来控制光标和插入的文本。一些受支持的功能及其语法是：
1. 制表符
制表位可用于使编辑器光标在片段内移动。 $1 , $2用于指定光标位置。数字表示访问制表位的顺序， $0表示最终光标位置。
2. 占位符
占位符是具有一些默认值的制表符，例如${1:SomeText} 。占位符文本将被插入和选择，以便可以轻松更改。占位符也可以嵌套，例如${1:SomeText ${2:SomeText}} 。
3. 选择
占位符也可以有选择作为值。语法是逗号分隔的值（选择），用竖线字符括起来，例如${1|choiceOne,choiceTwo,choiceThree|} 。当插入片段并选择占位符时，选择将提示用户选择其中一个值。
以下示例显示了相应代码的 JavaScript 代码和 JSON 片段文件。
示例 1：
Javascript
console.log()Javascript
function functionName() {
}// JSON code snippet file
{
"console log": {
"prefix": "cl",
"body": [
"console.log($1)"
],
"description": "console log"
}
}
说明：上述对象中的“控制台日志”属性是代码片段的名称， “cl”是前缀。每个片段都有一个 name 属性，该属性具有作为对象的值，该对象必须包含前缀、正文和描述。正文中的$1表示第一个制表符空间。
演示：上面的代码片段导致下面显示的行为。
请注意，当我们输入“cl”时，会弹出一个菜单，我选择“cl”选项并单击“Enter”，然后会显示前缀的相应代码。
示例 2：
Javascript
function functionName() {
}
// JSON code snippet file
{
"named function": {
"prefix": "nfn",
"body": [
"function ${1:functionName}($2){",
"$3",
"}"
],
"description": "named function"
}
}
说明： “named 函数”是片段的名称， “nfn”是片段的前缀。 ${1:functionName}表示第一个制表位上的占位符“functionName” 。
示例 3：
// JSON code snippet file
"Array Method": {
"prefix": "arrmth",
"body": [
"${1|forEach,map,filter,reduce,some|}((${2:item}) => {",
"$3",
"})"
],
"description": "Array Method"
}
说明： “Array Method”是代码片段的名称， “arrmth”是前缀。 “${1|forEach,map,filter,reduce,some|}”表示第一个制表位，您可以在其中选择任何人。 “${2:item}”表示具有占位符“item”的第二个制表位。 “$3”仅表示第三个制表位。
注意：您还可以使用代码段生成器工具编写 JSON，其中您只需要输入代码。