其他

SublimeText高效技巧：3秒批量包裹HTML标签

悠悠楠杉

2025-12-19

0 评论

1 阅读

正在检测是否收录...

12/19

正文：

作为前端开发者，我们经常需要为纯文本添加HTML标签。传统手动输入的方式效率低下，而Sublime Text提供了多种高效解决方案。下面这个场景你一定不陌生：

苹果
香蕉
橙子
需要快速转换为：
<li>苹果</li>
<li>香蕉</li>
<li>橙子</li>

安装Emmet插件后：
1. 选中多行文本
2. 按Ctrl+Shift+G打开命令面板
3. 输入Wrap with Abbreviation
4. 输入ul>li*即可批量生成列表

创建自定义snippet：

<snippet>
  <content><![CDATA[
<${1:p}>$SELECTION</${1:p}>
  ]]></content>
  <tabTrigger>wrap</tabTrigger>
</snippet>

使用Ctrl+H调出替换面板：
- 查找：^(.*)$
- 替换：<li>$1</li>
- 记得勾选"正则表达式"选项

这些技巧配合Sublime Text的多重选区、宏录制等功能，可以处理更复杂的标签包裹场景。比如需要同时添加class时：

/* 原始文本 */
产品介绍
技术参数
售后服务

/* 处理后 */
<div class="item">产品介绍</div>
<div class="item">技术参数</div>
<div class="item">售后服务</div>

建议将常用标签包裹操作绑定到自定义快捷键。例如在Preferences > Key Bindings中添加：

{
  "keys": ["ctrl+alt+h"], 
  "command": "insert_snippet",
  "args": {"name": "Packages/User/wrap_header.sublime-snippet"}
}

朗读

版权属于：

至尊技术网

本文链接：

https://www.zzwws.cn/archives/41837/（转载时请注明本文出处及文章链接）

作品采用：

至尊技术网