Hướng dẫn chi tiết cách sử dụng plugin Emmet trong Sublime Text 3

0
35

Bài viết thuộc serie: Hướng dẫn toàn tập về Sublime Text 3

Tiếp tục series bài viết 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.

Huong Dan Chi Tiet Cach Su Dung Plugin Emmet Trong Sublime Text 3
Huong Dan Chi Tiet Cach Su Dung Plugin Emmet Trong Sublime Text 3

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. Ngoài ra bạn có thể thao khảo nguồn mở tại đây.

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.

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

Huong Dan Chi Tiet Cach Su Dung Plugin Emmet Trong Sublime Text 3
Huong Dan Chi Tiet Cach Su Dung Plugin Emmet Trong Sublime Text 3

div.class rồi nhấn Tab:

Huong Dan Chi Tiet Cach Su Dung Plugin Emmet Trong Sublime Text 3
Huong Dan Chi Tiet Cach Su Dung Plugin Emmet Trong Sublime Text 3

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

Huong Dan Chi Tiet Cach Su Dung Plugin Emmet Trong Sublime Text 3
Huong Dan Chi Tiet Cach Su Dung Plugin Emmet Trong Sublime Text 3

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

Ví dụ:

Huong Dan Chi Tiet Cach Su Dung Plugin Emmet Trong Sublime Text 3
Huong Dan Chi Tiet Cach Su Dung Plugin Emmet Trong Sublime Text 3

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

Huong Dan Chi Tiet Cach Su Dung Plugin Emmet Trong Sublime Text 3
Huong Dan Chi Tiet Cach Su Dung Plugin Emmet Trong Sublime Text 3

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

Huong Dan Chi Tiet Cach Su Dung Plugin Emmet Trong Sublime Text 3
Huong Dan Chi Tiet Cach Su Dung Plugin Emmet Trong Sublime Text 3

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

Ví dụ:

Huong Dan Chi Tiet Cach Su Dung Plugin Emmet Trong Sublime Text 3
Huong Dan Chi Tiet Cach Su Dung Plugin Emmet Trong Sublime Text 3

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

Ví dụ:

Huong Dan Chi Tiet Cach Su Dung Plugin Emmet Trong Sublime Text 3
Huong Dan Chi Tiet Cach Su Dung Plugin Emmet Trong Sublime Text 3

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

Huong Dan Chi Tiet Cach Su Dung Plugin Emmet Trong Sublime Text 3
Huong Dan Chi Tiet Cach Su Dung Plugin Emmet Trong Sublime Text 3

Khai báo tập tin HTML

Ví dụ:

Huong Dan Chi Tiet Cach Su Dung Plugin Emmet Trong Sublime Text 3
Huong Dan Chi Tiet Cach Su Dung Plugin Emmet Trong Sublime Text 3

Lorem Ipsum

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

Ví dụ:

Huong Dan Chi Tiet Cach Su Dung Plugin Emmet Trong Sublime Text 3
Huong Dan Chi Tiet Cach Su Dung Plugin Emmet Trong Sublime Text 3

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

Huong Dan Chi Tiet Cach Su Dung Plugin Emmet Trong Sublime Text 3
Huong Dan Chi Tiet Cach Su Dung Plugin Emmet Trong Sublime Text 3
Huong Dan Chi Tiet Cach Su Dung Plugin Emmet Trong Sublime Text 3
Huong Dan Chi Tiet Cach Su Dung Plugin Emmet Trong Sublime Text 3

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.

Continue reading this series:

4.6/55 ratings
Nếu yêu thích LocDang.Com thì hãy đăng ký theo dõi để nhận tin tức mới nhất và đừng quên Like và Follow mình trên Facebook Twitter nhé.

Để lại bình luận

avatar