Nhập "cheat code" khi code HTML/CSS: Giải mã phép thuật Emmet trong VS Code

Chào anh em trên Viblo, lại là mình đây!

Mặc dù hàng ngày công việc chính của mình là ngụp lặn với mớ logic Backend, đập đi xây lại các API bằng Node.js hay Golang, nhưng không ít lần mình vẫn phải "nhúng chàm" sang mảng Frontend. Nào là dựng vội cái template email, sửa lại cái view Blade trong Laravel cho màn hình admin, hay làm một cái landing page nho nhỏ.

Hồi mới chập chững gõ những dòng code đầu tiên, nỗi ám ảnh lớn nhất của mình là phải gõ thủ công từng cái thẻ HTML. Gõ mở thẻ <div>, lại hì hục gõ đóng thẻ </div>. Đôi khi gõ nhầm, hoặc quên đóng thẻ là nguyên cái layout vỡ nát, tìm lỗi hoa cả mắt.

Và rồi, mình phát hiện ra Emmet – thứ mà mình vẫn hay gọi đùa là "cheat code" dành cho dân lập trình.

1. Emmet rốt cuộc là cái quái gì?

Nói một cách dễ hiểu nhất, Emmet là một plugin (hiện tại đã được tích hợp sẵn luôn vào VS Code) giúp bạn biến những cú pháp viết tắt ngắn gọn thành những khối code HTML/CSS hoàn chỉnh chỉ bằng một nút Tab hoặc Enter.

Thay vì phải gõ mỏi tay cả chục dòng code, bạn chỉ cần gõ một "câu thần chú" vài ký tự. Emmet giống như công cụ gõ tắt (Auto-expand) nhưng được nâng tầm lên mức độ ma thuật. Nó hiểu được cấu trúc cha-con, anh-em, class, id... của HTML.

2. Những "câu thần chú" đã cứu rỗi thanh xuân của mình

Để mình demo cho anh em thấy sự lợi hại của nó. Đảm bảo những ai chưa dùng sẽ cảm thấy như được khai sáng.

• Cú lừa ngoạn mục với phím ! Bạn tạo một file index.html mới tinh. Mọi khi bạn sẽ copy/paste cấu trúc cơ bản từ đâu đó đúng không? Với Emmet, bạn chỉ cần gõ ! và nhấn Tab. Bùm! Cả một bộ khung HTML5 chuẩn chỉnh hiện ra với đầy đủ thẻ head, meta viewport, body.
• Sinh sôi nảy nở với dấu * Giả sử bạn cần tạo một danh sách có 5 mục. Thay vì copy-paste thẻ <li> 5 lần, bạn chỉ cần gõ: ul>li*5 + Tab. Kết quả:

<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

• Combo định danh Class (.) và ID (#) Ngày xưa dựng layout Bootstrap, việc gõ các class lồng nhau cực kỳ mệt mỏi. Emmet giải quyết trong một nốt nhạc. Gõ: div.container>div.row>div.col-md-6*2 + Tab. Kết quả:

<div class="container">
    <div class="row">
        <div class="col-md-6"></div>
        <div class="col-md-6"></div>
    </div>
</div>

Nhìn cú pháp tắt, anh em thấy nó y hệt như cách chúng ta viết CSS Selector đúng không? Rất thân thuộc và dễ nhớ.

• Đánh số tự động với $ và thêm nội dung với {} Bạn muốn tạo 3 nút button, mỗi nút có tên là "Button 1", "Button 2", "Button 3"? Gõ: button.btn.btn-primary{Button $}*3 + Tab. Emmet sẽ tự động đếm và điền nội dung vào giữa các thẻ cho bạn.

3. Kinh nghiệm cấu hình Emmet cho "Dân chơi" VS Code

Mặc định Emmet đã quá ngon rồi, nhưng có một số mẹo nhỏ mình thường dùng để tối ưu hơn nữa:

Bật Emmet trong các file không thuần HTML Khi mình làm việc với Laravel (file .blade.php) hoặc React (file .jsx), đôi khi Emmet không tự động "nảy số". Để khắc phục, bạn có thể mở file settings.json trong VS Code và thêm đoạn cấu hình này vào để ép VS Code hiểu đó là HTML:

"emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "vue-html": "html",
    "blade": "html"
}

Bật tính năng "Wrap with Abbreviation" Có những lúc bạn đã có sẵn một đống text hoặc code, và bạn muốn bọc tất cả chúng vào trong một thẻ <div> chẳng hạn. Thay vì cắt/dán lằng nhằng, bạn bôi đen khối code đó, mở Command Palette (Ctrl + Shift + P trên Windows/Linux), gõ Emmet: Wrap with Abbreviation, sau đó gõ cú pháp tắt. Toàn bộ nội dung sẽ được bọc gọn gàng vào trong thẻ.

Lời kết

Dù bạn là một Frontend Developer thực thụ, hay một Backend Developer thi thoảng "đổi gió" sang làm giao diện, thì việc thành thạo Emmet là một khoản đầu tư vô cùng xứng đáng. Nó không chỉ tiết kiệm cho bạn hàng ngàn giờ gõ phím lặp đi lặp lại mà còn giữ cho luồng suy nghĩ của bạn không bị gián đoạn bởi những lỗi vặt như thiếu dấu ngoặc hay quên đóng thẻ.

Hãy thử áp dụng ngay vào project hiện tại của anh em nhé. Happy coding!