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

Truy cập các lệnh Emmet

Các từ viết tắt

Một trong những lệnh Emmet mạnh nhất là Expand Abbreviation. Với Emmet, bạn có thể sử dụng các từ viết tắt được phân tích cú pháp trong thời gian chạy để tạo các khối mã có cấu trúc. Các từ viết tắt này dựa trên bộ chọn CSS cho phép bạn thiết lập và chạy trên Emmet ngay lập tức. Mã được tạo bao gồm các điểm dừng tab cho phép bạn duyệt nhanh mã bằng phím Tab. Emmet hoạt động trong các tệp (X)HTML, CSS, XML, XSL và JSP. Nó thậm chí sẽ cung cấp cho bạn các phần mở rộng CSS cụ thể trong các phần CSS trong tệp HTML và hỗ trợ HTML tại các vị trí thích hợp trong tệp JSP

Mẹo. Để xem một cheat sheet với cú pháp Emmet và các ví dụ, hãy nhấp chuột phải vào Trình chỉnh sửa và chọn Emmet>Emmet Cheat Sheet

Xem bản trình diễn sau để biết cách viết tắt Emmet đang hoạt động và sau đó bạn thậm chí có thể tự mình thử

 

Từ viết tắt Ví dụ

Trong tệp HTML, nhập nav>ul>li và nhấn Ctrl+Alt+Enter. Đoạn mã sau được tạo ra

Đối với một ví dụ phức tạp hơn, hãy nhập ul>li. item$*5 và nhấn Ctrl+Alt+Enter. Đoạn mã sau được tạo ra

Dưới đây là một số ví dụ về CSS

• bd. n mở rộng ra biên giới. không có;
• ff. v mở rộng sang họ phông chữ. Verdana, Geneva, sans-serif;

Các lệnh Emmet bổ sung

Ngoài lệnh Expand Abbreviations, có một số hành động khác có sẵn từ menu Emmet giúp tăng tốc mã hóa

Manuel Matuzović là nhà phát triển giao diện người dùng đến từ Vienna, người đam mê khả năng tiếp cận, nâng cao tiến bộ, hiệu suất và tiêu chuẩn web. Anh ấy là một trong … Thông tin thêm về Manuel ↬

Bản tin email

Email (đập vỡ) của bạn

Mẹo hàng tuần về front-end & UX
Được hơn 200.000 người tin cậy

• Giao diện người dùng SmashingConf 2023

• Chuẩn bị cho các vai trò giao tiếp ngày nay Thạc sĩ Thiết kế Thông tin của Northwestern

• SmashingConf Freiburg 2023

• Quảng cáo trên tạp chí Smashing

• Các mẫu thiết kế giao diện Đào tạo UX

Trong bài viết này, Manuel giải thích lý do tại sao Emmet là một trong những công cụ năng suất yêu thích của anh ấy để viết HTML và CSS, đồng thời cách bạn có thể tạo các đoạn mã Emmet tùy chỉnh trong Visual Studio Code để giúp bạn cải thiện quy trình công việc mặt trước của mình hơn nữa

Đầu năm nay, tôi đã chia sẻ bản tóm tắt HTML mà tôi muốn sử dụng khi bắt đầu các dự án web mới với các giải thích từng dòng trên blog của mình. Đó là một bộ sưu tập hầu hết là

{
  "html": {
    "snippets": {
      "img:l": "img[width height loading='lazy']"
    }
  }
}

5 thẻ và thuộc tính mà tôi thường sử dụng trên mọi trang web mà tôi xây dựng. Cho đến gần đây, tôi chỉ sao chép và dán bản soạn sẵn bất cứ khi nào tôi cần, nhưng tôi đã quyết định cải thiện quy trình làm việc của mình bằng cách thêm nó dưới dạng một đoạn trích vào Mã VS — trình chỉnh sửa mà tôi chọn

Đây là bản trình diễn nhanh về các đoạn mã tùy chỉnh mà tôi đã tạo

Đoạn mã và chữ viết tắt trong Visual Studio Code

