vscode如何设置代码模板 vscode快速生成代码的指南-小浪学习网

如何在 vs code 中创建自定义代码片段以提高效率？1. 打开 vs code，点击左下角齿轮图标，选择“用户代码片段”；2. 选择目标语言或新建全局片段文件；3. 在 JSon 文件中配置代码片段，包含名称、触发前缀、代码体和描述；4. 使用 $1、$2 等占位符定义光标跳转位置；5. 可利用变量、转换和技巧实现智能代码生成；6. 保存后在代码文件中输入前缀即可触发片段；7. 通过分享 json 文件或发布扩展共享代码片段。

vscode如何设置代码模板 vscode快速生成代码的指南

VS Code 代码模板，或者说代码片段（Snippets），能帮你快速生成重复代码，节省大量时间。配置起来也不复杂，关键是找对地方，写对格式。

vscode如何设置代码模板 vscode快速生成代码的指南

解决方案

VS Code 的代码片段设置是全局性的，也就是说，你设置一次，所有项目都能用。具体步骤如下：

vscode如何设置代码模板 vscode快速生成代码的指南

打开 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 组件，可以这样配置：

vscode如何设置代码模板 vscode快速生成代码的指南

{     "React Component": {         "prefix": "rcomp",         "body": [             "import React from 'react';",             "",             "function ${1:ComponentName}() {",             "treturn (",             "tt<div>",             "ttt$2",             "tt</div>",             "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"     } }