ST3快速编辑之Emmet及相关

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

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

正文开始了啊

  • 插曲:给网站添加icon

    • 准备你想作为图标的图片
    • 切成32*32的icon文件
    • 放在根目录下
    • 在head中加入以下两句代码
    • <link rel="shortcut icon" href="/favicon.ico"/>
    • <link rel="bookmark" href="/favicon.ico"/>
    • 注意命名,保存,清空缓存试试吧
  • Emmet

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

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+↓
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插...
    xiaotao123阅读 9,610评论 0 27
  • Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插...
    追風逸少丶阅读 11,487评论 1 34
  • 前言 相信对于很多写代码的小伙伴来说,对于开发编辑器都不会陌生,什么editplus,dw,webstorm,hu...
    itclanCoder阅读 1,815评论 1 8
  • Download Visual Studio Code 简介 VSCode是微软推出的一款轻量编辑器,采取了和VS...
    jrg陈咪咪sunny阅读 3,048评论 0 3
  • Sublime Text:一款具有代码高亮、语法提示、自动完成且反应快速的编辑器软件,不仅具有华丽的界面,还支持插...
    晚晴幽草阅读 715,051评论 149 1,114

友情链接更多精彩内容