[Bài 3]: Sử dụng plugin Emmet trong Sublime Text 3

Ở bài trước các bạn đã được làm quen với các phím tắt trong Sublime Text và cách tạo các snippet tiện dụng. Ở bài này mình sẽ giới thiệu đến các bạn một plugin thường được sử dụng nhiều nhất trong Sublime Text là plugin Emmet.

Emmet là gì?

Emmet là một plugin giúp code nhanh và tiện lợi hơn cho các trình soạn thảo code.

Cài đặt Emmet

Đầu tiên bạn bấm Ctrl + Shift + P, rồi gõ Install Package, gõ tiếp Emmet và nhấn Enter để cài đặt plugin này cho Sublime Text nhé.

Viết mã HTML

Cú pháp: Gõ lệnh rồi nhấn phím Tab.

Gõ <ul> rồi nhấn Tab thì kết quả sẽ như sau:

Gõ div.class rồi nhấn Tab:

Thành phần con

Cấu trúc cũng giống như cấu trúc CSS, emmet sử dụng ký hiệu > để chỉ ra thành phần con.

Ví dụ:

Thành phần cùng cấp

Ví dụ:

Cấp ID và Class cho phần tử HTML

Cũng giống như cú pháp CSS, emmet dùng ký hiệu # để chỉ ID và ký hiệu . để chỉ Class

Ví dụ:

Như ví dụ trên, khi không chỉ ra phần tử HTML thì emmet sẽ hiểu là thẻ div

Khi bạn muốn chỉ ra phần tử cụ thể thì khai báo phần tử đó trước ký hiệu

Ví dụ:

Chỉ ra nhiều Class trong một phần tử:

Ví dụ:

Cấp phát thuộc tính

Ví dụ:

Kết hợp nhiều cú pháp

Lặp lại phần tử nhiều lần dùng ký hiệu *

Ví dụ:

Khai báo tập tin HTML

Ví dụ:

Lorem Ipsum

Số bao nhiêu sẽ ra bấy nhiêu chữ

Ví dụ:

Sử dụng Emmet trong CSS

Cũng tương tự HTML, Emmet giúp chúng ta viết cú pháp CSS nhanh hơn.

Ví dụ:

Kết luận

Như vậy là các bạn đã nắm được cách sử dụng plugin rất hữu dụng trong Sublime Text là Emmet rồi nhé. Tuy chỉ giới thiệu sơ qua các tính năng và cú pháp nhưng nhiêu đó chắc cũng đủ để giúp các bạn cải thiện được tốc độ code của mình rồi. Để nắm chi tiết hơn thì các bạn có thể vào trang chủ của Emmet sẽ có đầy đủ thông tin hơn.