VSCode中的代码片段变量和转换

20次阅读

vscode代码片段支持动态内容生成:①基础变量如${TM_FILENAME}插入上下文信息;②转换语法${var/Regex/rep/flags}实现正则替换;③${var:-default}提供默认值;④$1、$2实现多光标联动;⑤配合Command Variable扩展执行shell命令。

VSCode中的代码片段变量和转换

如果您在VSCode中编写代码片段时希望动态生成内容,例如基于文件名、光标位置或用户输入生成特定格式的代码,则需要理解代码片段变量及其转换语法。以下是实现该功能的具体方法:

本文运行环境:macBook Pro,macOS Sequoia。

一、基础变量用法

VSCode内置一组预定义变量,可在代码片段中直接引用,用于插入当前上下文信息。这些变量在展开片段时自动解析为实际值,无需额外配置。

1、打开命令面板(Cmd+Shift+P),输入“Preferences: Configure User Snippets”并回车。

2、选择“New Global Snippets file”,命名为“common.code-snippets”。

3、在右侧jsON编辑区添加如下片段:

“logFileName”: {
  “prefix”: “logfn”,
  “body”: [“console.log(‘${TM_FILENAME} loaded’);”]
}

4、在任意javaScript文件中键入”logfn”并按Tab,将插入包含当前文件名的console语句。

二、变量转换语法

变量转换允许对原始变量值执行正则替换,从而生成符合命名规范或结构要求的输出。语法为${variable/regex/replacement/flags},其中flags可选g、i、m等标准javascript标志。

1、在同一个snippets文件中新增片段:

classFromFilename”: {
  “prefix”: “cls”,
  “body”: [“class ${TM_FILENAME_BASE/(.*)/${1:/pascalcase}/} {“,
    ”  constructor() {}”,
    “}”]
}

2、新建文件名为”user-service.js“,在其中输入”cls”并按Tab。

3、将生成class UserService { … },其中${TM_FILENAME_BASE}提取不含扩展名的文件名,/(.*)/匹配全部,${1:/pascalcase}将其转为首字母大写的驼峰形式。

三、条件判断与默认值

通过嵌套语法可实现变量存在性判断和默认值回退,避免空值导致片段异常。支持${variable:-default}(变量为空时取默认)、${variable:+alternative}(变量非空时取替代)等模式。

1、添加新片段:

“logWithOptionalTag”: {
  “prefix”: “logt”,
  “body”: [“console.log(‘${1:tag:-INFO}’, ‘${2:msg}’);”]
}

VSCode中的代码片段变量和转换

Linfo.ai

Linfo AI 是一款AI驱动的 Chrome 扩展程序,可以将网页文章、行业报告、YouTube 视频和 PDF 文档转换为结构化摘要。

VSCode中的代码片段变量和转换 151

查看详情 VSCode中的代码片段变量和转换

2、键入”logt”并按Tab,光标首先停在第一个占位符,输入”DEBUG”后按Tab跳至第二个占位符。

3、若未修改第一个占位符,其值保持为INFO,即${1:tag:-INFO}中冒号后的内容作为默认文本显示。

四、多光标与顺序占位符

使用数字索引的占位符(如$1、$2)可定义编辑焦点顺序,配合$0指定最终光标位置;同一索引多次出现会同步更新,形成多光标联动效果。

1、添加片段:

reactComponent”: {
  “prefix”: “rcomp”,
  “body”: [“import react from ‘react’;”,
    “”,
    “export default function ${1:ComponentName}() {“,
    ”  return (
      ${1:ComponentName};
      );
    }”,
    “”]
}

2、键入”rcomp”并按Tab,光标定位到$1处,输入”MyButton”。

3、按Tab跳至$0(即函数体内部),此时首行函数名与JSX标签中的MyButton已同步更新。

五、Shell命令变量扩展

在支持shell执行的系统上(如macos/linux),可使用$TM_CURRENT_LINE变量结合外部命令进行动态计算,但需确保VSCode以终端环境启动,且命令路径已加入PATH。

1、确保终端中能直接运行date命令,例如输入date +%Y-%m-%d返回2024-06-15。

2、在snippets文件中添加:

“dateStamp”: {
  “prefix”: “date”,
  “body”: [“// Generated on: ${command:extension.commandvariable.date}”]
}

3、安装扩展Command Variable,并在settings.json中配置:

“commandVariable.commands”: {
  “date”: {
    “command”: “date ‘+%Y-%m-%d'”,
    “shell”: true
  }
  }

4、键入”date”并按Tab,插入形如“// Generated on: 2024-06-15”的注释行。

text=ZqhQzanResources