Dùng Emmet để Code HTML/CSS nhanh hơn

Tác giả: Jesse Hall

Emmet là một trong những tính năng built-in ưa thích của mình với text editor VS Code, và nó cũng là extension có sẵn trên các nền tảng code editor khác. Với Emmet, bạn có thể đẩy nhanh tốc độ làm việc HTML & CSS, thậm chí còn được xem là cheat-code.

Dùng Emmet trong HTML

Với Emmet thì việc tạo một HTML boilerplate diễn ra trong nháy mắt. Với HTML file, chỉ cần type ! bạn sẽ thấy Emmet hiển thị các gợi ý, sau đó chỉ việc Enter là đã có sẵn trang HTML blank cơ bản. Đây mình mới chỉ đang demo vài khả năng của VS Code và Emmet nên nếu chưa hiểu thì không sao, cứ đọc tiếp nhé.

Xem thêm Tạo React Boilerplate – Từ a tới z

Các tag cơ bản

Để tạo các thẻ – tag HTML thì chỉ cần gõ tên thẻ và Enter. Emmet sẽ đặt con trỏ chuột trong thẻ đó, lúc này có thể tiếp tục type bên trong thẻ rồi.

• Thử type div sau đó Enter, hoặc h1 Enter, hoặc p Enter.
• Ngoài ra thì cũng có: bq cho <blockquote>, hdr cho <header>, ftr cho <footer>, btn cho <button>, và sect cho section.

Classes

Nếu bạn đã quen với CSS thì Emmet cũng dùng cách tương tự, dấu . để refer đến class. Để define class với thẻ thì chỉ cần thêm như thế này:

• div.wrapper —> <div class="wrapper"></div>
• h1.header.center —> <h1 class="header center"></h1>

ID’s

Làm với ID thì cũng khá tương tự:

• div#hero —> <div id="hero"></div>

Ghép chuỗi

Ghép 2 cái trên thì ta có:

• div#hero.wrapper —> <div id="hero" class="wrapper"></div>

Attributes – thuộc tính

Ta cũng có thể chỉ định attribute cho tag:

• img[src="cat.jpg"][alt="Cute cat pic"] —> <img src="cat.jpg" alt="Cute cat pic" />

Content – nội dung

Để “bọc” content trong tag, chỉ cần bỏ chúng giữa 2 dấu ngoặc {}

• p{This is a paragraph} —> <p>This is a paragraph</p>

Siblings & Children

Tương tự với siblings và children thì dùng ký tự dấu cộng + và dấu lớn hơn >

• section+section —> <section></section><section></section>
• ul>li —> <ul><li></li></ul>

Climbing up

Hình dung những gì đang build trong đầu vì lúc này bạn đang type tốc ký Emmet. Ví dụ này thì mình đang leo cây với ^.

div+div>p>span+em^bq

Kết quả

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

Ở đây mình muốn để blockquote nó xuất hiện ngang hàng – same level với paragraph. Vì thế nên mới cần climb up, nếu không thì blockquote sẽ bị nhét vào trong paragraph.

Nhóm

Nếu cấu trúc phức tạp thì bạn có thể nhóm thẻ – group tag thay vì dùng climb up. Ví dụ này mình tạo header và footer (không climb) sử dụng ngoặc đơn ().

div>(header>ul>li>a)+footer>p

Kết quả

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

Phép nhân và ký hiệu $

Bạn có thể tạo tag theo cấp số nhân bằng (*) và đánh số các items theo thứ tự với ký hiệu dollar ($).

• ul>li*5 —> <ul><li></li><li></li><li></li><li></li><li></li></ul>
• ul>li{Item $}*3 —> <ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>

Thậm chí bạn có thể customize luôn thứ tự đánh số chứa chữ số 0, bắt đầu với số xác định và có thể đảo ngược lại.

Đệm số 0: ul>li.item$$$*5

Kết quả:

<ul>
    <li class="item001"></li>
    <li class="item002"></li>
    <li class="item003"></li>
    <li class="item004"></li>
    <li class="item005"></li>
</ul>

Bắt đầu bằng một số xác định: ul>li.item$@3*5

Kết quả:

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

Đảo hướng:ul>li.item$@-*5

Kết quả:

<ul>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
    <li class="item2"></li>
    <li class="item1"></li>
</ul>

Đảo hướng từ một số xác định: ul>li.item$@-3*5

Kết quả:

<ul>
    <li class="item7"></li>
    <li class="item6"></li>
    <li class="item5"></li>
    <li class="item4"></li>
    <li class="item3"></li>
</ul>

Tag ngầm

Có một số thẻ tag không cần type ra mà có thể ngầm hiểu:

• Một class lúc đầu không có tag thì sẽ được hiểu là <div>.

.wrapper —> <div class="wrapper"></div>

• Class với thẻ emphasis sẽ được hiểu là <span>.

em>.emphasis —> <em><span class="emphasis"></span></em>

• Class xác định bên trong list sẽ được hiểu là list item.

ul>.item —> <ul><li class="item"></li></ul>

• Class xác định trong table được hiểu là <tr> còn trong row thì là <td>.

table>.row>.col —> <table><tr class="row"><td class="col"></td></tr></table>

“Kẹp” Tag

Có lúc bạn muốn kẹp thẻ tag vào những đoạn code có sẵn, Emmet có thể dễ dàng làm việc này. Đầu tiên, highlight đoạn code bạn cần add tag, và mở command pallet (F1) lên, search Emmet: Wrap with Abbreviation. Sau đó sẽ có dialog box để gõ element vào.

test —> <div>test</div>

Ngoài cách này thì cũng có thể dùng cú pháp Emmet tiêu chuẩn trong dialog này, wrap đoạn text với span.wrapper. Chức năng này không được gán vào phím tắt. Nên nếu bạn dùng tính năng này thường xuyên thì nên add shortcut cho nó.

Lorem Ipsum

“Lorem Ipsum” là đoạn text fake rất phổ biến được dùng để hiển thị random các giá trị dữ liệu trên trang. Chỉ cần gõ và lorem bấm Enter. Emmet sẽ tạo ra 30 từ ngẫu nhiên có thể dùng để dàn nội dung trong project.

Bạn cũng có thể tự cho số lượng chữ theo nhu cầu.

• lorem10 sẽ cho bạn 10 từ random.

Gộp chung lại

Thử gộp chung những điều ở trên lại: ul.my-list>lorem10.item-$*5

Kết quả

<ul class="my-list">
  <li class="item-1">Lorem ipsum dolor sit amet.</li>
  <li class="item-2">Numquam repudiandae fuga porro consequatur?</li>
  <li class="item-3">Culpa, est. Tenetur, deleniti nihil?</li>
  <li class="item-4">Numquam architecto corrupti quam repudiandae.</li>
</ul>

Dùng Emmet trong CSS

Với CSS, thì Emmet có từng cái viết tắt cho từng property, mình sẽ không liệt kê chúng ra hết nhưng sẽ đưa ra những trường hợp được dùng nhiều nhất. Bạn có thể xem full list tại đây.

Position

• pos —> position:relative; (mặc định relative)
• pos:s —> position:static;
• pos:a —> position:absolute;
• pos:r —> position:relative;
• pos:f —> position:fixed;

Xem thêm Tất tần tật về thuộc tính position trong CSS

Hiển thị

• d —> display:block; (mặc định block)
• d:n —> display:none;
• d:b —> display:block;
• d:f —> display:flex;
• d:if —> display:inline-flex;
• d:i —> display:inline;
• d:ib —> display:inline-block;

Cursor

• cur —> cursor:pointer;

Màu

• c —> color:#000;
• c:r —> color:rgb(0, 0, 0);
• c:ra —> color:rgba(0, 0, 0, .5);
• op —> opacity: ;

Margin & Padding: Đệm lề

• m —> margin: ;
• m:a —> margin:auto;
• mt —> margin-top: ;
• mr —> margin-right: ;
• mb —> margin-bottom: ;
• ml —> margin-left: ;
• p —> padding: ;
• pt —> padding-top: ;
• pr —> padding-right: ;
• pb —> padding-bottom: ;
• pl —> padding-left: ;

Box Size

• bxz —> box-sizing:border-box;

Xem thêm CSS Box Model – Các cách hiển thị element với thuộc tính display

Chiều rộng

• w —> width: ;
• h —> height: ;
• maw —> max-width: ;
• mah —> max-height: ;
• miw —> min-width: ;
• mih —> min-height: ;

Canh lề

• bd —> border: ;
• bd+ —> border:1px solid #000;
• bd:n —> border:none;

Kết luận

Với Emmet bạn có thể tạo nên cấu trúc HTML phức tạp với chỉ một dòng, với CSS cũng làm được những điều tương tự. Tóm lại, Emmet khá đỉnh, dùng Emmet có thể giúp nâng cao năng suất và tốc độ viết HTML và CSS.

Bài viết gốc được đăng tải tại freeCodeCamp

Có thể bạn quan tâm:

• Hướng dẫn viết Chrome Extension tự động duyệt bài viết khi scroll
• Những Visual Studio Code Extensions không thể bỏ qua khi lập trình Angular v2+
• 30 tiện ích Chrome (extensions) cho Designer và Developer

Xem thêm việc làm HTML và CSS hấp dẫn tại TopDev