hướng dẫn sử dụng extension emmet toàn tập

Hướng dẫn sử dụng extension Emmet toàn tập10 phút đọc

Một ngày của lập trình viên sẽ phải gõ rất nhiều chữ phải không nào ? Mình đã tính thử một ngày khi sử dụng extension emmet này mình sẽ tiết kiệm được 1300 lần gõ chữ.

Nghe vậy thôi bạn cũng thấy mình tiết tiệm được rất nhiều thời gian.Không chỉ vậy mà số lượng chữ gõ sai cũng cực kì ít và tay cũng đỡ mỏi đi rất nhiều.

Đây là một trong những extension bắt buộc phải cài đặt và sử dụng thành thạo khi bạn theo nghiệp lập trình.Mình sẽ tổng kết cách viết tắt những thuộc tính mình hay sử dụng ở cuối bài để bạn tham khảo.

Còn bây giờ thì chúng ta cùng đi tìm hiểu cách sử dụng extension emmet này nhé.

Sử dụng extension Emmet viết nhanh HTML

Khi đọc bài viết này tốt nhất bạn nên ngồi cạnh máy tính mở trình soạn thảo lên và lập một file ví dụ index.html rồi thực hành ngay những gì bạn hiểu.

Viết nhanh yếu tố bất kì : tên yếu tố + Tab

Kĩ thuật sử dụng extension Emmet số 1

Ví dụ đơn giản như bạn muốn thêm một yếu tố như <div> chẳng hạn thì thay vì phải gõ cả thẻ mở <div> lẫn thẻ đóng </div> thì giờ bạn chỉ việc nhập chữ div rồi nhấn nút Tab là bạn sẽ có một yếu tố hoàn chỉnh.

Cách này áp dụng tương tự với tất cả các yếu tố còn lại của HTML.Bạn chú ý không gõ sai tên yếu tố là được.

hướng dẫn sử dụng extension emmet ví dụ ảnh 1

Tạo yếu tố mẹ con : tên yếu tố > tên yếu tố

Kĩ thuật sử dụng extension Emmet số 2

Khi bạn muốn tạo cấu trúc phân tầng theo kiểu mẹ con thì cách viết này sẽ giúp bạn hoàn thành công việc đó chỉ trong nháy mắt.

Ví dụ bạn muốn tạo yếu tố li trong yếu tố ul thì bạn chỉ việc viết đơn giản như sau ul>li  và nhấn Tab là bạn sẽ có ngay yếu tố li nằm trong yếu tố ul.

hướng dẫn sử dụng extension emmet ví dụ ảnh 2

Giờ bạn hãy thử tạo yếu tố h1 trong yếu tố div bằng cách gõ div>h1 xem kết quả có tương tự như với yếu tố ulli trong ví dụ trên của mình không nhé.

Tạo nhiều yếu tố giống nhau : tên yếu tố * số lượng

Kĩ thuật sử dụng extension Emmet số 3

Đây là trường hợp bạn gặp rất nhiều trong thực tế hàng ngày do đó bạn nên nhớ và sử dụng thành thạo ngay bây giờ.

Ví dụ mình muốn tạo 3 yếu tố li trong yếu tố ul, kết hợp với ví dụ trên ta có cách viết như sau : ul>li*3

hướng dẫn sử dụng extension emmet ví dụ ảnh 3

Bạn thấy không hề khó phải không nào.Bạn thử tạo thêm 5 yếu tố p bên trong yếu tố div xem có thành  công không.

Tạo yếu tố cùng cấp : tên yếu tố + tên yếu tố

Kĩ thuật sử dụng extension Emmet số 4

Trường hợp này cũng rất hay gặp khi soạn thảo code hàng ngày.Khi bạn gõ tên yếu tố + tên yếu tố thì sẽ tạo ra hai yếu tố có cùng cấp độ.

Ví dụ như mình tạo cần tạo ra hai yếu tố dtdd có cùng cấp độ nằm trong yếu tố dl thì cách viết sẽ là : dl>dt+dd

hướng dẫn sử dụng extension emmet ví dụ ảnh 4

Thực hành luôn nhé.Bạn tạo cho mình hai yếu tố h1 và p cùng cấp nằm trong yếu tố div thử xem.

Kết hợp các cách viết trên

Để tiết kiệm được nhiều thời gian và công sức bạn nên áp dụng tất cả các cách trên lại với nhau.

Ví dụ mình muốn tạo 3 cặp yếu tố cùng cấp dtdd, tất cả chúng nằm trong yếu tố dl.

Với cách viết thông thường thì khá tốn thời gian nhưng với emmet thì chỉ bằng một dòng đơn giản sau : dl>(dt+dd)*3

