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+↓

你可能感兴趣的:(ST3快速编辑之Emmet及相关)