sublime text 的查找替换支持 pcre 正则,可高效重构 react 组件(如重命名、解构 props、补 export),但需规避 jsx/字符串误匹配、类型声明干扰及动态导入等语法树级问题。

subl 本身不执行正则替换逻辑,但它的查找/替换功能(Ctrl+H / Cmd+H)支持 PCRE 风格正则,配合 React 组件重构场景能批量解决命名、结构、导入导出等高频问题——前提是理解哪些模式安全、哪些会误伤 JSX 或 TypeScript 类型。
React 函数组件重命名:匹配组件名但避开 JSX 标签和字符串
直接用 \bMyComponent\b 会同时命中 import { MyComponent } from './MyComponent'、<mycomponent></mycomponent> 和 const title = "MyComponent",导致错误替换。必须限定上下文。
- 只改函数声明:用
^(export\s+)?(const|function)\s+([A-Z][a-zA-Z0-9]*)\s*=\s*(\(\s*\)|\(\s*[a-z][a-zA-Z0-9]*\s*(,\s*[a-z][a-zA-Z0-9]*\s*)*\))\s*=>,捕获第 3 组为组件名,替换为$1$2NewName$4 - 排除 JSX 标签:在查找框勾选
.*按钮启用正则,并确保未勾选Match case(除非你确定大小写严格),再加负向先行断言:(?)—— 但这仍不可靠,建议优先用第一种函数签名方式 - TypeScript 接口/类型别名不参与:正则默认不匹配
interface OldNameProps,除非你显式加上,所以不用额外排除
批量提取 JSX 属性并转为解构参数
把 function Button(props) { return <button classname="{props.className}">{props.children}</button>; } 改成带解构的箭头函数,是常见重构。手动做易漏、易错,正则可一步到位。
- 查找:
function\s+([A-Z][a-zA-Z0-9]*)\s*\(\s*props\s*\)\s*\{[\s\S]*?return\s+[\s\S]*?\}; - 替换:
const $1 = ({ children, $3 }) => {children}$$2>;(注意$$2是 Sublime 的转义写法,表示字面量$2) - ⚠️ 风险点:如果
props被用于条件判断或非 JSX 场景(如console.log(props)),该正则会跳过,不会误改;但如果 JSX 内有嵌套或换行过多,[\s\S]*?可能跨段落匹配失败,建议先用Ctrl+Shift+P→Expand Selection to Brackets确认函数体范围再运行
自动补全 missing export default 并修正文件名引用
重构时经常漏加 export default,或修改组件名后没同步更新 import 语句。Sublime 可以分两步扫清。
- 补
export default:查找^const\s+([A-Z][a-zA-Z0-9]*)\s*=\s*(\(\s*\)|\(\s*[a-z][a-zA-Z0-9]*\s*(,\s*[a-z][a-zA-Z0-9]*\s*)*\))\s*=>\s*{,替换为export default const $1$2 => {;注意检查是否已存在export行,避免重复 - 修正 import:查找
import\s+\{([^}]+)\}\s+from\s+['"]([^'"]+)['"];,然后用多光标手动选中花括号内旧名,再Ctrl+D逐个跳转到对应from路径,用Ctrl+P打开文件确认导出名是否一致 —— Sublime 不自动解析模块图,这步必须人工核验路径与导出名是否匹配 - ⚠️ 关键限制:Sublime 不知道
index.ts是否 re-export 了组件,也不解析export * from './Button',所有路径级引用修正都依赖你对项目结构的掌握
真正容易被忽略的是:Sublime 的正则引擎不支持 JavaScript 中的动态 import() 或 React.lazy(() => import('./X')) 里的字符串路径提取。这类内容必须用 AST 工具(如 jscodeshift)处理,不能硬靠文本正则。你在 Ctrl+H 里写的再漂亮的模式,也跨不过语法树这道坎。