hướng dẫn sử dụng extension emmet ví dụ ảnh 5

Đến đây đã bắt đầu phức tạp hơn nên bạn hãy suy nghĩ lại những ví dụ trên kèm theo ý nghĩa của các kí tự như : [ >, + , * ].

Sau khi hiểu hết thì bạn hãy thử giải bài này xem.Bạn hãy tạo ra 4 cặp yếu tố cùng cấp h3 p, chúng đều nằm trong yếu tố mẹ là div.

Viết nhanh Class và ID : .tên class , #tên id

Kĩ thuật sử dụng extension Emmet số 5

Có thể nói kĩ năng viết nhanh class và id này mình hay bất cứ lập trình viên nào cũng dùng như cơm bữa vậy.

Chỉ với một tên yếu tố kèm kí tự đơn giản và tên class/id là bạn đã có một yếu tố kèm theo class/id.

Ví dụ như bạn muốn tạo yếu tố div với tên classdemo-classiddemo-id thì cách viết như sau : div.demo-class#demo-id.

Bạn có thể thấy dấu [ . ] đại diện cho class và dấu [ # ] đại diện cho ID.

hướng dẫn sử dụng extension emmet ví dụ ảnh 6

Bạn đã biết cách kết hợp cách viết nhanh ở ví dụ trong phần trên.Giờ chúng ta kết hợp với ví dụ trong phần này xem có thể làm gì nhé.

Bạn chú ý chỉ riêng với yếu tố div ta mới có thể lược bỏ tên yếu tố trước dấu [ . ] [ # ] mà thôi.Còn khi thêm class hay id cho yếu tố khác bạn cần thêm tên yếu tố ở đầu.

Ví dụ khi thêm class có tên box cho yếu tố span thì ta viết như sau : span.box

Bạn hãy tạo ra một yếu tố div với idmain và trong đó có thêm yếu tố div với classcontainer.Tiếp theo trong yếu tố div với classcontainer bạn tiếp tục tạo ra một yếu tố h1, một yếu tố h2 và 5 yếu tố p.

Tất cả yếu tố h1, h2, p này đều cùng cấp độ với nhau.Bạn giải rồi xem kết quả trong hình dưới đây.

hướng dẫn sử dụng extension emmet ví dụ ảnh 7

Thêm text mẫu : lorem và số lượng chữ

Kĩ thuật sử dụng extension Emmet số 6

Thêm đoạn text mẫu vào code đã trở nên quen thuộc với nhiều lập trình viên hiện nay.Emmet cũng hỗ trợ thêm đoạn text lorem ipsum vào ngay bài viết với thao tác vô cùng đơn giản.

Bạn gõ chữ lorem rồi thêm số lượng chữ ngay sau nó là được.Ví dụ mình thêm một đoạn text lorem ipsum gồm 10 kí tự vào thẻ p thì sẽ viết như sau : p>lorem10

Bạn thay tên yếu tố và số lượng chữ muốn thêm vào để phù hợp với dự án của bạn là ok.

hướng dẫn sử dụng extension emmet ví dụ ảnh 8

Viết nội dung trên nhiều dòng một lúc

Kĩ thuật sử dụng extension Emmet số 7

Trong một tài liệu HTML rất nhiều vị trí có nội dung và cấu trúc giống nhau.Do đó chúng ta có thể nhập nội dung cho chúng cùng một lúc bằng cách sử dụng extension emmet.

hướng dẫn sử dụng extension emmet viết trên nhiều dòng

Bạn đặt con trỏ chuột tại vị trí bạn muốn nhập nội dung bất kì, sau đó bạn giữ phím Control (Window) / Command (Mac) rồi tiếp tục nhấn chuột trái tại các vị trí khác mà bạn muốn nhập nội dung tương tự.

Dấu nháy chuột hiện lên bạn là bạn có thể nhập nội dung hay xóa nội dung cùng lúc một cách dễ dàng.

Chỉ định nội dung : [nội dung thuộc tính] , {nội dung yếu tố}

Thay vì lấy nội dung mẫu như kiểu lorem ipsum thì bạn có thể chỉ định luôn nội dung sẽ được nhập vào thuộc tính hoặc yếu tố.

Để nhập nội dung cho một yếu tố bất kì như yếu tố h1, h2,p,a…vv thì bên cạnh tên yếu tố bạn gõ {nội dung cần chỉ định} là ok.

Còn để nhập nội dung cho thuộc tính bên trong yếu tố thì bạn phải gõ [nội dung chỉ định] bên cạnh tên yếu tố.

hướng dẫn sử dụng extension emmet chỉ định nội dung

Như ví dụ ảnh trên mình đã nhập nội dung cho yếu tố a là Xin chào ! và nội dung cho thuộc tính bên trong yếu tố a là đường dẫn đến blog của mình.

Sử dụng extension Emmet viết nhanh CSS

Extension cũng hỗ trợ bạn trong việc viết nhanh CSS nhưng ít blog ở Việt Nam nói đến chức năng này.

Cách viết cơ bản áp dụng cho CSS như sau : Chữ cái viết tắt tên thuộc tính + Tab

Dưới đây là một số ví dụ về cách viết nhanh CSS khi sử dụng extension Emmet :

  • bg#000 rồi nhấn nút Tab、kết quả là background: #000000;
  • c#fff rồi nhấn nút Tab、kết quả là  color: #ffffff;
  • fz16 rồi nhấn nút Tab、kết quả là  font-size: 16px;
  • dib rồi nhấn nút Tab、kết quả là  display: inline-block;
  • mb32 rồi nhấn nút Tab、kết quả là  margin-bottom: 32px;
  • p8-12-8-12 rồi nhấn nút Tab、kết quả là  padding: 8px 12px 8px 12px;

Tổng hợp những cách viết nhanh HTML thông dụng

  • html:5 – tạo ra những cấu trúc cơ bản của một tài liệu HTML5 cơ bản
  • div#idname – tạo ra một yếu tố div với id là idname
  • div.classname – tạo ra một yếu tố div với class là classname
  • ul>li*3>a – tạo ra một list với đường link trong đó, thường dùng để tạo menu
  • table>tr*3>th+td – tạo ra một bảng với đầy đủ thành phần cơ bản
  • dl>(dt+dd)*2 – tạo ra một danh sách để định nghĩa một thứ gì đó

Tổng hợp những cách viết nhanh CSS thông dụng

  • dib – kết quả triển khai là  display: inline-block;
  • bg#000 – kết quả triển khai là  background: #000000;
  • c#000 –  kết quả triển khai là color: #000000;
  • fz16 – kết quả triển khai là font-size: 16px;
  • w150 – kết quả triển khai là width: 150px;
  • p10 – kết quả triển khai là padding: 10px;
  • mb1e – kết quả triển khai là margin-bottom: 1em;
  • p8-12-8-12 – kết quả triển khai là padding: 8px 12px 8px 12px;
  • bd+ – kết quả triển khai là border: 1px solid #000;
  • bsh0-0-3-0#000 – kết quả triển khai là box-shadow: 0 0 3px 0 #000000;
  • bdrs4 – kết quả triển khai là border-radius: 4px;
  • psr – kết quả triển khai là position: relative;
  • psa – kết quả triển khai là position: absolute;
  • tac – kết quả triển khai là text-align: center;
  • tf – kết quả triển khai là transform:
  • trs – kết quả triển khai là transition:

Tạm kết

Như vậy là mình đã giới thiệu với các bạn rất chi tiết cách sử dụng extension emmet.Để thành thạo cách viết nhanh HTML và CSS bạn nên thường xuyên luyện tập nếu có thời gian.

Thời gian đầu có lẽ hơi chậm nhưng dần dần khi quen rồi bạn sẽ tiết kiệm được rất nhiều thời gian cũng như công sức soạn thảo code.

Đến lượt bạn

Để nhanh chóng thành thạo và nắm vững các kiến thức trong bài viết bạn nên thực hành ngay khi có thời gian rảnh.Bạn có thể tham khảo gợi ý dưới đây.

  • Đọc đến đâu thực hành đến đó và làm hết các bài tập kèm theo
  • Tự nghĩ ra những ví dụ mới để thực hành
  • Thử kết hợp những cách viết nhanh lại với nhau để tạo ra một tài liệu HTML hoàn chỉnh
  • Tổng kết lại những cách sử dụng extension Emmet thông dụng
Nếu bạn thấy bài viết này hay và có ích thì bạn có thể ủng hộ blog của mình bằng một trong số những cách sau để mình có thêm động lực xuất bản nhiều bài viết mới chất lượng hơn nữa.

Chia sẻ bài viết này lên mạng xã hội qua các nút bên dưới đây.
Thả tim ở ngay cuối cùng bài viết này.
Đăng kí nhận thông báo bài viết mới bằng cách nhấn vào chuông đỏ góc dưới cùng bên trái.
Đánh giá chất lượng bài viết bằng sao ở trên cùng bài viết này.
Chia sẻ ý tưởng về bài viết bạn mong muốn tại phần chatbot góc dưới cùng bên phải.

Tìm kiếm bài viết trên blog với Google Search :

Bài viết có thể bạn sẽ thích

guest
0 Comments
Inline Feedbacks
View all comments
0
Hãy cùng thảo luận về bài viếtx
()
x