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
|