VSCode如何实现代码模板快速生成 VSCode文件片段自动创建的技巧-小浪学习网

打开用户代码片段配置：通过文件 -> 首选项 -> 用户代码片段，选择对应语言如JavaScript.JSon；2. 定义代码片段：在json文件中设置名称、触发词prefix、代码体body（含$1、$2光标位）、描述description；3. 使用代码片段：在对应语言文件中输入触发词如log或rcomp，按tab键即可生成代码；4. 支持复杂模板：可包含多行代码、变量如$current_year、$tm_filename_base等，实现动态内容插入；5. 共享与管理：通过vscode同步功能跨设备同步，纳入git版本控制，或打包为扩展发布至市场，也可用snippet manager等工具增强管理。正确配置后，输入触发词即可快速生成代码，显著提升开发效率。

VSCode如何实现代码模板快速生成 VSCode文件片段自动创建的技巧

vscode 代码模板，也就是文件片段，能帮你快速生成常用代码结构，提高效率。核心在于配置

snippets

，定义好代码块，然后输入触发词就能自动生成。

VSCode如何实现代码模板快速生成 VSCode文件片段自动创建的技巧

解决方案：

打开用户代码片段配置：
```
文件 -> 首选项 -> 用户代码片段
```
，选择对应语言，比如
```
javascript.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"
```
: 片段的描述，在提示中显示。

使用代码片段：在
```
.js
```
文件中，输入
```
log
```
，按下
```
Tab
```
键，就会自动生成
```
console.log('');
```
，光标停留在引号中间。

如何创建更复杂的代码模板？

复杂的代码模板可以包含多行代码、变量、甚至简单的逻辑。例如，创建一个 React 组件模板：

VSCode如何实现代码模板快速生成 VSCode文件片段自动创建的技巧

{   "React Component": {     "prefix": "rcomp",     "body": [       "import React from 'react';",       "",       "const ${1:ComponentName} = () => {",       "  return (",       "    ",       "      ${2:Content}",       "    
",       "  );",       "};",       "",       "export default ${1:ComponentName};"     ],     "description": "React Functional Component Template"   } }

这个模板中，

rcomp

是触发词，输入后会自动生成一个 React 函数组件，

ComponentName

和

Content

是光标停留的位置，方便你快速修改组件名称和内容。

import React from 'react';

这行代码也直接包含了，省去了手动输入的麻烦。

代码片段的变量有哪些？

VSCode 代码片段支持一些内置变量，可以让你更灵活地生成代码。常用的变量包括：

VSCode如何实现代码模板快速生成 VSCode文件片段自动创建的技巧

```
$CURRENT_YEAR
```
: 当前年份。
```
$CURRENT_MONTH
```
: 当前月份（数字）。
```
$CURRENT_DATE
```
: 当前日期。
```
$CURRENT_HOUR
```
: 当前小时。
```
$CURRENT_MINUTE
```
: 当前分钟。
```
$CURRENT_SECOND
```
: 当前秒数。
```
$TM_FILENAME
```
: 当前文件名。
```
$TM_FILENAME_BASE
```
: 当前文件名（不带后缀）。
```
$TM_DIRECTORY
```
: 当前文件所在目录。
```
$TM_FILEPATH
```
: 当前文件完整路径。

例如，在注释中自动添加创建时间：

{   "Comment with Date": {     "prefix": "cdate",     "body": [       "/**",       " * Created by: Your Name",       " * Date: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE $CURRENT_HOUR:$CURRENT_MINUTE:$CURRENT_SECOND",       " */"     ],     "description": "Add comment with current date and time"   } }