Sublime Text 3 z dodatkiem Emmet

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ć.

Avatar

Autor: gervee

Pełnoetatowy ojciec małej gromadki, programista(?), "amator" fotograf, "dłubacz" lubiący DIY, miłośnik chmielonego napitku. "Żartowniś" bez poczucia humoru ;).

Jedna myśl w temacie “Sublime Text 3 z dodatkiem Emmet”

Dodaj komentarz