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

Bạn đang ở bài 3 trong 6 bài của serie Sử dụng 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:

basic-ul-element

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

div-class

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ụ:

emmet-child-elements

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

Ví dụ:

sibling-elements

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ụ:

id-and-class

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ụ:

specific-elements

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

Ví dụ:

multiple-classes

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

Ví dụ:

attribute

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ụ:

multiplication

Khai báo tập tin HTML

Ví dụ:

html5-structure

Lorem Ipsum

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

Ví dụ:

generate-lipsum

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ụ:

emmet-css

css-visibility

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.

[Bài 3]: Sử dụng plugin Emmet trong Sublime Text 3
4.67 (93.33%) 6 votes

Bình luận

1 Bình luận on "[Bài 3]: Sử dụng plugin Emmet trong Sublime Text 3"

Thông báo
avatar
Sắp xếp:   Mới nhất | Cũ nhất | Bình chọn nhiều
Hoàng Quang Thiên
Guest

Bạn ơi có thể chỉ mình cách làm cái banner kia được ko?

wpDiscuz