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

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

Hiệp Quốc
Hiệp Quốc 4 tuần 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:

Leave a Reply

Hãy trở thành người đầu tiên comment!

avatar