Mã VS được tích hợp sẵn với đoạn mã người dùng tùy chỉnh, đoạn mã HTML và CSS và từ viết tắt do Emmet cung cấp

Ví dụ: nếu bạn nhập

{
  "html": {
    "snippets": {
      "img:l": "img[width height loading='lazy']"
    }
  }
}

6 vào tài liệu HTML và nhấn Enter hoặc Tab, Emmet sẽ biến nó thành đánh dấu sau

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']"
    }
  }
}

7 và nhấn Enter hoặc Tab và chúng ta sẽ nhận được kết quả tương tự. Tôi sẽ giải thích cách tạo đoạn trích trong

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']"
    }
  }
}

8 tạo cấu trúc cơ bản của tài liệu HTML

________số 8_______

Đ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

1. 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": {
       }
     }
   }
   

2. 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”
   
3. 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']"
    }
  }
}

9 và

0 trong đó

1 là tên của đoạn trích và

2 là chữ viết tắt hoặc một chuỗi

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

3, nhưng không có chữ viết tắt nào dành cho hình ảnh được tải chậm. Chúng ta có thể sử dụng chữ viết tắt mặc định và chỉ cần thêm các thuộc tính và giá trị thuộc tính bổ sung mà chúng ta cần trong ngoặc vuông

{
  "html": {
    "snippets": {
      "img:l": "img[width height loading='lazy']"
    }
  }
}

4 + Enter/Tab hiện tạo đánh dấu sau

Trang

Hầu hết các trang tôi tạo bao gồm các mốc đánh dấu

5,

6 và

7 và một

8. Chữ viết tắt

9 tùy chỉnh cho phép tôi tạo cấu trúc đó một cách nhanh chóng

"snippets": {
  "page": "header>h1^main+footer{${0:©}}"
}

9 + Enter/Tab tạo đánh dấu sau

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ử

5 và phần tử con

8

header>h1

Di chuyển lên, trở lại mức của

5 và tạo một

7 theo sau

6

^main+footer

Đặt điểm dừng tab cuối cùng trong

7 và đặt văn bản mặc định thành

"snippets": {
  "page": "header>h1^main+footer{${0:©}}"
}

7

{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}

0

dẫn đường

Chữ viết tắt

"snippets": {
  "page": "header>h1^main+footer{${0:©}}"
}

8 chỉ tạo thẻ bắt đầu và thẻ kết thúc

"snippets": {
  "page": "header>h1^main+footer{${0:©}}"
}

9 theo mặc định, nhưng những gì tôi thường cần là một

"snippets": {
  "page": "header>h1^main+footer{${0:©}}"
}

9 với các phần tử và liên kết

1,

2 lồng nhau (

3). Nếu có nhiều phần tử

"snippets": {
  "page": "header>h1^main+footer{${0:©}}"
}

9 trên một trang, chúng cũng nên được gắn nhãn, ví dụ bằng cách sử dụng

5

{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}

1

Đ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:©}}"
}

9 với thuộc tính

5 và một

1 lồng nhau.

9 điền thuộc tính bằng văn bản “Main” và tạo một điểm dừng tab tại giá trị thuộc tính bằng cách di chuyển con trỏ đến nó và tô sáng nó khi tạo

{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}

2

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

0. Chúng tôi tạo một điểm dừng tab khác và điền vào liên kết bằng văn bản “Trang hiện tại”

{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}

3

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}"
    }
  }
}

4

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}"
    }
  }
}

5

Bây giờ chúng tôi nhận được điều này

{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}

6

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

1 mặc định chỉ tạo thẻ bắt đầu và thẻ kết thúc

header>h1

2, nhưng thông thường khi tôi sử dụng phần tử

header>h1

2, tôi làm điều đó vì tôi muốn nhanh chóng kiểm tra hoặc gỡ lỗi điều gì đó

Hãy thêm một số quy tắc mặc định vào thẻ

header>h1

2

{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}

7

Phá vỡ

Một số nhân vật (e. g.

header>h1

5,

header>h1

6,

header>h1

7 hoặc

header>h1

8) phải được thoát bằng cách sử dụng

header>h1

9

{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}

8

^main+footer

