VS Code代码片段多转换优化：移除React输入框监听函数中间步骤

你可以直接利用VS Code代码片段的内置正则转换功能，在onChange的函数名位置直接对id变量做转换，彻底去掉中间tab stop（比如原来的$4）。

修改后的代码片段示例 #

"React Text Input": {
  "prefix": "rtinput",
  "body": [
    "<input",
    "  id=\"${1:user-name}\"",
    "  name=\"${2:${1/-/_/g}}\"",
    "  onChange={update${1/(^|-)(.)/${2:/upper}/g}}",
    "/>"
  ],
  "description": "生成带规范属性的React文本输入框（无中间转换步骤）"
}

转换逻辑说明 #

这里的核心是${1/(^|-)(.)/${2:/upper}/g}这个表达式，直接对第一个占位符（id的值）做转换：

• 正则(^|-)(.)：匹配字符串开头，或者连字符-后面的单个字符
• ${2:/upper}：把匹配到的第二个捕获组（即连字符后的小写字母）转换为大写
• 全局修饰符g：处理所有连字符位置，最终把user-name这类连字符格式转成UserName，再加上前缀update就得到驼峰式的函数名updateUserName

这样设置后，你只需要输入id的值，name属性和onChange的函数名会自动完成格式转换，完全不需要中间的tab stop步骤。

内容的提问来源于stack exchange，提问作者James Newton