【sublime】说一下这个工具的小技巧

2017-03-02 本文已影响72人 6126daeba29f

【1】先说一下遇到的第一件麻烦事-显示目录树

刚开始编辑html，js，css都不怎么在乎目录树，后来感觉没有目录树超级麻烦，就是所谓的侧边栏（ sidebar）

查看>>侧边栏>>显示/隐藏侧边栏

QQ截图20170302195056.jpg

【2】颜值是一件很重要的事情

QQ截图20170302195302.jpg

【3】说一说emmet

这是一个十分好用的变成，可以不用浪费时间在标签上，而且在很大程度上跟css里面的层级关系是一样的，学起来不难，还特别帅！
譬如我写一段

div.box#box>div.content>(h3.headline+p.artical)*5
按下tab键
-就会自动生成以下

<div class="box" id="box">
    <div class="content">
        <h3 class="headline"></h3>
        <p class="artical"></p>
        <h3 class="headline"></h3>
        <p class="artical"></p>
        <h3 class="headline"></h3>
        <p class="artical"></p>
        <h3 class="headline"></h3>
        <p class="artical"></p>
        <h3 class="headline"></h3>
        <p class="artical"></p>
    </div>
</div>

当然，也是可以加入内容和其他盒子的属性的
div>p.content{I don't buy your story}+cite{我不信你说的话}+^ul>.li$*2
然后

<div>
    <p class="content">I don't buy your story</p>
    <cite>我不信你说的话</cite>
</div>
<ul>
    <li class="li1"></li>
    <li class="li2"></li>
</ul>

你以为emmet的玩法只有酱紫，css也是有快速写法的，这里只稍微提一下，感兴趣的可以度娘一些（原谅我只是介绍一下小技巧）
-h10p+m5e然后就生成了

height: 10%;
margin: 5em;

【4】这个，话说tab键用起来

使用！迅速tab键，然后就可以生成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

of course,你也可以使用模糊匹配，输<html的时候，就会出现

QQ截图20170302201456.jpg

这个时候点一下tab键，同样可以生成一个基本的文档~

【5】ctrl+shift+p可以打开sublime的命令行

QQ截图20170302201930.jpg

其实我觉得这个除了安装一些插件，最有用的就是直接输入html，或者是css，或者是js直接将文件的后缀定下来。天知道我不知道的时候每次改语法整个人都是崩溃的！！

【6】我不爱注释，但是我还是说一下，因为简单粗暴

选中要注释的文本内容
直接按下ctrl+/，然后你就会看到

<!-- <div>
    <p class="content">I don't buy your story</p>
    <cite>我不信你说的话</cite>
</div>
<ul>
    <li class="li1"></li>
    <li class="li2"></li>
</ul> -->

不选中文本，直接按下ctrl+/可以直接生成

<!--  -->

【7】添加前缀，我表示曾经我实在太天真了

输入trf，然后按下键，谢谢，前缀全都有了，可以同时编辑。可以删除不必要的来编辑。当然，因为我比较懒，所以就只照了这种办法。

【8】模糊匹配，大概用tab次数最多的功能

譬如写style内嵌外链的时候，总是很懒，不想打字不想打字
但是

QQ截图20170302203618.jpg

按下tab
-然后

<style type="text/css"></style>

script和其他一些标签都是一个原理，大可以尝试 ~

先写到这里好了，其他的瞬间没记起来
喜欢求点赞