Hướng dẫn cheat code bằng visual studios

2, hoặc

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:

• 3 —>

  4

• 5 —>

  6

ID’s

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

• 7 —>

  8

Ghép chuỗi

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

• 9 —>

  0

Attributes – thuộc tính

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

• 1 —>

  2

Content – nội dung

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

3

• 4 —>

  5

Siblings & Children

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

6 và dấu lớn hơn

7

• 8 —>

  9

• 0 —>

  1

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

2.

3

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

4.

5

Kết quả

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

Bạn có thể tạo tag theo cấp số nhân bằng [

1. và đánh số các items theo thứ tự với ký hiệu dollar [

7].

• 8 —>

  9

• 0 —>

  1

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:

2

Kết quả:

Bắt đầu bằng một số xác định:

3

Kết quả:

Đảo hướng:

4

Kết quả:

Đảo hướng từ một số xác định:

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à
  6.

7 —>

4

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

  
  
Lorem ipsum dolor sit amet.
  
  
Numquam repudiandae fuga porro consequatur?
  
  
Culpa, est. Tenetur, deleniti nihil?
  
  
Numquam architecto corrupti quam repudiandae.
  

0 —>

  
  
Lorem ipsum dolor sit amet.
  
  
Numquam repudiandae fuga porro consequatur?
  
  
Culpa, est. Tenetur, deleniti nihil?
  
  
Numquam architecto corrupti quam repudiandae.
  

1

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

  
  
Lorem ipsum dolor sit amet.
  
  
Numquam repudiandae fuga porro consequatur?
  
  
Culpa, est. Tenetur, deleniti nihil?
  
  
Numquam architecto corrupti quam repudiandae.
  

2 —>

  
  
Lorem ipsum dolor sit amet.
  
  
Numquam repudiandae fuga porro consequatur?
  
  
Culpa, est. Tenetur, deleniti nihil?
  
  
Numquam architecto corrupti quam repudiandae.
  

3

• Class xác định trong table được hiểu là
  • Lorem ipsum dolor sit amet.
  • Numquam repudiandae fuga porro consequatur?
  • Culpa, est. Tenetur, deleniti nihil?
  • Numquam architecto corrupti quam repudiandae.

  4 còn trong row thì là

  • Lorem ipsum dolor sit amet.
  • Numquam repudiandae fuga porro consequatur?
  • Culpa, est. Tenetur, deleniti nihil?
  • Numquam architecto corrupti quam repudiandae.
  5.

  
  
Lorem ipsum dolor sit amet.
  
  
Numquam repudiandae fuga porro consequatur?
  
  
Culpa, est. Tenetur, deleniti nihil?
  
  
Numquam architecto corrupti quam repudiandae.
  

6 —>

  
  
Lorem ipsum dolor sit amet.
  
  
Numquam repudiandae fuga porro consequatur?
  
  
Culpa, est. Tenetur, deleniti nihil?
  
  
Numquam architecto corrupti quam repudiandae.
  

7

“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 [

  
  
Lorem ipsum dolor sit amet.
  
  
Numquam repudiandae fuga porro consequatur?
  
  
Culpa, est. Tenetur, deleniti nihil?
  
  
Numquam architecto corrupti quam repudiandae.
  

1. lên, search

  
  
Lorem ipsum dolor sit amet.
  
  
Numquam repudiandae fuga porro consequatur?
  
  
Culpa, est. Tenetur, deleniti nihil?
  
  
Numquam architecto corrupti quam repudiandae.
  

9. Sau đó sẽ có dialog box để gõ element vào.

!`0 —> !`1

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 `!`2. 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à !`3 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.

• `!`5 sẽ cho bạn 10 từ random.

Gộp chung lại

Thử gộp chung những điều ở trên lại: `!`6

Kết quả

  
  
Lorem ipsum dolor sit amet.
  
  
Numquam repudiandae fuga porro consequatur?
  
  
Culpa, est. Tenetur, deleniti nihil?
  
  
Numquam architecto corrupti quam repudiandae.
  

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

• !`7 —> !`8 [mặc định relative]
• `!`9 —> `Enter`0
• `Enter`1 —> `Enter`2
• Enter`3 —> !`8
• `Enter`5 —> `Enter`6

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

Hiển thị

• `Enter`7 —> `Enter`8 [mặc định block]
• `Enter`9 —> `Enter`0
• `Enter`1 —> `Enter`8
• `Enter`3 —> `Enter`4
• `Enter`5 —> `Enter`6
• `Enter`7 —> `Enter`8
• Enter`9 —>
  ` 00

Cursor

• 01 —>

  02

Màu

• 03 —>

  04

• 05 —>

  06

• 07 —>

  08

• 09 —>

  10

Margin & Padding: Đệm lề

• 11 —>

  12

• 13 —>

  14

• 15 —>

  16

• 17 —>

  18

• 19 —>

  20

• 21 —>

  22

• 23 —>

  24

• 25 —>

  26

• 27 —>

  28

• 29 —>

  30

• 31 —>

  32

Box Size

• 33 —>

  34

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

• 35 —>

  36

• 37 —>

  38

• 39 —>

  40

• 41 —>

  42

• 43 —>

  44

• 45 —>

  46

Canh lề

• 47 —>

  48

• 49 —>

  50

• 51 —>

  52

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.