Nhập từ khóa để tìm kiếm

Tăng tốc dộ coding của bạn với Emmet

Bao Quốc
Bao Quốc 9 tháng ago
Chia sẻ

Nếu bạn ở đây và tôi giả định rằng sẽ rằng bạn là người chưa biết gì về Emmet. Bạn sẽ cảm thấy hứng khởi có thêm đam mê khi biết đến Emmet sau khi bạn đọc bài này

Thật vậy, Emmet là một công cụ cần thiết cho bạn nó sẽ cải thiện tốc độ coding HTML vs CSS của bạn ngay lập tức và dễ dàng

OK để bắt đầu tôi muốn nói rằng nếu bạn đã nghe về  Zen Coding thì bạn sẽ tìm thấy ở Emmet là cái tương tự. Trong thực tế Zen Coding đã phát triển thành Emmet thêm một loại các tính năng mới mà bạn sẽ sớm khám phá ra.

Trong một tóm tắt, Emmet là một công cụ cho web developpers mà cải thiện tốc độ coding HTML và CSS nhưng cũng được sử dụng với ngôn ngữ lập trình

Nói huyên thuyên đủ rồi, giờ tôi vào vấn đề chính với các ví dụ cụ thể sau đây

HTML

Chú ý, đây là bước quan trọng một khi bạn đọc và học những bước sau bạn sẽ

  • Yêu thích với các coding mới này
  • Bạn sẽ không bao giờ gõ full tag trong html của bạn nữa
  • Bạn sẽ tiếp kiệm được số lượng lớn thời gian

Vậy hãy bắt đầu với ví dụ dễ nhất:

Bạn chỉ gõ với

div[tab]

(Khi tôi sử dụng [tab] tức là bám nút tab trên bàn phím)

[tab] là nút mặc định để thực thi Emmet trong code editor của bạn. Nó sẽ phân tích cú pháp và sinh ra html cho bạn.

Dĩ nhiên bạn có thể tạo ra cấu chúc HTML phức tạp hơn như

Bạn chỉ gõ với lệnh sau sẽ có được kết quả như trên

 

Ok tôi sẽ giải thích cụ thể hơn

ul là thẻ cha sau đó chúng ta sử dụng ký tự  > để trỏ đến thành phần con trong ul bao gồm li

