W pewnym momencie mój ulubiony Notepad++ przestał mi wystarczać w mojej pracy i choć cenię go za wiele rzeczy postanowiłem „przesiąść” się na coś ciekawszego. Wybór padł obecnie na edytor Sublime (po lekturze wielu wątków dotyczących narzędzi do kodowania wybrałem ten edytor i jeszcze kilka innych).
Dobrym dodatkiem do Sublime jest Emmet czyli „plugin” zwiększający produktywność developera poprzez generowanie kodu po wpisaniu odpowiedniego skrótu i naciśnięciu klawisza [tab]. Dokumentacja do Emmet znajduje się tutaj->https://docs.emmet.io/ Składnia Emmeta opisana jest jasno tutaj -> https://docs.emmet.io/abbreviations/syntax/
Przykłady działania Emmet (lista dostępna tutaj ->https://docs.emmet.io/cheat-sheet/)
generowanie listy
wpisujemy ([tab] oznacza naciśnięcie klawisza TAB po wpisanej komendzie):
ul>li*5[tab]otrzymujemy:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>wpisujemy:
ul>li#item$*5[tab]otrzymujemy:
<ul>
<li id="item1"></li>
<li id="item2"></li>
<li id="item3"></li>
<li id="item4"></li>
<li id="item5"></li>
</ul>wpisujemy:
div>div.$*5[tab]otrzymujemy:
<div>
<div class="1"></div>
<div class="2"></div>
<div class="3"></div>
<div class="4"></div>
<div class="5"></div>
</div>generowanie listy z odnośnikami
wpisujemy:
ul>(li>a)*10[tab]otrzymujemy:
<ul>
<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>
<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>generowanie tabeli
wpisujemy:
table+[tab]otrzymujemy:
<table>
<tr>
<td></td>
</tr>
</table>
wpisujemy:
table>(tr>(td>a)*3)*5[tab]otrzymujemy:
<table>
<tr>
<td><a href=""></a></td>
<td><a href=""></a></td>
<td><a href=""></a></td>
</tr>
<tr>
<td><a href=""></a></td>
<td><a href=""></a></td>
<td><a href=""></a></td>
</tr>
<tr>
<td><a href=""></a></td>
<td><a href=""></a></td>
<td><a href=""></a></td>
</tr>
<tr>
<td><a href=""></a></td>
<td><a href=""></a></td>
<td><a href=""></a></td>
</tr>
<tr>
<td><a href=""></a></td>
<td><a href=""></a></td>
<td><a href=""></a></td>
</tr>
</table>wpisujemy:
ol>(li>img)*3[tab]otrzymujemy:
<ol>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
<li><img src="" alt=""></li>
</ol>Pożyteczne skróty w Emmet nie ograniczają się tylko do komend html. Można nimi utworzyć szkielet dokumentu html tak jak przedstawiono to poniżej.
generowanie dokumentu html5
wpisujemy:
![tab] lub ewentualnie html:5[tab]otrzymujemy szkielet dokumentu html5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>podobnie wpisując:
doc[tab]otrzymujemy:
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>wpisując:
doc4[tab]otrzymujemy szkielet dokumentu HTML4:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>przydatne skróty
wpsiujemy:
a[tab]otrzymujemy:
<a href=""></a>wpisujemy:
a:mail[tab]otrzymujemy:
<a href="mailto:"></a>wpisujemy:
a:link[tab]otrzymujemy:
<a href="https://"></a>wpisujemy:
ul>li*3>a{podstrona$}otrzymujemy:
<ul>
<li><a href="">podstrona1</a></li>
<li><a href="">podstrona2</a></li>
<li><a href="">podstrona3</a></li>
</ul>
wpisujemy:
link[tab]otrzymujemy:
<link rel="stylesheet" href="">wpisujemy:
meta:utf[tab]otrzymujemy:
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">tworzenie formularzy
Skróty przydatne przy tworzeniu formularzy:
wpisujemy:
form:post[tab]otrzymujemy:
<form action="" method="post"></form>wpisujemy:
form:get[tab]otrzymujemy:
<form action="" method="get"></form>wpisujemy:
intput[tab]otrzymujemy:
<input type="text">wpisujemy:
inp[tab]otrzymujemy:
<input type="text" name="" id="">wpisujemy:
input:tel[tab]otrzymujemy:
<input type="tel" name="" id="">wpisujemy:
input:submit[tab]otrzymujemy:
<input type="submit" value="">tagi różnego poziomu
Jeśli chcemy mieć w dokumencie taki różnego poziomu używamy „>” natomiast chcąc mieć tagi tego samego poziomu używamy „+”
wpisujemy:
(p+p)+div>div>div+div+div[tab]otrzymujemy:
<p></p>
<p></p>
<div>
<div>
<div></div>
<div></div>
<div></div>
</div>
</div>Oczywiście nie tylko wpisywanie samych komend html może być usprawnione przy pomocy Emmet, także możemy zyskać wiele wykorzystując Emmet do edycji dokumentów CSS.
CSS
font
wpisujemy:
ff:a[tab]otrzymujemy:
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;wpisujemy:
fz[tab]otrzymujemy:
font-size: ;wpisujemy:
fw:b[tab]otrzymujemy:
font-weight: bold;kolor
wpisujemy:
c[tab]otrzymujemy:
color: #000;wpisujemy:
c:a[tab]
otrzymujemy:
color: rgba(0, 0, 0, .5);border
wpisujemy:
bd+[tab]otrzymujemy:
border: 1px solid #000;generator „Lorem ipsum”
Bardzo użytecznym może okazać się generator tekstu „Lorem ipsum”, który jest często wykorzystywany w projektach stron do wypełnienia tekstem odpowiednich fragmentów strony. Przykładowo jeśli chcemy wygenerować kilka paragrafów wypełnionych tekstem wystarczy wpisać:
p*4>lorem[tab]otrzymujemy:
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore eos maiores laborum. Est, aliquam odit. Delectus culpa praesentium aperiam commodi necessitatibus, deserunt amet veniam! Aut eius modi dolorem culpa nemo.</p>
<p>Non aliquid tempore maiores! Reiciendis iure fugit sapiente temporibus hic, quasi dicta officiis iusto nemo magnam dolor placeat eaque, pariatur at laboriosam sint ipsum, similique amet vitae? Ullam, reprehenderit facere.</p>
<p>Optio, mollitia officia velit quae voluptate voluptatem a, laborum. Natus asperiores facilis totam optio. Accusantium, eligendi. Nostrum omnis pariatur quibusdam, molestiae odit consequatur voluptatem aliquam, illum quo dolore accusamus, quia.</p>
<p>Asperiores saepe magnam numquam, consequuntur illo sint laborum similique nihil maxime optio ipsam porro! Beatae, delectus, impedit. Corporis, eum ipsam eligendi ex. Expedita officiis recusandae ea placeat natus aliquam quos.</p>jeśli natomiast wpiszemy:
p*4>lorem10[tab]otrzymujemy:
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit, aperiam.</p>
<p>Molestias similique, aspernatur quas voluptas corrupti nobis! Iure, inventore, impedit.</p>
<p>In vitae explicabo, neque velit placeat illo veritatis natus, libero!</p>
<p>Ipsum veritatis et provident, nemo laborum iusto expedita. Quidem, eligendi!</p>wpisując:
#page>(#header>ul#nav>li*4>a+lorem10)+(#content>h1{Hello world!}+p)+(#footer>span{tekst stopki})otrzymujemy:
<div id="page">
<div id="header">
<ul id="nav">
<li><a href=""></a>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda, laborum?</li>
<li><a href=""></a>Alias doloremque modi fuga quasi atque aspernatur hic, consequuntur distinctio.</li>
<li><a href=""></a>Quos numquam voluptates eos consectetur? Fugiat, odio. Consectetur, nihil, dicta.</li>
<li><a href=""></a>In reiciendis, veniam illo officiis atque reprehenderit magni molestias quod!</li>
</ul>
</div>
<div id="content">
<h1>Hello world!</h1>
<p></p>
</div>
<div id="footer"><span>tekst stopki</span></div>
</div>
Tak jak widać Emmet może w znacznym stopniu uprościć pracę developera pomagając mu we wklepywaniu kodu. Jednak jest to tylko narzędzie, które jak to narzędzie trzeba umieć właściwie wykorzystać.
Jeden komentarz do “Sublime Text 3 z dodatkiem Emmet”