Ở bài viết trước mình đã giới thiệu tới các bạn Emmet – plugin tuyệt vời giành cho các Code Editor giúp việc viết code HTML/CSS được nhanh hơn rất nhiều. Và trong bài viết này, xin tiếp tục giới thiệu thêm một số thủ thuật hay với Emmet. Trước khi bắt đầu, hãy chắc rằng bạn đã cài đặt Emmet plugin cho Code Editor đang sử dụng, mình khuyên dùng Sublime Text, và nếu chưa biết cách, nên đọc qua phần I của bài: Viết code nhanh hơn với Emmet Plugin

Di chuyển giữa các thẻ cùng cặp

Với tổ hợp phím tắt Ctrl + Alt + J bạn có thể dễ dàng di chuyên qua lại giữa các thẻ trong cùng cặp thẻ HTML, ví dụ di chuyển giữa hai thẻ trong cặp <p></p> hay <h1></h1> như hình dưới Và tất nhiên, thẻ nào không có cặp, ví dụ <br /> thì phím này không có tác dụng rồi. Ngoài thẻ HTML, các bạn cũng có thể di chuyển giữa các thẻ cùng cặp đối với XML, hãy các ngôn ngữ khác.

Đưa text vào trong thẻ HTML nhanh chóng

Emmet cho phép bạn viết trước các đoạn text và đưa chúng vào trong thẻ HTML nhanh chóng thông bằng cách chọn text, gõ tổ hợp phím tắt Shift + Ctrl + G và thêm các thẻ HTML theo ý bạn. Như ảnh minh họa phía trên, bạn có thể thấy

• Cả đoạn text sẽ bao quanh thẻ article
• Hai dòng text sẽ nằm trong hai thẻ p
• Có thể thêm thẻ h1 vào rất đơn giản

Bao quanh từng dòng Text bằng các thẻ HTML giống nhau

Đây là một tính năng rất tuyệt vời và hay dùng của Emmet. Bạn có thể bao quanh nhiều đoạn văn bản, list…bằng những cặp thẻ HTML giống nhau rất dễ dàng bằng cách kết hợp cách làm ở ví dụ trên và toán tử *. Để giúp bạn dễ hình dung, ta hãy cùng xem ví dụ mã HTML cho Menu. Giả sử ta có menu với các mục

Home
About
Portfolio
Contact

Ta sẽ chọn tất cả các mục trên, nhấn tổ hợp phím tắt Ctrl + Shift + G hoặc Ctrl + Alt + Enter và nhập đoạn viết tắt nav>ul>li*>a vào khung hiện ra. Kết quả bạn sẽ thu được mã HTML như sau

<nav>
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Portfolio</a></li>
        <li><a href="">Contact</a></li>
    </ul>
</nav>

Chúng ta hãy thử một ví dụ phức tạp hơn, bằng một đoạn viết tắt nav>ul>li

*>a[href=$#.html]{$#}>img[src=$#.png alt="$#"].nav-bg, và kết quả thu được:

<nav>
    <ul>
        <li title="Home">
            <a href="Home.html">Home
                <img src="Home.png" alt="Home" class="nav-bg">
            </a>
        </li>
        <li title="About">
            <a href="About.html">About
                <img src="About.png" alt="About" class="nav-bg">
            </a>
        </li>
        <li title="Portfolio">
            <a href="Portfolio.html">Portfolio
                <img src="Portfolio.png" alt="Portfolio" class="nav-bg">
            </a>
        </li>
        <li title="Contact">
            <a href="Contact.html">Contact
                <img src="Contact.png" alt="Contact" class="nav-bg">
            </a>
        </li>
    </ul>
</nav>

  Qua ví dụ trên, ta biết được cách tạo những mã HTML phức tạp với Emmet, bạn có thể áp dụng để tạo cho mình những mã riêng nhé.

Di Chuyển tới Edit Point

Như ví dụ 1 ở mục trên, ngay sau khi Enter thì con trỏ Text sẽ ở trong dấu "" của thẻ <a href=""> đầu tiên, và bạn có thể gắn link cho mục Home. Sau đó bạn có thể di chuyển con trỏ text tới Editor Point tiếp theo (dấu "" dòng tiếp theo trong ví dụ). Và Shilf + Tab sẽ quay ngược trở lại.

Comment nhanh với Emment

Comment trong HTML/CSS hay trong mã của bất kỳ ngôn ngữ lập trình là điều không thể thiếu giúp các nhà phát triển giải thích ý nghĩa những đoạn mã, giúp người khác dễ dàng đọc và hiểu mã nguồn. Do vậy, bất kỳ code editor nào đều tích hợp những phím tắt để thêm comment một cách nhanh chóng. Với Emmet plugin bạn có thể dễ dàng comment những đoạn mã HTML, thậm chí không cần phải chọn (select) cả đoạn như chúng ta vẫn thường làm. Khi đặt con trỏ vào thẻ HTML hay property của CSS rồi nhấn Shift + Ctrl + / là toàn bộ đoạn mã trong thẻ HTML hay trong property của CSS sẽ thành comment. Và nhấn thêm lần nữa để uncomment. Xem hình dưới để hiểu rõ  

Split/Join

Tổ hợp phím Shift + Ctrl + ` sẽ chuyển cặp thẻ<header></header>thành <header />  và nhấn thêm lần nữa để chuyển ngược lại

Remove Tag

Sử dụng phím tắt Shift + Ctrl + ; sẽ bỏ tag ra khỏi text, ví dụ, nếu bạn muốn bỏ thẻ <h2></h2> trong đoạn <h2>hello there</h2>, chỉ cần đặt con trỏ trong thẻ <h2></h2> và nhấn Shift + Ctrl + ; và nhấn thêm lần nữa để thêm các thẻ vừa remove vào nhé.

Lời kết

Với hai bài viết về Emmet này, mình hi vọng bạn sẽ tiết kiệm được tối đa thời gian và công sức trong khi viết các mã HTML/CSS và giành những thời gian đó cho giải trí, hay nghiên cứu thêm. Nếu bạn biết thủ thuật hay nào khác của Emmet, hãy comment phía dưới để chia sẻ cho mình và mọi người nhé.