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é.
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
divsau đóEnter, hoặch1 Enter, hoặcp Enter.Ngoài ra thì cũng có:
bqcho<blockquote>,hdrcho<header>,ftrcho<footer>,btncho<button>, vàsectcho 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ả:
Ở đâ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
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ả:
Bắt đầu bằng một số xác định: ul>li.item$@3*5
Kết quả:
Đảo hướng:ul>li.item$@-*5
Kết quả:
Đảo hướng từ một số xác định: ul>li.item$@-3*5
Kết quả:
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.
lorem10sẽ 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ả:
Last updated