Sử dụng Emmet để cải thiện quy trình làm việc bằng cách tăng tốc mã hóa và chỉnh sửa trong các tệp [X]HTML, CSS, XML, XSL và JSP. Emmet tăng tốc độ mã hóa bằng cách chuyển đổi các từ viết tắt thành các khối mã có cấu trúc và cải thiện việc chỉnh sửa với điều hướng và lựa chọn mã tốt hơn.
Tính năng này có trong MyEclipse, CodeMix và Angular IDE
MyEclipse
Java EE IDE cho nhà phát triển ngăn xếp đầy đủ
CodeMix
Plugin Eclipse cho nhà phát triển web hiện đại
IDE góc cạnh
IDE độc lập cho nhà phát triển góc
Sử dụng Emmet
Để truy cập các lệnh Emmet, nhấp chuột phải vào trình chỉnh sửa, chọn Emmet rồi chọn một lệnh Emmet. Hoặc, sử dụng phím tắt được gán cho lệnh Emmet. Nếu bạn thích các phím tắt khác nhau, bạn có tùy chọn chỉnh sửa các tổ hợp phím trong Window>Preferences>General> Keys
Sign Up
Ghi chú. Truy cập tài liệu Emmet để tìm hiểu cách sử dụng cú pháp viết tắt
Nếu chúng tôi cần viết tắt cụ thể này thường xuyên, chúng tôi có thể lưu nó dưới dạng một đoạn trích để cải thiện quy trình làm việc của mình hơn nữa
{
"html": {
"snippets": {
"signup": "p>a{Sign Up}"
}
}
}
Bây giờ chúng ta có thể gõ
{
"html": {
"snippets": {
"img:l": "img[width height loading='lazy']"
}
}
}
Emmet đi kèm với một loạt các đoạn mã HTML theo mặc định. Ví dụ:
{
"html": {
"snippets": {
"img:l": "img[width height loading='lazy']"
}
}
}
Điều đó thật tuyệt, nhưng nếu chúng tôi muốn điều chỉnh đoạn mã này bằng cách xóa hoặc thêm các thành phần và thuộc tính, chúng tôi phải ghi đè lên đoạn mã đó và tạo đoạn mã của riêng mình
Tạo và ghi đè đoạn mã
Nếu chúng tôi muốn tạo đoạn mã Emmet của riêng mình hoặc ghi đè lên đoạn mã hiện có trong Mã VS, thì cần thực hiện các bước sau
- Tạo một đoạn trích. json, hãy thêm cấu trúc JSON cơ bản này và lưu nó ở đâu đó trên đĩa cứng của bạn
{ "html": { "snippets": { } }, "css": { "snippets": { } } } - Mở cài đặt Mã VS [Mã → Tùy chọn → Cài đặt] và tìm kiếm “Đường dẫn tiện ích mở rộng Emmet”
- Nhấp vào "Thêm mục", nhập đường dẫn đến thư mục mà bạn đã lưu các đoạn trích. json mà bạn đã tạo trước đó và nhấn “OK”
Đó là nó. Bây giờ chúng ta đã sẵn sàng để tạo các đoạn trích bằng cách thêm các thuộc tính vào các đối tượng
{
"html": {
"snippets": {
"img:l": "img[width height loading='lazy']"
}
}
}
Một số đoạn mã HTML tùy chỉnh của tôi
Trước khi chúng ta đi sâu vào việc tạo đoạn trích và tôi sẽ chỉ cho bạn cách tôi tạo một đoạn mã cho bản tóm tắt HTML của mình, trước tiên chúng ta hãy làm nóng với một số đoạn mã nhỏ nhưng hữu ích mà tôi đã tạo.
tải chậm
Ra khỏi hộp, có một chữ viết tắt
{
"html": {
"snippets": {
"img:l": "img[width height loading='lazy']"
}
}
}
Trang
Hầu hết các trang tôi tạo bao gồm các mốc đánh dấu
"snippets": {
"page": "header>h1^main+footer{${0:©}}"
}
©
Chữ viết tắt đó khá dài, vì vậy hãy chia nhỏ nó thành các phần nhỏ hơn
Phá vỡ
Tạo phần tử
header>h1
Di chuyển lên, trở lại mức của
^main+footer
Đặt điểm dừng tab cuối cùng trong
"snippets": {
"page": "header>h1^main+footer{${0:©}}"
}
{
"html": {
"snippets": {
"signup": "p>a{Sign Up}"
}
}
}
dẫn đường
Chữ viết tắt
"snippets": {
"page": "header>h1^main+footer{${0:©}}"
}
"snippets": {
"page": "header>h1^main+footer{${0:©}}"
}
"snippets": {
"page": "header>h1^main+footer{${0:©}}"
}
©
©
©
"snippets": {
"page": "header>h1^main+footer{${0:©}}"
}
©
{
"html": {
"snippets": {
"signup": "p>a{Sign Up}"
}
}
}
Điều đó có vẻ hoang dã, vì vậy hãy phá vỡ nó một lần nữa
Phá vỡ
Chúng ta bắt đầu với một phần tử
"snippets": {
"page": "header>h1^main+footer{${0:©}}"
}
©
©
©
{
"html": {
"snippets": {
"signup": "p>a{Sign Up}"
}
}
}
Sau đó, chúng tôi tạo bốn mục danh sách với các liên kết lồng nhau. Mục đầu tiên đặc biệt vì nó đánh dấu trang đang hoạt động bằng cách sử dụng
header>h1
{
"html": {
"snippets": {
"signup": "p>a{Sign Up}"
}
}
}
Cuối cùng, chúng tôi thêm ba mục danh sách khác có liên kết và văn bản liên kết “Trang khác”
{
"html": {
"snippets": {
"signup": "p>a{Sign Up}"
}
}
}
Trước khi điều chỉnh, chúng tôi đã nhận được điều này
{
"html": {
"snippets": {
"signup": "p>a{Sign Up}"
}
}
}
Bây giờ chúng tôi nhận được điều này
{
"html": {
"snippets": {
"signup": "p>a{Sign Up}"
}
}
}
Thêm sau khi nhảy. Tiếp tục đọc bên dưới ↓
Gặp gỡ “TypeScript trong 50 bài học”, hướng dẫn mới tuyệt vời của chúng tôi về TypeScript. Với các hướng dẫn chi tiết về mã, các ví dụ thực hành và các vấn đề phổ biến — tất cả được chia thành các bài học ngắn, dễ quản lý. Đối với những nhà phát triển biết đủ JavaScript để trở nên nguy hiểm
Chuyển đến mục lục ↬Phong cách
Chữ viết tắt
header>h1
header>h1
header>h1
Hãy thêm một số quy tắc mặc định vào thẻ
header>h1
{
"html": {
"snippets": {
"signup": "p>a{Sign Up}"
}
}
}
Phá vỡ
Một số nhân vật [e. g.
header>h1
header>h1
header>h1
header>h1
header>h1
{
"html": {
"snippets": {
"signup": "p>a{Sign Up}"
}
}
}
^main+footer
^main+footer
header>h1
{
"html": {
"snippets": {
"signup": "p>a{Sign Up}"
}
}
}
- Trước.
3^main+footer - Sau đó
0Document
Được rồi, khởi động thế đủ rồi. Hãy tạo các đoạn mã phức tạp. Lúc đầu, tôi muốn tạo một đoạn mã duy nhất cho bản soạn sẵn của mình, nhưng tôi đã tạo ba từ viết tắt phục vụ các nhu cầu khác nhau
nồi hơi nhỏ
Đây là một bản soạn sẵn cho các bản trình diễn nhanh, nó tạo ra những điều sau đây
- Cấu trúc trang web cơ bản,
4 thẻ meta,^main+footer- Tiêu đề trang,
2 phần tử,header>h1- Một
8
Document
Phá vỡ
Một chuỗi với loại tài liệu
Document
Phần tử
^main+footer
^main+footer
^main+footer
Document
Bạn có thể thay đổi ngôn ngữ tự nhiên mặc định của trang bằng cách tìm kiếm “biến emmet” trong cài đặt Mã VS và thay đổi biến
^main+footer
{
"html": {
"snippets": {
"img:l": "img[width height loading='lazy']"
}
}
}
{
"html": {
"snippets": {
"signup": "p>a{Sign Up}"
}
}
}
^main+footer
{
"html": {
"snippets": {
"signup": "p>a{Sign Up}"
}
}
}
header>h1
{
"html": {
"snippets": {
"signup": "p>a{Sign Up}"
}
}
}
Document
Hãy có một cái nhìn nhanh đầu tiên về những gì điều này mang lại cho chúng ta
Document
Có vẻ ổn, nhưng chữ viết tắt
{
"html": {
"snippets": {
"signup": "p>a{Sign Up}"
}
}
}
{
"html": {
"snippets": {
"signup": "p>a{Sign Up}"
}
}
}
{
"html": {
"snippets": {
"signup": "p>a{Sign Up}"
}
}
}
^main+footer
Hãy ghi đè lên những đoạn trích này trước khi chúng ta tiếp tục
Document
Cuối cùng nhưng không kém phần quan trọng, phần tử
{
"html": {
"snippets": {
"signup": "p>a{Sign Up}"
}
}
}
Document
Bản mẫu cuối cùng
Document
Đối với tôi, đó là thiết lập sửa lỗi tối thiểu hoàn hảo
nồi hơi trung bình
Mặc dù tôi chỉ sử dụng bản soạn sẵn đầu tiên cho các bản trình diễn nhanh, nhưng bản soạn sẵn thứ hai có thể được sử dụng cho các trang phức tạp. Đoạn mã tạo ra như sau
- Cấu trúc trang web cơ bản,
4 thẻ meta,^main+footer- Tiêu đề trang,
14/_______5_______15 lớp,{ "html": { "snippets": { "signup": "p>a{Sign Up}" } } }- Màn hình bên ngoài và biểu định kiểu in,
- Thẻ meta
16 và{ "html": { "snippets": { "signup": "p>a{Sign Up}" } } }
17,{ "html": { "snippets": { "signup": "p>a{Sign Up}" } } } - cấu trúc trang
Document
Yeah, tôi biết, điều đó có vẻ vô nghĩa. Hãy mổ xẻ nó
Phá vỡ
{
"html": {
"snippets": {
"signup": "p>a{Sign Up}"
}
}
}
{
"html": {
"snippets": {
"signup": "p>a{Sign Up}"
}
}
}
^main+footer
{
"html": {
"snippets": {
}
},
"css": {
"snippets": {
}
}
}
Tiện ích TODO Highlight làm cho nhận xét thực sự nổi bật
{
"html": {
"snippets": {
"img:l": "img[width height loading='lazy']"
}
}
}
{
"html": {
"snippets": {
"signup": "p>a{Sign Up}"
}
}
}
^main+footer
{
"html": {
"snippets": {
"signup": "p>a{Sign Up}"
}
}
}
{
"html": {
"snippets": {
"signup": "p>a{Sign Up}"
}
}
}
{
"html": {
"snippets": {
}
},
"css": {
"snippets": {
}
}
}
Một tập lệnh có một dòng JavaScript. Tôi đang cắt mù tạt ở phần hỗ trợ mô-đun JS. Nếu một trình duyệt hỗ trợ các mô-đun JavaScript, điều đó có nghĩa là trình duyệt đó hỗ trợ JavaScript hiện đại [e. g. mô-đun, cú pháp ES 6, tìm nạp, v.v.]. Tôi chỉ gửi hầu hết JS cho các trình duyệt này và tôi sử dụng lớp
{
"html": {
"snippets": {
"signup": "p>a{Sign Up}"
}
}
}
{
"html": {
"snippets": {
}
},
"css": {
"snippets": {
}
}
}
Hai phần tử
{
"html": {
"snippets": {
"signup": "p>a{Sign Up}"
}
}
}
{
"html": {
"snippets": {
}
},
"css": {
"snippets": {
}
}
}
Mô tả trang
{
"html": {
"snippets": {
}
},
"css": {
"snippets": {
}
}
}
Thẻ meta
{
"html": {
"snippets": {
"signup": "p>a{Sign Up}"
}
}
}
{
"html": {
"snippets": {
}
},
"css": {
"snippets": {
}
}
}
Phần tử nội dung và cấu trúc trang cơ bản
{
"html": {
"snippets": {
}
},
"css": {
"snippets": {
}
}
}
Bản tóm tắt cuối cùng trông như thế này
{
"html": {
"snippets": {
}
},
"css": {
"snippets": {
}
}
}
đầy đủ nồi hơi
Bản mẫu đầy đủ tương tự như bản mẫu thứ hai;
Đoạn mã tạo ra như sau
- Cấu trúc trang web cơ bản,
4 thẻ meta,^main+footer- Tiêu đề trang,
26/{ "html": { "snippets": { "signup": "p>a{Sign Up}" } } }
19 lớp,{ "html": { "snippets": { "signup": "p>a{Sign Up}" } } }- Màn hình bên ngoài và biểu định kiểu in,
16 và mở các thẻ meta biểu đồ,{ "html": { "snippets": { "signup": "p>a{Sign Up}" } } }
17 thẻ meta,{ "html": { "snippets": { "signup": "p>a{Sign Up}" } } }- thẻ
27 chính tắc,{ "html": { "snippets": { "signup": "p>a{Sign Up}" } } } - thẻ yêu thích,
- Cấu trúc trang,
-