hold command and click ofr multiple cursors html syntax: autocompelte and create tags: emit plugin’’’ html prettifier sublime converts html to small case
Go to definition: goes to definition of javascript function
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 ControlOpen 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{ $}*3 | <table> <tr class="row"> <td class="col"> 1</td> <td class="col"> 2</td> <td class="col"> 3</td> </tr> <tr class="row"> <td class="col"> 1</td> <td class="col"> 2</td> <td class="col"> 3</td> </tr> <tr class="row"> <td class="col"> 1</td> <td class="col"> 2</td> <td class="col"> 3</td> </tr> <tr class="row"> <td class="col"> 1</td> <td class="col"> 2</td> <td class="col"> 3</td> </tr> <tr class="row"> <td class="col"> 1</td> <td class="col"> 2</td> <td class="col"> 3</td> </tr> <tr class="row"> <td class="col"> 1</td> <td class="col"> 2</td> <td class="col"> 3</td> </tr> <tr class="row"> <td class="col"> 1</td> <td class="col"> 2</td> <td class="col"> 3</td> </tr> <tr class="row"> <td class="col"> 1</td> <td class="col"> 2</td> <td class="col"> 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
|