ST3快速编辑之Emmet及相关

2017-03-01 本文已影响30人世外大帝

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

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

正文开始了啊

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

这是个好东西，估计很多前端已经很熟悉了
代码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+↓

ST3快速编辑之Emmet及相关

正文开始了啊

Emmet插件的安装和使用

猜你喜欢

热点阅读