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

#1

Đâ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/

5 Likes
#2

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/

#3

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

#4

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

1 Like
#5

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

2 Likes
#6

Sublime text thì dùng HTML-CSS-JS Prettify (Yêu cầu Nodejs).
Nếu có viết PHP thì dùng phpfmt (yêu cầu PHP 5.6+).

83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?