Emmet trong Mã Visual Studio. Emmet là một tính năng tích hợp trong Visual Studio Code. Bạn không phải cài đặt bất kỳ tiện ích mở rộng nào để được hỗ trợ emmet. Emmet ngăn bạn tự viết toàn bộ mã bằng cách cung cấp chữ viết tắt Emmet. Emmet được bật theo mặc định trong các tệp html, haml, pug, slim, jsx, xml, xsl, css, scss, sass, less và stylus, cũng như trong các ngôn ngữ kế thừa từ bất kỳ ngôn ngữ nào ở trên như tay lái và PHP
https. //phương tiện truyền thông. chuyên viên máy tính. org/wp-content/uploads/20200813112257/GeekForGeek. css---GeekForGeeks---Visual-Studio-Code-2020-08-13-11-19-12. mp4
Nếu bạn sử dụng phương pháp gõ từng dòng truyền thống, ngay cả khi trình soạn thảo hoàn thành thông minh, nó vẫn sẽ rất chậm
Nếu chúng ta sử dụng Emmet, chúng ta có thể hoàn thành việc gõ rất nhanh
Như được hiển thị trong GIF ở trên, Emmet là một plug-in trình chỉnh sửa cung cấp các quy tắc cú pháp để hoàn thành mã thông minh. Nó cho phép chúng ta viết mã HTML và CSS một cách nhanh chóng
Chúng tôi biết rằng HTML có rất nhiều ký tự rập khuôn, lặp đi lặp lại và Emmet tồn tại để giúp chúng tôi loại bỏ mã dư thừa đó
Cài đặtHiện tại các trình soạn thảo code phổ biến như VSCode, WebStorm đều đã cài đặt sẵn plugin Emmet. Bạn không cần tải xuống plugin Emmet, bạn có thể sử dụng nó trực tiếp
Tất cả các GIF sau đều được ghi trong VSCode, nhưng các quy tắc là chung và bạn có thể sử dụng thủ thuật tương tự trong các trình chỉnh sửa khác
Tạo mẫu HTML
Chúng tôi biết rằng mọi tệp HTML5 phải có một khung cố định, đại loại như thế này
Document
Sau khi sử dụng Emmet, bạn không cần phải nhập các ký tự này theo cách thủ công, bạn chỉ cần nhập
Document
0 vào tệp HTML và VSCode sẽ nhắc bạn có sử dụng quy tắc Emmet để hoàn thành tự động hay khôngQui định
GIF
Nhập một thẻ
Trong HTML, các thẻ sẽ trông như thế này
Trong loại thẻ này, ngoại trừ
Document
0 và
Document
1 là nội dung cốt lõi, các ký hiệu khác [chẳng hạn như
Document
2 ,
Document
3 ] là ký tự phụ của khuôn mẫuVới Emmet, chúng ta không cần gõ những ký tự thừa này
Ngoài ra, bạn có thể sử dụng chữ viết tắt cho các thẻ dài hơn như tiêu đề hoặc blockquote
hdr ==> header
bq ==> blockquote
Nhập thẻ với lớpChúng tôi biết rằng một thẻ HTML thường có các kiểu CSS. Khi sử dụng Emmet ta chỉ cần thêm tên Class vào sau tên tag là nó sẽ tự động thêm vào
Quy tắc
div.container ==> span.red ==> div.row.blue ==>
GIF
Nhập một Thẻ có ID
Qui định
________số 8GIF
Nhập một thẻ có nội dung
Nếu chúng tôi muốn thêm một số nội dung vào thẻ, chúng tôi có thể sử dụng cú pháp
Document
4Qui định
GIF
Nhập nhiều thẻ
Emmet hỗ trợ các hoạt động bổ sung. Nếu chúng tôi sử dụng
Document
5, chúng tôi có thể nhập nhiều thẻ cùng một lúcQui định
GIF
Nhập thẻ làm tổ
Trong CSS, ký hiệu cho bộ kết hợp con là
Document
3 và bạn cũng có thể sử dụng ký hiệu này trong Emmet để nhập các thẻ lồng nhauQui định
Document
7 =>3
GIF
Khi nhập các thẻ lồng nhau, chúng ta cũng có thể nhập cùng với lớp và nội dung
Qui định
Kết quả
GIF
Trèo lên
Giả sử chúng ta muốn sử dụng Emmet để nhập văn bản đó cùng một lúc, thì chúng ta phải làm gì?
4
Điểm khó chịu nhất của văn bản trên là thẻ p có cả thẻ phụ và thẻ phụ. Chỉ sử dụng
Document
3 và
Document
5 mà chúng tôi đã đề cập trước đó không thể nhập tất cả văn bản cùng một lúcNhầm đường
Vấn đề với cách viết ở trên là khi chúng ta nhập
0, nó thực sự tạo ra một thẻ ở cùng cấp độ với
1. Nếu chúng ta muốn tạo một thẻ cùng cấp với
Document
1, chúng ta có thể sử dụng ký hiệu 3. Biểu tượng này là để làm cho thẻ leo lên một cấp độ cao hơn
Qui định
Kết quả
GIF
Nếu muốn
4 và
5 song song thì ta chỉ cần dùng 2 lần
3 nghĩa là leo tag lên 2 bậc
Qui định
GIF
Phép nhân
Nhiều thẻ cần được lặp lại nhiều lần, chẳng hạn như
7. Để thuận tiện cho việc nhập các thẻ này theo lô, Emmet cho phép chúng tôi sử dụng phép nhân
Qui định
8 có nghĩa là phép nhân và
9 có nghĩa là thẻ trước đó xuất hiện ba lần
Kết quả
GIF
GIF2
đánh số $
Khi sử dụng phép nhân để tạo thẻ theo lô, chúng tôi có thể cần sử dụng số. Ví dụ
Document
7Vì vậy, làm thế nào để chúng tôi nhập vào ở trên?
Một biểu tượng đặc biệt được cung cấp trong Emmet. $. Biểu tượng này đại diện cho một biến đặc biệt, giá trị ban đầu mặc định của nó là 1 và nó sẽ tự động tăng lên sau mỗi lần xuất hiện
Qui định
Kết quả
GIF
GIF2
chữ số
Nếu bạn muốn sử dụng số có ba chữ số, bạn chỉ cần sử dụng ký hiệu $ ba lần
Qui định
Kết quả
GIF
Giá trị ban đầu
Nếu bạn muốn đặt giá trị ban đầu của
hdr ==> header
bq ==> blockquote
0 thành giá trị khác, bạn có thể sử dụng ký hiệu hdr ==> header
bq ==> blockquote
1Qui định
Kết quả
GIF
Lorem
Khi chúng tôi viết mã, chúng tôi thường cần điền vào một số chuỗi vô nghĩa để kiểm tra hiệu ứng hiển thị của các trang HTML của chúng tôi. Trước đây bạn có sử dụng bàn phím để nhập các ký tự ngẫu nhiên không?
Emmet cung cấp cho chúng ta một lệnh đặc biệt có thể nhanh chóng tạo ra một loạt các chuỗi vô nghĩa
Qui định
Kết quả
GIF
GIF2
Đây là cách sử dụng cơ bản của Emmet, hi vọng sẽ giúp ích được cho các bạn. Nếu bạn nghĩ rằng những GIF này đã giúp ích cho bạn, vui lòng cho tôi biết và tôi sẽ tiếp tục tạo các bài viết cùng loại