ST3快速编辑之Emmet及相关

最近想搞个自己的博客，然后看了一个星期前端东西，就开始了，写的过程中，发现了很多好东西，今天get了两个技能，当然，如果你用的是HBuiler，他们本身已经集成了。

对Sublime Text不是很熟的推荐看一下以下几篇

• Sublime Text 3常用快捷键
• 用Sublime Text 3编辑MarkDown
• sublime text 调试js代码

正文开始了啊

• 插曲：给网站添加icon

  • 准备你想作为图标的图片
  • 切成32*32的icon文件
  • 放在根目录下
  • 在head中加入以下两句代码
  • 注意命名，保存，清空缓存试试吧

• Emmet

  • 这是个好东西，估计很多前端已经很熟悉了
  • 代码html>head+body>div#d1+ul.u1>li*5>a
  • 按tab键，效果如下(以上代码中包含了几个最常用快捷符号)

Emmet插件的安装和使用

• 安装

  • 运行Package Control：Install Package命令
  • 启动快捷键是ctrl+shift+p
  • 输入并安装Emmet插件。
  • 重新启动ST编辑器

• 快捷键

  • 展开缩写 Tab或Ctrl+E
  • 交互式展开缩写 Ctrl+Alt+Enter
  • 匹配标记对向外 ⌃D（Mac）/ Ctrl+,（PC）
  • 匹配标记对向内 ⌃J/Shift+Ctrl+0
  • 转到匹配对 ⇧⌃T/Ctrl+Alt+J
  • 缩写 ⌃W/Shift+Ctrl+G
  • 转到编辑点 Ctrl+Alt+→或Ctrl+Alt+←
  • 选择项目 ⇧⌘.或⇧⌘,/ Shift+Ctrl+.或Shift+Ctrl+,
  • 切换注释 ⇧⌥//Shift+Ctrl+/
  • 拆分/加入标签 ⇧⌘'/Shift+Ctrl+
  • 删除标签 ⌘'/Shift+Ctrl+;
  • 更新图像大小 ⇧⌃I/Ctrl+U
  • 评估数学表达式 ⇧⌘Y/Shift+Ctrl+Y
  • 反映CSS值 ⇧⌘R/Shift+Ctrl+R
  • 将图像编码/解码为数据：URL ⇧⌃D/Ctrl+'
  • 重命名标签 ⇧⌘K/Shift+Ctrl+'

• 递增/递减数字操作：

  • 增量1： Ctrl+↑
  • 递减1： Ctrl+↓
  • 增加0.1： Alt+↑
  • 递减0.1： Alt+↓
  • 增加10：⌥⌘↑/Shift+Alt+↑
  • 递减10：⌥⌘↓/Shift+Alt+↓