代码片段是预先定义的代码模板，能快速插入常用代码结构以提升开发效率。在 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 (",
" ",
" ${2:Content}",
" ",
" );",
"}",
"",
"export default ${1:ComponentName};"
],
"description": "Create a React function component"
}
}在这个例子中， 处会显示 ComponentName，你可以直接修改组件名。 处会显示 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 中一个非常强大的功能，熟练掌握它可以极大地提高你的编码效率。花点时间配置好你的代码片段，你会发现，编程也变得轻松愉快了。
