VSCode用户代码片段配置教程

首先打开命令面板输入Preferences: Configure User Snippets,选择语言或创建全局片段后编辑jsON文件,定义名称、prefix触发词、body内容及描述,支持$1、$2光标定位与时间变量等,保存后在对应文件中输入prefix即可触发插入,提升编码效率。

VSCode用户代码片段配置教程

visual studio Code(vscode)的用户代码片段功能可以帮助你快速插入常用代码块,提升编码效率。通过自定义代码片段,你可以为特定语言或项目设置快捷输入方式。下面介绍如何配置和使用用户代码片段。

打开用户代码片段配置

在 VSCode 中配置代码片段,第一步是打开对应的代码片段文件:

  • 按下 Ctrl + Shift + Pmac 上是 Cmd + Shift + P)打开命令面板
  • 输入并选择 Preferences: Configure User Snippets
  • 选择你要配置的语言(如 javaScript、python 等),或选择“新建全局代码片段”创建通用片段

选择后会打开一个 json 格式的配置文件,你可以在这里添加自己的代码片段。

编写代码片段格式

每个代码片段是一个键值对,键是片段名称,值包含触发词、内容和描述等信息。

VSCode用户代码片段配置教程

代码小浣熊

代码小浣熊是基于商汤大语言模型的软件智能研发助手,覆盖软件需求分析、架构设计、代码编写、软件测试等环节

VSCode用户代码片段配置教程 51

查看详情 VSCode用户代码片段配置教程

示例:为 javascript 创建 log 输出片段

{   "Print to console": {     "prefix": "log",     "body": [       "console.log('$1');",       "$2"     ],     "description": "Log output to console"   } } 

  • prefix:输入这个关键词时触发代码片段(比如输入 log 后按 Tab)
  • body:实际插入的代码内容,支持多行
  • $1、$2:表示光标停留位置,$1 是第一个跳转点,Tab 切换到 $2
  • description:在提示中显示的说明文字

使用变量和占位符

代码片段支持动态变量,让插入的内容更智能:

  • $TM_FILENAME:当前文件名
  • $TM_DIRECTORY:文件所在目录
  • $CURRENT_YEAR$CURRENT_MONTH$CURRENT_DATE:当前日期相关

示例:插入带时间戳的注释

<code>{   "Timestamp comment": {     "prefix": "tsc",     "body": [       "// Created: $CURRENT_YEAR-$CURRENT_MONTH-$CURRENT_DATE",       "$1"     ],     "description": "Insert timestamp comment"   } } 

保存并使用代码片段

保存配置文件后,无需重启 VSCode。在对应语言的编辑器中输入你设置的 prefix,就会出现自动提示,按 Tab 或 Enter 即可插入代码。

  • 确保文件类型正确(如 .js 文件才能触发 JavaScript 片段)
  • 可以创建全局片段(所有语言可用)或针对特定语言专用
  • 修改后即时生效,可反复调整直到满意

基本上就这些。合理利用代码片段能大幅减少重复劳动,特别适合写组件模板、测试用例或日志输出这类高频操作。不复杂但容易忽略。

上一篇
下一篇
text=ZqhQzanResources