VS Code中如何添加带参数前缀的自定义代码片段？

VS Code 实现方法 #

VS Code可通过用户代码片段完成配置，步骤如下：

1. 打开命令面板：按Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac），输入Configure User Snippets，选择对应React文件类型（比如javascriptreact.json对应JSX，typescriptreact.json对应TSX）。
2. 在打开的JSON配置文件中，添加以下代码片段：

{
  "Custom useState with param": {
    "prefix": "usestate",
    "body": [
      "const [$1, set${1/(.*)/${1:/capitalize}/}] = React.useState($0);"
    ],
    "description": "快速生成带自定义state名的useState代码"
  }
}

3. 使用方式：输入usestate后按Tab，输入你的state名称（比如isLoading），再按Tab，光标会自动定位到useState的括号内，直接输入初始值即可生成代码：

const [isLoading, setIsLoading] = React.useState(/* 光标在这里 */);

WebStorm/IntelliJ 实现方法 #

JetBrains系列IDE可通过Live Templates配置：

1. 打开设置：File > Settings（Windows/Linux）或IntelliJ IDEA > Settings（Mac），找到Editor > Live Templates。
2. 选择React或JavaScript分组，点击右上角+号，选择Live Template。
3. 配置模板：
   • 缩写（Abbreviation）：usestate
   • 模板文本（Template text）：const [$NAME$, set$NAME_CAP$] = React.useState($END$);
   • 点击Edit variables，给$NAME_CAP$设置表达式为capitalize(NAME)，自动将state名首字母大写生成setter函数名。
   • 勾选模板适用的上下文（比如JavaScript/React）。
4. 使用方式：输入usestate按Tab，输入state名称后按Enter，即可生成目标代码，光标停在useState括号内等待输入初始值。

可选优化 #

如果项目配置了useState自动导入（比如React 17+的JSX转换或ESLint自动导入），可把片段里的React.useState改成useState，简化代码。

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