Sublime


hold command and click ofr multiple cursors

html syntax: autocompelte and create tags: emit plugin’’’
html prettifier sublime converts html to small case



emmet livestyle for live css editing


Go to definition:      goes to definition of javascript function
Build systems

Fuzzy open file
⌘P
⌘P:56      Go to line 56
⌘P@       CSS class selsctor

Find/Replace
⌥F  replace
F  find/replace where
⌘^G     in place change all instances of that word

Workspaces (multiple editing side by side)
⌥1, ⌘⌥2, ⌘⌥3, ⌘⌥4, ⌘⌥5

Projects
P Add folder to project
P Save project # it's good to have a folder to store all yuor sublime projects
^P Switch project

Install Package Control
Open console by pressing CTRL + ` or going to View > Show Console.

Command Palette
P

To install a plugin
P
install
emmet⏎

emmet
P       html⏎  //set syntax html
⌃⌥→      next editable place (e.g. where you might add code)

+ sibling tag     > child tag      * repeat       $ numbering       [ ] custom attribute          { }   text of tag      # id       . class

 div#myid>ul>(li>a.myclass)*5 <div id="myid">
    <ul>
        <li><a href="" class="myclass"></a></li>
        <li><a href="" class="myclass"></a></li>
        <li><a href="" class="myclass"></a></li>
        <li><a href="" class="myclass"></a></li>
        <li><a href="" class="myclass"></a></li>
    </ul>
</div>
 ! <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>
 .outer>.inner>(h1+p) <div class="outer">
    <div class="inner">
        <h1></h1>
        <p></p>
    </div>
</div>
a
a:link
a:mail
link

    <a href=""></a>
    <a href="http://"></a>
    <a href="mailto:"></a>
<link rel="stylesheet" href="">

 ul>li.item$*5 <ul>
    <li class="item1"></li>
    <li class="item2"></li>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
</ul>
 meta:utf

input:submit
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<input type="submit" value="" />

 h$[title=item$]{textual content $}*3<h1 title="item1">textual content 1</h1>
<h2 title="item2">textual content 2</h2>
<h3 title="item3">textual content 3</h3>
  
 ul>li.item$$$*5 <ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>
  
 table>.row*8>.col{&nbsp; $}*3<table>
    <tr class="row">
        <td class="col">&nbsp; 1</td>
        <td class="col">&nbsp; 2</td>
        <td class="col">&nbsp; 3</td>
    </tr>
    <tr class="row">
        <td class="col">&nbsp; 1</td>
        <td class="col">&nbsp; 2</td>
        <td class="col">&nbsp; 3</td>
    </tr>
    <tr class="row">
        <td class="col">&nbsp; 1</td>
        <td class="col">&nbsp; 2</td>
        <td class="col">&nbsp; 3</td>
    </tr>
    <tr class="row">
        <td class="col">&nbsp; 1</td>
        <td class="col">&nbsp; 2</td>
        <td class="col">&nbsp; 3</td>
    </tr>
    <tr class="row">
        <td class="col">&nbsp; 1</td>
        <td class="col">&nbsp; 2</td>
        <td class="col">&nbsp; 3</td>
    </tr>
    <tr class="row">
        <td class="col">&nbsp; 1</td>
        <td class="col">&nbsp; 2</td>
        <td class="col">&nbsp; 3</td>
    </tr>
    <tr class="row">
        <td class="col">&nbsp; 1</td>
        <td class="col">&nbsp; 2</td>
        <td class="col">&nbsp; 3</td>
    </tr>
    <tr class="row">
        <td class="col">&nbsp; 1</td>
        <td class="col">&nbsp; 2</td>
        <td class="col">&nbsp; 3</td>
    </tr>
</table>
#page>(#header>ul#nav>li*4>a)+(#content>h1{helloWorld}+p)+#footer

     <div id="page">
        <div id="header">
            <ul id="nav">
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
                <li><a href=""></a></li>
            </ul>
        </div>
        <div id="content">
            <h1>helloWorld</h1>
            <p></p>
        </div>
        <div id="footer"></div>
    </div>

Implicit Tag names
.class                  <div class="class"></div>
em>.class           <em><span class="class"></span></em>
ul>.class              <ul> <li class="class"></li> </ul>
table>.row>.col    <table> <tr class="row"> <td class="col"></td> </tr> </table>

docblocker // automatically generate documentations for functions







Comments