Nếu bạn muốn gõ code ít hơn mà vẫn đảm bảo được chất lượng công việc thì Emmet là một công cụ tuyệt vời mà bạn không nên bỏ qua.

EMMET là bộ phím tắt và các quy tắc nhằm giảm tối thiểu thời gian viết code của các lập trình viên. Nó giống một cách viết tắt dịch sang nhiều dòng HTML hoặc thuộc tính CSS.

Emmet được tích hợp sẵn trong nhiều text editor như VS Code. Tuy nhiên, bạn cũng có thể tải xuống cho phiên bản text editor thường dùng tại đây. Emmet cũng có sẵn trong một số IDE trực tuyến như CodePen.

Hãy nhìn kỹ vào ví dụ dưới đây và xem chỉ với một từ khóa ol>li{This is a list}*10 mà Emmet đã tạo ra 10 dòng code vô cùng nhanh chóng.

Bây giờ, hãy cùng tìm hiểu một số phím tắt Emmet giúp tạo HTML và CSS một cách nhanh chóng.

1. Phím tắt Emmet cho HTML

Cách tạo comment:

• Để comment một dòng nào đó, nhấn Ctrl + /
• Để comment nhiều dòng, hãy chọn những dòng đó và nhấn Ctrl + /

Phép nhân trong Emmet:

• Bạn có thể tạo nhiều element bằng cách chỉ định số đếm sau *.
• Ví dụ: p*10 sẽ tạo ra 10 element p.

Cách tạo lớp con trực tiếp (Direct Child)

• Bạn có thể tạo lớp con trực tiếp bằng cách sử dụng biểu tượng \>.

VD: ol>li sẽ tạo ra một phần tử li bên trong element ol.

Cách tạo sibbling

• Kí hiệu + dùng để đặt một element ở phía cạnh của một elements khác.

VD: div+p sẽ tạo ra một element div và một element p ở cùng cấp độ.

Cách Combine các selector

Bạn có thể kết hợp các selector sibling và lớp con để tạo cấu trúc. Ví dụ div+p>span: sẽ tạo các element div và p ở cùng cấp độ và span là element con của selector p:

Cách mã hóa các cấu trúc phức tạp bằng dấu ngoặc ()

Dấu ngoặc () có thể được sử dụng để tách các element của cấu trúc. Bằng cách sử dụng phím tắt (main>div)+div>ul>li*5, bạn có thể tạo cấu trúc phức tạp sau: