30/09/2018, 17:41

Sử dụng Emmet để tăng tốc lập trình HTML và CSS

Đây là phần note của mình về các cú pháp cơ bản mà Emmet hỗ trợ sau khi tìm hiểu về Emmet.
Hiện tại Udemy.com đang có khóa học miễn phí về Emmet - Best Tool For Developers Edwin Diaz Rate Course
Hiện tại cũng có Video tiếng Việt trên laptrinh.io

Tuy nhiên mỗi lần muốn tham khảo hoặc xem lại thì xem video rất khó nên mình tóm tắt lại cho tiện.

Emmet là gì?

Emmet là một plugin cho các code editor phổ biến như Sublime, atom, bracket,…
Emmet giúp việc code html và css nhanh hơn và đơn giản hơn. Thay vì phải gõ từng tag, mở tag, đóng tag, copy và paste, emmet định nghĩa các cú pháp kiểu viết tắt và sẽ tự động chuyển thành code hmtl/css.

Ví dụ:
Code emmet

ul.my-list>li*5>a{click here}

Nhấn Tab hoặc Ctrl+E

<ul class="my-list">
    <li><a href="">click here</a></li>
    <li><a href="">click here</a></li>
    <li><a href="">click here</a></li>
    <li><a href="">click here</a></li>
    <li><a href="">click here</a></li>
</ul>

Đọc thêm ở đây: http://kebano.net/su-dung-emmet-de-tang-toc-lap-trinh-html-va-css/

Mai Anh Dũng viết 19:53 ngày 30/09/2018

Cái Emmet này có thể sắp xếp lại code HTML cho nó gọn đẹp được không nhỉ? Đạt cứ phải lên mấy trang này format lại code cho đẹp

http://jsbeautifier.org/

Coulson viết 19:45 ngày 30/09/2018

Emmet không hỗ trợ sắp xếp lại code anh ơi.
Anh Đạt đang xài editor nào?

Em thấy các editor phổ biến đều có plugin để format code html với javascript.
Em dùng Atom thì xài plugin này https://atom.io/packages/auto-indent

vũ xuân quân viết 19:49 ngày 30/09/2018

@Dung_Nguyen
em có biết plugin nào của sublime dành có vụ này không ?

Coulson viết 19:42 ngày 30/09/2018

@masoivn Trên sublime có sẵn chức năng indent/reindent Edit > Line > Reindent nhưng mà xài không tốt lắm nhiều chỗ nó không indent được.
Anh có thể dùng plugin: