Sublime正则替换需精准把握三个锚点：捕获组引用、跨行匹配开关、作用域边界控制；否则前端重构易批量出错。
Sublime 的正则替换不是“能用就行”，在前端代码重构中，它要么精准提效，要么批量翻车——关键在于是否踩准三个技术锚点：捕获组引用语法、跨行匹配开关、作用域边界控制。
函数调用参数格式化：从 getUserInfo(id) → getUserInfo({ id })
这是最常遇到的 API 升级场景。直接写 getUserInfo\(([^)]+)\) 查找，看似能捕获 id，但一旦参数含空格、换行或嵌套调用（如 getUserInfo(getId())），就会漏匹配或截断。
- 安全写法是：
getUserInfo\(\s*([^)]+?)\s*\)，\s*吸收括号两侧空白，+?防止贪婪吞掉右括号前内容 - 替换必须用
getUserInfo({ $1 })，注意$1前后加空格——否则可能变成{id})或{ id})（缺右空格） - 务必先勾选
. matches newline（Alt+R 两次），否则含换行的参数（如多行对象字面量）完全不匹配 - 风险点：
$1会原样保留参数里的注释、逗号、甚至未闭合引号；若参数本身含)（如字符串"a)b"），此正则仍会提前截断——此时应改用getUserInfo\(([^()]|(?R))*\)（但 Sublime 不支持(?R)递归），只能人工分段处理
CSS 属性批量加浏览器前缀：transform → -webkit-transform
老项目升级时，transform、animation 等属性需补全前缀。用 ^(.*?)(\btransform\b) 查找，看似能捕获缩进和关键词，但容易误中 transform-origin 或字符串内的 transform。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
- 精确限定词边界：
^(.*?)(\btransform\b(?!\w))，(?!\w)确保后面不是字母/数字/下划线 - 替换写成
$1-webkit-$2，保留原始缩进（$1）和关键词（$2），避免破坏 CSS 格式对齐 - 禁用
. matches newline——CSS 属性必在单行，开这个选项反而会让.*?吞掉整块规则 - 注意：如果文件含
@supports (transform: ...)，该正则也会命中，需手动跳过或加负向先行断言(?
HTML 模板中提取并重排 data-* 属性
Vue/React 组件模板里常有 data-id="123" data-type="user" 这类属性，想统一转成 data-type="user" data-id="123" 顺序，或提取为 JS 对象。
立即学习“前端免费学习笔记（深入）”；
- 提取单个属性值：
data-([^\s=]+)\s*=\s*["']([^"']*)["']，[^\s=]+比\w+更安全（支持data-user-id） - 交换两个属性顺序（如把
data-a和data-b对调）：(data-a\s*=\s*["'][^"']*["']\s+)(data-b\s*=\s*["'][^"']*["'])→$2 $1 - 跨行属性必须加
(?s)前缀：(?s)data-([^\s=]+)\s*=\s*["']([^"']*)["']，否则换行后的data-属性无法捕获 - 大文件慎用全局替换：Sublime 在 >2MB 文件中启用
(?s)易卡顿，建议先用Ctrl+Shift+F定位到具体 HTML 文件再操作
JSX 中移除无用 props 并保留注释上下文
清理 className="xxx" 或 style={{}} 等冗余 prop 时，不能简单删整行——因为可能混着 // TODO: remove later 注释，或被包裹在多行 JSX 元素中。
- 安全删除单行 prop：
^\s*(className|style)\s*=\s*["'{][^"'}]*["'}]\s*(?=[\s/>])，(?=[\s/>])确保后面是空格、斜杠或尖括号（即确实在 JSX 标签内） - 替换留空，但保留前面的空格和换行——用
^\s*(className|style)\s*=\s*["'{][^"'}]*["'}]\s*(?=[\s/>])→（空）即可，不会吞掉换行符 - 若 prop 跨多行（如
style={{换行后写color: 'red'}}），必须用(?s)style\s*=\s*{[^}]*?}，但注意[^}]*?无法处理嵌套大括号，此时应改用style\s*=\s*{[\s\S]*?} - 最容易被忽略的是：删完后 JSX 标签末尾可能残留多余空格或换行，导致格式错乱——建议删完立刻运行 Prettier 或手动触发
Ctrl+Shift+P → Format Document
