代码片段是预先定义的代码模板，能快速插入常用代码结构以提升开发效率。在 vs code 中配置代码片段的方法如下：1. 打开命令面板（ctrl+shift+p 或 cmd+shift+p）；2. 输入 “snippets” 并选择 “configure user snippets”；3. 选择全局或特定语言的片段文件进行编辑。每个代码片段包含名称、触发前缀、主体内容和描述，支持占位符 $1、$2 和带默认值的 ${1:default text}，还可使用变量如 ${tm_filename} 和 ${tm_current_year}。例如，可创建 react 函数组件模板或版权信息头部。代码片段可通过共享 json 文件或插件管理，也可与 emmet 缩写结合使用，实现 html 结构快速生成，从而显著提高编码效率。
代码片段，简单来说，就是预先定义好的代码模板，你在敲代码的时候，嗖的一下，就能把一大段常用的代码结构给“召唤”出来，避免重复劳动。VS Code 对代码片段的支持相当强大，用好了，效率提升不是一点半点。
VS Code 使用代码片段，核心在于配置和调用。下面我来详细说说。
配置代码片段，让你的效率飞起来
如何创建属于自己的 VS Code 代码片段？
创建自定义代码片段其实很简单。VS Code 允许你针对不同的语言创建独立的片段文件。步骤如下：
- 打开 VS Code，按下 Ctrl+Shift+P (windows/linux) 或 Cmd+Shift+P (macos) 打开命令面板。
- 输入 “snippets”，选择 “Configure User Snippets”。
- 可以选择全局的 *.code-snippets 文件，也可以选择针对特定语言的片段文件，例如 JavaScript.json。
- 在打开的 JSON 文件中，按照 VS Code 要求的格式定义你的代码片段。
一个典型的代码片段结构如下：
{ "print to console": { "prefix": "log", "body": [ "console.log('$1');", "$2" ], "description": "Log output to console" } }
- “Print to console”: 这是代码片段的名称，方便你识别。
- “prefix”: 这是触发代码片段的关键词，比如上面例子中的 “log”。 你在编辑器中输入 “log” 就会出现这个代码片段的提示。
- “body”: 这是代码片段的主体部分，是一个字符串数组。每一行代表最终插入代码的一行。$1、$2 是占位符，光标会依次跳到这些位置。
- “description”: 对代码片段的描述，在提示列表中显示。
代码片段的占位符 $1, $2 和 ${1:default text} 有什么区别？
占位符是代码片段中非常重要的概念，它们允许你在插入代码片段后快速定位到需要修改的地方。
- $1, $2, $3… 是简单的占位符，光标会按照数字顺序依次跳到这些位置。
- ${1:default text}: 带默认值的占位符。插入代码片段后，光标会定位到这个位置，并且选中 “default text”，你可以直接修改它。数字越大，跳转顺序越靠后。
- ${variable}: 可以使用预定义的变量，比如 ${TM_FILENAME} 代表当前文件名，${TM_CURRENT_YEAR} 代表当前年份。
举个例子，一个生成 React 函数组件的代码片段：
{ "React Function Component": { "prefix": "rfc", "body": [ "import React from 'react';", "", "function ${1:ComponentName}() {", " return (", " <div>", " ${2:Content}", " </div>", " );", "}", "", "export default ${1:ComponentName};" ], "description": "Create a React function component" } }
在这个例子中，$1 处会显示 ComponentName，你可以直接修改组件名。$2 处会显示 Content，你可以快速添加组件的内容。
如何在代码片段中使用变量？
VS Code 提供了很多内置的变量，可以在代码片段中使用，让代码片段更加灵活。常用的变量包括：
- TM_FILENAME: 当前文件名
- TM_FILENAME_BASE: 不带后缀的文件名
- TM_DIRECTORY: 当前文件所在目录
- TM_FILEPATH: 当前文件的完整路径
- TM_CURRENT_YEAR: 当前年份
- TM_CURRENT_MONTH: 当前月份 (01-12)
- TM_CURRENT_DATE: 当前日期 (01-31)
- TM_CURRENT_HOUR: 当前小时 (00-23)
- TM_CURRENT_MINUTE: 当前分钟 (00-59)
- TM_CURRENT_SECOND: 当前秒数 (00-59)
- TM_USERNAME: 当前用户名
例如，在文件头部添加版权信息的代码片段：
{ "Copyright Header": { "prefix": "copyright", "body": [ "/**", " * Copyright (c) ${TM_CURRENT_YEAR} ${TM_USERNAME}", " */", "" ], "description": "Add copyright header" } }
如何共享和管理我的代码片段？
代码片段文件本质上是 JSON 文件，你可以很容易地将它们共享给其他人。你可以将 *.code-snippets 文件上传到 gitHub 仓库，或者通过邮件发送给你的同事。
另外，VS Code 也有一些插件可以帮助你管理代码片段，比如 “Snippet Manager” 等。这些插件可以让你更方便地组织、搜索和编辑代码片段。
代码片段和 Emmet 缩写有什么区别？它们可以一起使用吗？
代码片段和 Emmet 缩写都是提高代码编写效率的工具，但它们的使用场景略有不同。
- Emmet 缩写: 主要用于 HTML 和 css 的快速编写，通过简单的缩写语法生成复杂的 HTML 结构或 CSS 样式。例如，输入 ul>li*5>a{Item $} 可以快速生成一个包含 5 个链接的无序列表。
- 代码片段: 更通用，可以用于任何语言，用于生成任何类型的代码结构，不仅仅是 HTML 和 CSS。
它们可以一起使用。Emmet 缩写可以嵌入到代码片段中，反之亦然。例如，你可以创建一个代码片段，其中包含 Emmet 缩写，快速生成 HTML 结构。
{ "HTML List": { "prefix": "htmllist", "body": [ "ul>li*5>a{Item $}" ], "description": "Generate an HTML list with Emmet" } }
输入 htmllist，就会生成
。
代码片段是 VS Code 中一个非常强大的功能，熟练掌握它可以极大地提高你的编码效率。花点时间配置好你的代码片段，你会发现，编程也变得轻松愉快了。
