Bài viết giới thiệu gói mở rộng Emmet cho trình soạn thảo Sublime Text, giúp tăng tốc độ viết code lên gấp nhiều lần.

Hướng dẫn sử dụng Emmet để tăng tốc độ viết code trên Sublime Text

Sublime Text

Sublime Text là một công cụ chỉnh sửa văn bản cực nhỏ gọn và nhanh chóng, thường được lựa chọn bởi các lập trình viên, vì sự tiện lợi và nhanh chóng của nó.

Tải về

Bạn có thể sử dụng miễn phí cho mục đích cá nhân mà không cần mua bản quyền, chỉ cần bỏ qua đề nghị mua bản quyền thỉnh thoảng sẽ xuất hiện của nó!

Emmet

Emmet là gói mở rộng sử dụng các biểu thức ngắn để tạo ra mã HTML, CSS.

Bước 1. Cài đặt Package Control

  • Mở Command Palette: Ctrl + Shift + P (cho máy Mac: Command + Shift + P).
  • Gõ Install Package Control và bấm cài đặt.

Bước 2. Cài đặt Increment Selection

  • Mở lại Command Palette.
  • Gõ Package Control: Install Package.
  • Gõ Emmet và bấm cài đặt.

Sử dụng Emmet

HTML

Ví dụ bạn gõ ul#nav>li.item$*4>a{Item $} rồi bấm Tab, kết quả sẽ được.

<ul id="nav">
    <li class="item1"><a href="">Item 1</a></li>
    <li class="item2"><a href="">Item 2</a></li>
    <li class="item3"><a href="">Item 3</a></li>
    <li class="item4"><a href="">Item 4</a></li>
</ul>

Ví dụ Lorem Ipsum, gõ như này ul.generic-list>lorem10.item*4, ta được kết quả.

<ul class="generic-list">
    <li class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nam vero.</li>
    <li class="item">Laboriosam quaerat sapiente minima nam minus similique illum architecto et!</li>
    <li class="item">Incidunt vitae quae facere ducimus nostrum aliquid dolorum veritatis dicta!</li>
    <li class="item">Tenetur laborum quod cum excepturi recusandae porro sint quas soluta!</li>
</ul>

CSS

CSS bạn gõ như sau.

p10
m5-10
color: #f.5

Sẽ được kết quả.

padding: 10px;
margin: 5px 10px;
color: rgba(255, 255, 255, 0.5);

Các bạn tham khảo tài liệu hướng dẫn sử dụng Emmet tại đây nhé. Chúc các bạn thành công!

5/5 (3 bình chọn)
Chia sẻ