Để thêm thẻ chú thích, hãy chỉ lựa chọn -a trong thẻ lệnh rồi thực hiện. Khi thực hiện xong, trình soạn thảo sẽ khởi động nên hãy nhập bình luận sẽ thiết lập trong thẻ
Cũng có thể chỉ định lựa chọn -am nếu muốn vừa tạo thẻ vừa thêm bình luận
$ git tag -a
Để gắn thẻ chú thích có tên là chuối trong cam kết mà HEAD hiện chỉ đến, thì hãy thực hiện lệnh bên dưới
Emmet là một trong những tính năng được tích hợp sẵn sở thích của mình với trình soạn thảo văn bản VS Code, và nó cũng là tiện ích mở rộng có sẵn trên các trình soạn thảo mã nền tảng khác. Với Emmet, bạn có thể tăng tốc độ làm việc của HTML & CSS, thậm chí còn bị coi là cheat-codeBỏ túi Cheatsheet React cho năm 2022 [kèm ví dụ thực tế]
Tất tần tật các bảng tính Frontend tốt nhất
Sử dụng Emmet trong HTML
Với Emmet, việc tạo một bản soạn sẵn HTML diễn ra trong nháy mắt. Với tệp HTML, chỉ cần gõ
20 bạn sẽ thấy Emmet hiển thị các gợi ý, sau đó chỉ việc
21 đã có sẵn trang HTML trống cơ bản. Đây mình mới chỉ đang demo khả năng vài tính năng của VS Code và Emmet nên nếu chưa hiểu thì không sao, cứ đọc tiếp nhé
Xem thêm Tạo React Boilerplate – Từ a tới z
Các thẻ cơ bản
Để tạo thẻ – thẻ HTML, chỉ cần nhập tên thẻ và
21. Emmet sẽ đặt con trỏ chuột trong thẻ đó, lúc này có thể tiếp tục gõ bên trong thẻ rồi
- Thử gõ
0 sau đó
21, hoặc
2, hoặc
3 - Ngoài ra thì còn có.
4 cho
5,
6 cho
7,
8 cho
9,
00 cho
01, và
02 cho phần
Các lớp học
Nếu bạn đã quen với CSS, Emmet cũng sử dụng cách tương tự, dấu. để tham khảo lớp học. Todefine class with the tag, only need more as this thế
03 —>
04
05 —>
06
ID
Làm với ID thì cũng tương tự
07 —>
08
Xây dựng jar thực thi bằng cách sử dụng Plugin Maven Shade
ghép chuỗi
Ghép 2 cái trên thì ta có
09 —>
00
Attributes – thuộc tính
Ta cũng có thể chỉ định thuộc tính cho thẻ
01 —>
02
Nội dung – nội dung
Để “bọc” nội dung trong thẻ, chỉ cần bỏ chúng giữa 2 dấu trích dẫn
03
04 —>
05
Tin tức CSS tháng 8 năm 2022 có gì mới
Anh chị em và con cái
Tương tự với anh chị em ruột và con cái thì dùng các ký tự dấu cộng
06 và dấu lớn hơn
07
08 —>
09
00 —>
01
Đang treo lên
Hình dung những gì đang xây dựng trong đầu vì lúc này bạn đang gõ tốc ký Emmet. Ví dụ này thì mình đang leo cây với
02
03Kết quả
4Ở đây mình muốn blockquote nó xuất hiện ngang hàng – cùng cấp với đoạn văn. Vì thế mới phải leo lên, nếu không thì blockquote sẽ chen vào trong đoạn văn
Nhóm
Nếu cấu trúc phức tạp thì bạn có thể nhóm thẻ – thẻ nhóm thay vì sử dụng leo lên. Ví dụ này mình tạo đầu trang và chân trang [không leo lên] sử dụng trích đơn
04 .
05Kết quả
Character and symbol $
Bạn có thể tạo thẻ theo cấp số nhân bằng [
06] và đánh số các mục theo thứ tự với ký hiệu đô la [
07]
08 —>
09
20 —>
21
Thậm chí bạn có thể tùy chỉnh luôn thứ tự đánh số bao gồm chữ số 0, bắt đầu với số xác định và có thể đảo ngược
Pad number 0.
22
Kết quả
0Bắt đầu bằng một số xác định.
23
Kết quả
0Island direction.
24
Kết quả
0Đảo hướng từ một số xác định.
25
Kết quả
2Hiểu về JavaScript bất đồng bộ - Vòng lặp sự kiện
Tag stop
Có một số thẻ tag không cần gõ ra mà có thể hiểu được
- Một lớp lúc đầu không có thẻ thì sẽ được hiểu là
26
27 —>
04- Lớp với thẻ nhấn mạnh sẽ được hiểu là
29
60 —>
61- Lớp xác định bên trong danh sách sẽ được hiểu là mục danh sách
62 —>
63- Lớp xác định trong bảng được hiểu là
64 còn trong hàng thì là
65
66 —>
67Thẻ “Kẹp”
Có lúc bạn muốn kết nối thẻ tag vào các đoạn mã có sẵn, Emmet có thể dễ dàng thực hiện việc này. Đầu tiên, đánh dấu đoạn mã bạn cần thêm thẻ và mở bảng lệnh [
68] lên, tìm kiếm
69. Sau đó sẽ có hộp thoại để nhập phần tử vào
200 —>
201Ngoài cách này, bạn cũng có thể sử dụng cú pháp Emmet tiêu chuẩn trong hộp thoại này, ngắt đoạn văn bản với
202. Chức năng này không được gán vào phím tắt. Nên nếu bạn sử dụng tính năng này thường xuyên thì nên thêm phím tắt cho nó
Lorem Ipsum
“Lorem Ipsum” là đoạn văn bản giả mạo biến rất phổ biến được sử dụng để hiển thị các giá trị dữ liệu ngẫu nhiên trên trang. Chỉ cần nhập và
203 nhấn
21. Emmet sẽ tạo ra 30 từ ngẫu nhiên có thể sử dụng để dàn nội dung trong dự án
You can also select the number of the character theo nhu cầu
205 sẽ cho bạn 10 từ ngẫu nhiên
Gop chung lại
Attempt to the general section at on back.
206
Kết quả
6Dùng Emmet trong CSS
Với CSS, thì Emmet có từng cái viết tắt cho từng thuộc tính, mình sẽ không liệt kê chúng ra hết mà sẽ đưa ra những trường hợp được sử dụng nhiều nhất. Bạn có thể xem danh sách đầy đủ tại đây
Tìm hiểu về thuộc tính Chế độ viết trong CSS
Chức vụ
207 —>
208 [mặc định là họ hàng]
209 —>
210
211 —>
212
213 —>
208
215 —>
216
Xem thêm Tất tần tật về vị trí thuộc tính trong CSS
Shows
217 —>
218 [default block]
219 —>
210
211 —>
218
213 —>
214
215 —>
216
217 —>
218
219 —>
00
con trỏ
01 —>
02
Color
03 —>
04
05 —>
06
07 —>
08
09 —>
10
Đệm lề. pad lề
11 —>
12
13 —>
14
15 —>
16
17 —>
18
19 —>
20
21 —>
22
23 —>
24
25 —>
26
27 —>
28
29 —>
30
31 —>
32
Kích thước hộp
33 —>
34
Xem thêm CSS Box Model – Các cách hiển thị phần tử với thuộc tính hiển thị
Chiều rộng
35 —>
36
37 —>
38
39 —>
40
41 —>
42
43 —>
44
45 —>
46
Canh lề
47 —>
48
49 —>
50
51 —>
52
Kết luận
Với Emmet, bạn có thể tạo nên cấu trúc HTML phức tạp chỉ với một dòng, với CSS cũng làm được những điều kiện tương tự. Tóm lại, Emmet khá đỉnh, sử dụng Emmet có thể giúp nâng cao hiệu suất và tốc độ viết HTML và CSS