VS Code 片段中的多重转换

Question

为了简化在 VS Code 中的 React 组件中添加文本输入的过程，我创建了一个执行多个转换的代码片段。

• 我希望元素的

  id

  使用连字符（例如“用户名”，这对于 CSS 来说是正常的
• 我希望元素的

  name

  使用下划线，以匹配数据库中的字段名称（例如“user_name”）
• 我希望事件监听器的名称采用驼峰命名法（例如“updateUserName”）

在许多情况下，我应该能够简单地键入

id

，然后按几次

TAB

键即可将转换应用于各种属性值。但是，我还希望能够自定义每个值，因此我应用了额外的制表位，使我能够编辑

name

和

onChange

的值。

这是工作片段：

"input:text": {
    "prefix": "i:t",
    "body": "<input\n  type=\"text\"\n  id=\"${1:user-name}\"\n  name=\"${2:${1/-/_/g}}\" // ${4:${2/_(.)/${1:/upcase}/g}}\n  onChange={${3:update${5:${4/(.*)/${1:/capitalize}/}}}}\n/>",
    "description": "Text Input"
  },

如果将此代码段添加到

javascriptreact.json

文件中，则可以在 React 脚本中键入

i:t

，然后按

TAB

几次，以获得此结果**：

<input
  type="text"
  id="user-name"
  name="user_name" // userName
  onChange={updateUserName}
/>

但我觉得我不得不作弊。

在

name

的线上，可以看到一条评论：

// userName

。要创建我的默认侦听器名称，我需要将

user_name

（带下划线）转换为

UserName

（开头为大写字母 both 和 以替换下划线之后的任何字母（即匹配正则表达式） /_(.)/

）。

我还没有找到一种方法可以一步完成此操作，因此我使用了中间步骤（$4），它创建了注释字符串。

我的问题是：

我如何更改用于 onChange

 条目的转换，以便我可以避免这个中间步骤？

** 当然，您可以为

id

、

name

 和 

onChange

 侦听器输入自己的值。

Answer 1

我找到了自己问题的答案:)

捕获第一个字符以及字符串的所有其余部分
对第一个字符使用
2. /capitalize/

    变换，对其余字符使用 

   /camelCase/

    变换。

---

"input:text": {  
  "prefix": "i:t",  
  "body": "<input\n  type=\"text\"\n  id=\"${1:user-name}\"\n  name=\"${2:${1/-/_/g}}\"\n  value={${3:$2}}\n  onChange={${4:update${5:${2/(.)(.*)/${1:/upcase}${2:/camelcase}/}}}}\n/>",  
  "description": "Text input"  
},

这是

答案的来源。感谢@Mark。