0 tạo ngắt dòng và

^main+footer

1 đặt điểm dừng tab đầu tiên tại bộ chọn

header>h1

6

{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}

9

• Trước.

  ^main+footer
  

  3
• Sau đó
  
  0

Đượ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,

• ^main+footer
  

  4 thẻ meta,
• Tiêu đề trang,

• header>h1
  

  2 phần tử,
• Một
  8

1

Phá vỡ

Một chuỗi với loại tài liệu

2

Phần tử

^main+footer

7 với thuộc tính

^main+footer

8. Giá trị của thuộc tính

^main+footer

8 là một biến bạn có thể thay đổi trong cài đặt mã VS (Mã → Tùy chọn → Cài đặt)

3

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

8. Bạn cũng có thể thêm các biến tùy chỉnh của mình tại đây

{
  "html": {
    "snippets": {
      "img:l": "img[width height loading='lazy']"
    }
  }
}

5 bao gồm thẻ meta

{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}

02, thẻ meta

^main+footer

4, thẻ

{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}

04 và thẻ

header>h1

2.

{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}

06 tạo một dòng mới

4

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

5

Có vẻ ổn, nhưng chữ viết tắt

{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}

07 tạo ra cách cũ trong HTML để xác định

{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}

02 và

{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}

09 tạo ra hai điểm dừng tab mà tôi không cần vì tôi không bao giờ sử dụng cài đặt khác cho

^main+footer

4

Hãy ghi đè lên những đoạn trích này trước khi chúng ta tiếp tục

6

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}"
    }
  }
}

11, một

8 với văn bản mặc định, theo sau là dấu tab cuối cùng

7

Bản mẫu cuối cùng

8

Đố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,

• ^main+footer
  

  4 thẻ meta,
• Tiêu đề trang,

• {
    "html": {
      "snippets": {
        "signup": "p>a{Sign Up}"
      }
    }
  }
  

  14/_______5_______15 lớp,
• Màn hình bên ngoài và biểu định kiểu in,
• Thẻ meta

  {
    "html": {
      "snippets": {
        "signup": "p>a{Sign Up}"
      }
    }
  }
  

  16 và

  {
    "html": {
      "snippets": {
        "signup": "p>a{Sign Up}"
      }
    }
  }
  

  17,
• cấu trúc trang

9

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}"
    }
  }
}

18 và phần tử gốc giống như trong ví dụ đầu tiên, nhưng có thêm lớp

{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}

19 và nhận xét nhắc tôi thay đổi thuộc tính

^main+footer

8, nếu cần

{
  "html": {
    "snippets": {
    }
  },
  "css": {
    "snippets": {
    }
  }
}

0

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']"
    }
  }
}

5 bao gồm thẻ meta

{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}

02, thẻ meta

^main+footer

4,

{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}

04.

{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}

06 tạo một dòng mới

{
  "html": {
    "snippets": {
    }
  },
  "css": {
    "snippets": {
    }
  }
}

1

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}"
    }
  }
}

26 trong CSS, nếu kiểu dáng của một thành phần khác, khi JavaScript đang hoạt động

{
  "html": {
    "snippets": {
    }
  },
  "css": {
    "snippets": {
    }
  }
}

2

Hai phần tử

{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}

27;

{
  "html": {
    "snippets": {
    }
  },
  "css": {
    "snippets": {
    }
  }
}

3

Mô tả trang

{
  "html": {
    "snippets": {
    }
  },
  "css": {
    "snippets": {
    }
  }
}

4

Thẻ meta

{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}

17

{
  "html": {
    "snippets": {
    }
  },
  "css": {
    "snippets": {
    }
  }
}

5

Phần tử nội dung và cấu trúc trang cơ bản

{
  "html": {
    "snippets": {
    }
  },
  "css": {
    "snippets": {
    }
  }
}

6

Bản tóm tắt cuối cùng trông như thế này

{
  "html": {
    "snippets": {
    }
  },
  "css": {
    "snippets": {
    }
  }
}

7

đầ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,

• ^main+footer
  

  4 thẻ meta,
• Tiêu đề trang,

