如何在 vs code 中创建自定义代码片段以提高效率？1. 打开 vs code，点击左下角齿轮图标，选择“用户代码片段”；2. 选择目标语言或新建全局片段文件；3. 在 json 文件中配置代码片段，包含名称、触发前缀、代码体和描述；4. 使用 $1、$2 等占位符定义光标跳转位置；5. 可利用变量、转换和技巧实现智能代码生成；6. 保存后在代码文件中输入前缀即可触发片段；7. 通过分享 json 文件或发布扩展共享代码片段。
VS Code 代码模板，或者说代码片段（Snippets），能帮你快速生成重复代码，节省大量时间。配置起来也不复杂，关键是找对地方，写对格式。
解决方案
VS Code 的代码片段设置是全局性的，也就是说，你设置一次，所有项目都能用。具体步骤如下：
- 打开 VS Code，点击左下角的齿轮图标（设置），然后选择“用户代码片段”。
- VS Code 会提示你选择语言，比如你想为 JavaScript 设置代码片段，就选择“javascript”。如果你想为所有语言设置通用代码片段，可以选择“new global snippets file...”。
- 选择语言后，会打开一个 JSON 文件。这就是你配置代码片段的地方。
JSON 文件的格式是这样的：
{
"Print to console": {
"prefix": "log",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}
}-
"Print to console"：这是代码片段的名字，随便起，方便自己识别就行。 -
"prefix"：这是触发代码片段的关键词，比如你输入log，就会出现这个代码片段的提示。 -
"body"：这是代码片段的内容，是一个字符串数组。每一行都是数组的一个元素。$1、$2是占位符，按下 Tab 键可以依次跳转到这些位置。 -
"description"：这是代码片段的描述，会在提示中显示。
举个例子，你想快速生成一个 React 组件，可以这样配置：
{
"React Component": {
"prefix": "rcomp",
"body": [
"import React from 'react';",
"",
"function ${1:ComponentName}() {",
"\treturn (",
"\t\t",
"\t\t\t$2",
"\t\t",
"\t);",
"}",
"",
"export default ${1:ComponentName};"
],
"description": "Create a new React component"
}
}保存 JSON 文件后，在 .js 或 .jsx 文件中输入 rcomp，就会出现代码片段提示。选择它，就能快速生成 React 组件的代码。
如何在 VS Code 中创建自定义代码片段以提高效率？
自定义代码片段的核心在于 body 部分的编写。想想你经常重复写的代码是什么？比如，你经常需要写 useEffect，就可以创建一个 useEffect 的代码片段。
{
"React useEffect": {
"prefix": "useeffect",
"body": [
"import { useEffect } from 'react';",
"",
"useEffect(() => {",
"\t${1:// Side effect logic}",
"}, [${2:// Dependencies}]);"
],
"description": "Create a useEffect hook"
}
}另外，占位符 另外，占位符 、 非常有用。你可以用它们来定义代码生成后的光标位置。$1、$2 非常有用。你可以用它们来定义代码生成后的光标位置。$0 表示最终光标停留的位置。
VS Code 代码片段的进阶用法：变量、转换和条件判断
代码片段不仅可以插入静态文本，还可以使用变量、转换和条件判断，让代码片段更加智能。
-
变量：VS Code 提供了一些内置变量，比如
$TM_FILENAME（当前文件名）、$TM_FILEPATH（当前文件路径）等。你可以在代码片段中使用这些变量。{ "Log file name": { "prefix": "logfile", "body": [ "console.log('File name: $TM_FILENAME');" ], "description": "Log the current file name" } } 转换：可以使用正则表达式对变量进行转换。例如，将文件名转换为大写：
${TM_FILENAME/(.*)/${1:/upcase}/}。条件判断：虽然 VS Code 代码片段本身不支持直接的条件判断，但你可以通过一些技巧来实现类似的效果。例如，根据文件类型选择不同的代码片段。
如何共享和管理 VS Code 代码片段？
代码片段本质上就是一个 JSON 文件，所以共享起来非常简单。你可以把 JSON 文件分享给你的同事，他们只需要把文件复制到自己的 VS Code 配置目录即可。
另外，你也可以把代码片段发布到 VS Code 扩展商店，让更多人使用你的代码片段。
管理代码片段的关键在于组织。你可以根据语言、框架、用途等对代码片段进行分类，方便查找和使用。使用有意义的名字和描述也很重要。
