vs code自定义代码片段是为了提高开发效率，减少重复代码输入。具体步骤如下：1. 打开vs code，点击左下角齿轮图标，选择“用户代码片段”，再选择对应语言或新建全局代码片段文件；2. 在JSon文件中定义代码片段，包括名称、prefix（触发关键词）、body（代码内容）和description（描述），例如输入log后按tab键可生成console.log语句。常见问题处理方法包括检查保存路径是否正确、确保json格式无误、避免prefix冲突、确认文件类型关联正确、重启vs code或更新版本。此外，支持使用变量如$tm_filename、$tm_current_year等增强代码片段灵活性，还提供占位符、选择项、变量转换、嵌入命令等高级功能，进一步提升开发效率。
VS Code自定义代码片段，简单来说就是为了偷懒！减少重复代码的输入，提高效率。你想想，每次都要敲一堆一样的代码，烦不烦？有了代码片段，一键搞定！
快捷方式：打开VS Code，点击左下角的齿轮图标，选择“用户代码片段”，然后选择你想要创建代码片段的语言（比如JavaScript、python等），或者直接选择“新建全局代码片段文件…”。
创建方法：会打开一个json文件，里面可以定义你的代码片段。
{ "Print to console": { // 代码片段的名称，会显示在提示列表中 "prefix": "log", // 触发代码片段的关键词，输入log后按下Tab键即可触发 "body": [ // 代码片段的内容，可以有多行 "console.log('$1');", // $1表示光标的位置，可以有多个，按下Tab键可以切换光标位置 "$2" // $2表示下一个光标位置 ], "description": "Log output to console" // 代码片段的描述，会显示在提示列表中 }, "Create React Component": { "prefix": "rcc", "body": [ "import React from 'react';", "", "const $1 = () => {", " return (", " <div>", " $2", " </div>", " );", "};", "", "export default $1;" ], "description": "Create a React Component" } }
保存json文件后，就可以在对应的语言文件中使用你的代码片段了。比如在JavaScript文件中输入log，然后按下Tab键，就会自动生成console.log(”);。
VS Code代码片段不生效怎么办？
代码片段失效，最常见的原因就是文件保存路径不对或者JSON格式错误。
- 检查保存路径： 确保你的代码片段文件保存到了正确的路径下。全局代码片段应该保存在VS Code的用户目录下，不同操作系统路径可能不同，但通过“用户代码片段”菜单创建的文件会自动保存在正确位置。项目级别的代码片段应该保存在项目.vscode目录下。
- JSON格式校验： JSON格式非常严格，任何语法错误都会导致代码片段失效。可以使用VS Code自带的JSON校验功能，或者在线JSON校验工具检查你的代码片段文件。常见的错误包括：
- 缺少逗号
- 多余的逗号
- 键名必须用双引号
- 字符串中包含特殊字符没有转义
- prefix冲突： 检查是否与其他插件或VS Code内置的代码片段的prefix冲突。如果冲突，尝试修改你的prefix。
- 文件类型关联： 确保你的代码片段文件关联了正确的文件类型。例如，JavaScript的代码片段应该关联.js文件。
- 重启VS Code： 有时候，VS Code可能没有正确加载代码片段文件，重启VS Code可以解决问题。
- 检查VS Code版本： 某些VS Code版本可能存在bug导致代码片段失效，尝试更新到最新版本。
如何在VS Code代码片段中使用变量？
VS Code代码片段支持使用一些预定义的变量，可以更灵活地生成代码。
- $TM_FILENAME: 当前文件的文件名。
- $TM_FILENAME_BASE: 当前文件的文件名（不包含后缀）。
- $TM_DIRECTORY: 当前文件所在的目录。
- $TM_FILEPATH: 当前文件的完整路径。
- $TM_CURRENT_YEAR: 当前年份。
- $TM_CURRENT_YEAR_SHORT: 当前年份的后两位。
- $TM_CURRENT_MONTH: 当前月份（两位数）。
- $TM_CURRENT_MONTH_NAME: 当前月份的完整名称。
- $TM_CURRENT_MONTH_NAME_SHORT: 当前月份的简称。
- $TM_CURRENT_DATE: 当前日期（两位数）。
- $TM_CURRENT_DAY_NAME: 当前星期几的完整名称。
- $TM_CURRENT_DAY_NAME_SHORT: 当前星期几的简称。
- $TM_HOUR: 当前小时（24小时制）。
- $TM_MINUTE: 当前分钟。
- $TM_SECOND: 当前秒。
- $TM_USERNAME: 当前用户名。
例如，你可以在代码片段中添加版权信息：
{ "Copyright": { "prefix": "copyright", "body": [ "/**", " * Copyright (c) $TM_CURRENT_YEAR, $TM_USERNAME", " */", "" ], "description": "Add copyright information" } }
VS Code代码片段支持哪些高级用法？
除了基本的文本替换，VS Code代码片段还支持一些高级用法，让你的代码片段更加强大。
- 占位符(Placeholders)： 使用$1、$2、$3等定义占位符，按下Tab键可以在这些占位符之间切换。还可以为占位符设置默认值，例如${1:default value}。
- 选择项(Choice)： 使用${1|option1,option2,option3|}定义选择项，按下Tab键后会弹出一个下拉列表，可以选择不同的选项。
- 变量转换(Variable Transformation)： 可以使用变量转换对变量进行格式化。例如，${TM_FILENAME/(.*).(.*)/${1}/}可以提取文件名（不包含后缀）。 ${TM_FILENAME/(.*).(.*)/${2}/}可以提取文件后缀。
- 嵌入命令(Embedded Commands)： 可以使用$(command)嵌入VS Code的命令。例如，$(uuid)可以生成一个UUID。
- 多行字符串： body字段是一个字符串数组，每一行都是代码片段的一部分。可以使用多行字符串来定义复杂的代码片段。
- 条件判断： 通过一些插件，可以实现更复杂的条件判断，比如根据当前文件类型选择不同的代码片段。
利用这些高级用法，你可以创建非常灵活和强大的代码片段，大大提高你的开发效率。
