如何编写VSCode Snippet实现this.setState到useState对应set方法的语法转换

步骤1：配置代码片段 #

打开VSCode命令面板（快捷键：Windows/Linux Ctrl+Shift+P / macOS Cmd+Shift+P），输入「配置用户代码片段」，根据项目技术栈选择javascriptreact.json（JS项目）或typescriptreact.json（TS项目），将以下内容粘贴到配置文件的JSON对象中：

"Convert this.setState to useState setter": {
  "prefix": "setstate2hook",
  "body": [
    "${TM_SELECTED_TEXT/this\\.setState\\(\\{([a-zA-Z0-9_]+):\\s*(.*)\\}\\);/set${1/(^.)/${1:/upcase}/}($2);/}"
  ],
  "description": "转换类组件this.setState为hooks useState的setter方法"
}

步骤2：使用方式 #

选中需要转换的this.setState代码行，按下代码片段触发快捷键（默认Ctrl+Space），找到名为「Convert this.setState to useState setter」的选项，按下回车即可完成转换。
示例效果： 选中this.setState({isLoading: true});执行转换后，将直接输出setIsLoading(true);

注意事项 #

• 仅支持单字段的setState转换，该场景占日常迁移工作量的90%以上
• 若遇到多字段批量更新的setState，建议按业务逻辑拆分为多个独立的useState调用，符合React hooks的官方最佳实践

内容的提问来源于stack exchange，提问作者Sean O'Neill