• {
    "html": {
      "snippets": {
        "signup": "p>a{Sign Up}"
      }
    }
  }
  

  26/

  {
    "html": {
      "snippets": {
        "signup": "p>a{Sign Up}"
      }
    }
  }
  

  19 lớp,
• Màn hình bên ngoài và biểu định kiểu in,

• {
    "html": {
      "snippets": {
        "signup": "p>a{Sign Up}"
      }
    }
  }
  

  16 và mở các thẻ meta biểu đồ,

• {
    "html": {
      "snippets": {
        "signup": "p>a{Sign Up}"
      }
    }
  }
  

  17 thẻ meta,
• thẻ

  {
    "html": {
      "snippets": {
        "signup": "p>a{Sign Up}"
      }
    }
  }
  

  27 chính tắc,
• thẻ yêu thích,
• Cấu trúc trang,
• <

  {
    "html": {
      "snippets": {
        "signup": "p>a{Sign Up}"
      }
    }
  }
  

  37 tag.

{
  "html": {
    "snippets": {
    }
  },
  "css": {
    "snippets": {
    }
  }
}

8

Đoạn mã cực kỳ dài này tạo ra điều này

{
  "html": {
    "snippets": {
    }
  },
  "css": {
    "snippets": {
    }
  }
}

9

Đoạn CSS tùy chỉnh

Để hoàn thiện, đây là một số đoạn mã CSS tôi đang sử dụng

gỡ lỗi

Đoạn mã này tạo đường viền màu đỏ 5px với độ lệch tùy chỉnh

{
  "html": {
    "snippets": {
      "img:l": "img[width height loading='lazy']"
    }
  }
}

0

định tâm

Đoạn mã đặt

{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}

38 linh hoạt và căn giữa các mục con của nó

{
  "html": {
    "snippets": {
      "img:l": "img[width height loading='lazy']"
    }
  }
}

1

dính

Đặt thuộc tính

{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}

39 thành

{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}

40, với hai tab dừng tại thuộc tính

{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}

41 và

{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}

42

{
  "html": {
    "snippets": {
      "img:l": "img[width height loading='lazy']"
    }
  }
}

2

Minh họa tất cả 3 đoạn mã CSS được áp dụng cho phần tử

{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}

43

Đoạn trích người dùng

Ở đầu bài viết này, tôi đã đề cập rằng VS Code cũng cung cấp các đoạn mã tùy chỉnh. Sự khác biệt đối với đoạn trích Emmet là bạn không thể sử dụng từ viết tắt, nhưng bạn cũng có thể xác định các điểm dừng tab và sử dụng các biến nội bộ

Cách tận dụng tốt nhất đoạn mã người dùng có thể là một chủ đề cho một bài viết khác, nhưng đây là một ví dụ về đoạn mã CSS tùy chỉnh mà tôi đã xác định

{
  "html": {
    "snippets": {
      "img:l": "img[width height loading='lazy']"
    }
  }
}

3

Đoạn mã này không chỉ tạo các quy tắc CSS, mà là toàn bộ khối khai báo khi chúng ta nhập

{
  "html": {
    "snippets": {
      "signup": "p>a{Sign Up}"
    }
  }
}

44 và nhấn Enter hoặc Tab

{
  "html": {
    "snippets": {
      "img:l": "img[width height loading='lazy']"
    }
  }
}

4

Từ cuối cùng

Sẽ mất một chút thời gian để tạo các đoạn mã này, nhưng rất đáng để nỗ lực vì bạn có thể tùy chỉnh Emmet theo sở thích cá nhân của mình, tự động hóa các tác vụ lặp đi lặp lại và tiết kiệm thời gian về lâu dài

Tôi muốn xem bạn sử dụng đoạn trích nào, vì vậy hãy chia sẻ chúng với chúng tôi trong phần nhận xét. Nếu bạn muốn sử dụng cài đặt của tôi, bạn có thể tìm đoạn trích cuối cùng của tôi. json trên GitHub

Emmet viết tắt là gì?

Emmet nghĩa là gì trong HTML?

Mã Emmet VS là gì?

Đoạn trích Emmet là gì?