* là một phép tính nhân mà cho phép chúng ta định nghĩa có bao nhiêu lần sinh ra thẻ tag. ở đây là 3 lần thẻ li . trong mỗi thẻ li chúng ta có thẻ  p với một id (nếu là thuộc tính id thì ta dùng #, nếu thuộc tính là class thì ta dùng . )

$ là một ký tự cụ thể nó một biến kiểu số, sẽ được tăng bởi mỗi item

Dấu ngoặc nhọn {} đại diện cho văn bản

OK, tôi cảm thấy rằng bạn muốn thêm một ví dụ nữa.

Bạn gõ với lệnh:

html:5 [tab]

Tôi hy vọng bạn đã có thể hiểu được cách Emmet làm việc

Vì đây là bài viết với mục đích cho bạn biết về Emmet. Chúng tôi sẽ không đi sâu hơn

Bạn có thể tham khảo thêm ở đây  official documenation  bất cứ khi nào bạn cần

CSS

Emmet cũng cho phép bạn viết CSS nhanh hơn, Tôi thấy nó rất tiện lợi và dễ học

Nó định nghĩa nhiều từ viết tắt cho thuộc tính của CSS

Tôi không thể liệt kê ra hết ở đây nhưng tôi có thể show cho bạn một số ví dụ khi dùng Emmet

Bạn sẽ học được chúng dễ dàng qua tập luyện và khám phá chúng bởi chính bạn css-abbreviations

Fuzzy search

Emmet thực sự thông mình và một tinh năng hay của nó là fuzzy search

.Cái này được sử dụng khi chúng ta không biết viết tắt. Emmet sẽ thử tìm đoạn code định nghĩa gần nhất và lấy nó

Ví dụ

Bạn có thể gõ tắt cái gì bạn muốn không nhất thiết theo quy ước Emmet sẽ sử dụng fuzzy search để tìm fl:r và lấy nó

Công cụ coding hỗ trợ Emmet

Emmet là tính năng thông dụng và thông minh vì vậy mà nó không thể thiếu trong các công cụ lập trình hiện nay như PHPStorm, Webstorm, NetBeans, Eclipse, Notepad++ ,Sublime text, Brackets, Atom, ….

Kết luận

Trên đây là bài giới thiệu về Emmet. Tôi hy vọng bạn sẽ luôn luôn sử dụng nó trong công việc để cải thiện tốc độ viết code của bạn

Đây có lẽ là món quà cho bạn qua đó bạn sẽ nhìn được cách sử dụng nó một cách nhanh nhất và những cú pháp phổ biến nhất. cheat-sheet. Bạn sẽ không thất vọng

Tags:

9 Bình luận

  1. You have observed very interesting details! ps decent internet site. 🙂

    Trả lời
  2. I went over this site and I think you have a lot of good information, saved to fav 🙂

    Trả lời
  3. Like 16/10/2018

    Like!! Really appreciate you sharing this blog post.Really thank you! Keep writing.

    Trả lời
  4. ผู้นำด้านที่ปรึกษาการตลาดออนไลน์ของไทย เพิ่มไลค์ ปั้มไลค์แฟนเพจ รับเพิ่มไลค์แฟนเพจ เพิ่มยอดไลค์ ปั้มไลค์ ปั้มไลค์คนไทย

    Trả lời
  5. ซื้อไลค์แฟนเพจ, รับเพิ่มไลค์, บริการปั้มไลค์เพจ, ซื้อไลค์คนไทยราคาถูก, รับกดไลค์แฟนเพจ

    Trả lời
  6. ปั้มไลค์เพจ, เพิ่มไลค์แฟนเพจ, ปั๊มไลค์แฟนเพจ, ปั๊มไลค์เพจ facebook, ไลค์เพจ, ปั้มไลค์แฟนเพจ, เพิ่มไลค์เพจ, ปั๊มไลค์เพจ, ปั๊มไลค์เพจ, ปั้มเพจ, เพิ่มไลค์เพจ ราคาถูก

    Trả lời
  7. ปั้มไลค์, ออโต้ไลค์, Auto Like, แฮกไลค์, เว็บปั้มไลค์, ระบบเพิ่มไลค์, ปั้มไลค์คอมเม้น, ปั้มไลค์แฟนเพจ, Hack Like Facebook, ปั้มไลค์รูปภาพ

    Trả lời
  8. BotLike 09/10/2018

    Auto Like, Photo Liker, auto liker, Auto Liker, Facebook Autoliker, Photo Auto Liker, auto like, Autoliker, Status Liker, facebook auto liker, autolike, Fb Autoliker, Increase Facebook Likes, Autoliker Facebook, Facebook Auto Liker, Status Auto Liker, Facebook Liker, Working Auto Liker, Autoliker, autoliker

    Trả lời
  9. รับทำไลค์แฟนเพจจำนวนมาก, ปั้มยอดไลค์เป็นคนไทย 100%, ปั้มไลค์ฟรี, ปั้มไลค์ทั่วไป, รับปั้มไลค์เพจ, Like Fanpage, ไลค์เพจ, รับไลค์แฟนเพจ, จ้างเพิ่มไลค์, ปั้มไลค์รูป Facebook, ปั้มโพสต์, Add Like Fanpage, ปั้มเพจ, เพิ่ม Like, ปั้มไลค์มือถือ, เพิ่มไลค์ฟรี, รับไลค์ครบวงจรทั่วไทย, ไลค์คนไทย 100%, จ้างไลค์, กดไลค์แฟนเพจ, กดไลค์รูป, ปั้มรูป, ซื้อไลค์แฟนเพจ, ปั้ม Like ฟรี, เพิ่มไลค์แฟนเพจ ราคาถูก, ปั้มไลค์เพจคนไทย, บริการเพิ่มไลค์เฟสบุ๊คให้แฟนเพจ, ปั้มไลค์ครบวงจร, ปั้มไลค์แฟนเพจ, จ้างกดไลค์, รับสร้างแฟนเพจพร้อมยอดไลค์, รับทำเพจสินค้าพร้อมยอดไลค์, จ้างปั้มไลค์, บริการปั้มไลค์ฟรี, ปั้มไลค์, ปั้มไลค์ Facebook, รับเพิ่มไลค์แฟนเพจเฟสบุ๊ค, รับจ้างปั้มไลค์, ปั้มเพจเฟสบุ๊ค, รับเพิ่มไลค์แฟนเพจ เป็นการโปรโมทแฟนเพจ เพื่อเพิ่มยอดขายสินค้าได้, ไลค์แฟนเพจเฟสบุ๊ค, ปั้มไลค์เพจ Facebook, เพิ่มไลค์แฟนเพจ, Up Like Fanpage, ปั้มไลค์รูปเฟส, กดไลค์, รับจ้างกดไลค์, เพิ่มไลค์คนไทย, ปั้มไลค์เฟสบุ๊ค, รับเพิ่มไลค์, ปั้มไลค์เพจฟรี, ปั้มเพจ เหมาะสำหรับผู้ที่ต้องการยอดไลค์เพจเพจเยอะๆ, ปั้มไลค์ ในโทรศัพท์, รับจ้างเพิ่มไลค์, ปั้มไลค์เพจ, ไลค์แฟนเพจ, ไลค์แฟนเพจราคาถูก, ไลค์แฟนเพจได้สูงสุดหนึ่งล้านไลค์, บริการเพิ่มไลค์แฟนเพจฟรี, รับปั้มไลค์รูป, บริการเพิ่ม Like ให้แฟนเพจของคุณ โดยทีมงานระดับมืออาชีพ ในระยะเวลาอันสั้นและราคาถูก รับประกันไลค์จากคนไทย 100%, รับเพิ่ม Like Fanpage Facebook ราคาพิเศษ เหมาะสำหรับผู้ที่ต้องการเพิ่ม Like Fanpage ให้ดูเป็นความน่าเชื่อถือของร้าน, บริการปั้มไลค์แฟนเพจฟรี, ปั้มไลค์ราคาถูก, ปั้มไลค์รูป, เพิ่มไลค์, ปั้มไลค์สถานะ, ปั่นไลค์, Auto Like, รับทำไลค์ครบวงจร, รับ Like Fanpage, Pump Like, กด Like, เพิ่มไลค์เพจ ราคาถูก, จ้างไลค์รูป, เพิ่มไลค์เพจ, การเพิ่ม Like เป็นการเพิ่มโอกาสทางการขายสินค้าของคุณนั่นเอง ด้วยงานบริการเพิ่มไลค์แฟนเพจระดับมืออาชีพ ประสบการณ์การทำงานหลายปี, แฟนเพจพร้อมยอดไลค์, โกงไลค์, รับทำเพจเฟสบุ๊ค, ปั้มไลค์ง่ายๆ

    Trả lời

Thêm một comment

Địa chỉ Email của bạn sẽ không hiển thị. Yêu cầu nhập các trường có dấu *

*
* *