Làm thế nào để bạn làm emmet trong html?

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ề giao diện người dùng & UX.
Được hơn 200.000 người tin cậy.

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

• Hệ thống thiết kế thành công

• Các mẫu thiết kế giao diện thông minh, khóa học 8h-video

• Bắt đầu miễn phí

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à tập hợp hầu hết các thẻ và thuộc tính của

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

5 tôi thường sử dụng trên mọi trang web 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

Đ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 đ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.
   ______7
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 đoạn mã bằng cách thêm các thuộc tính vào đối tượng

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

9 và

0 trong đó

1 là tên của đoạn mã và

2 là tên viết tắt hoặc 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ó 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 ________ 95, ________ 96 và ________ 97 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

Sign Up

1

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

Sign Up

3

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

Sign Up

6

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

5 và tạo một

7 theo sau

6

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

0

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

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

Sign Up

17

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

0

dẫn đường

Chữ viết tắt

Sign Up

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

Sign Up

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

Sign Up

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

Sign Up

31,

Sign Up

32 lồng nhau (

Sign Up

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

Sign Up

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

Sign Up

35

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

1

Điều đó có vẻ hoang đường, vì vậy hãy phá vỡ nó một lần nữa

Phá vỡ

Chúng tôi bắt đầu với một phần tử

Sign Up

19 với một thuộc tính

Sign Up

35 và một

Sign Up

31 lồng nhau.

Sign Up

39 đ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

Sign Up

60. 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 chuyển thể, 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

Sign Up

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

Sign Up

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

Sign Up

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

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

Sign Up

62

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

7

Phá vỡ

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

Sign Up

65,

Sign Up

66,

Sign Up

67 hoặc

Sign Up

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

Sign Up

69

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

8

________ 300 tạo ngắt dòng và

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

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

Sign Up

66

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

9

• Trước.

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

  03
• Sau.
  ______60

Đượ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,
• Thẻ meta

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

  04,
• Tiêu đề trang,
• phần tử

  Sign Up
  

  62,
• Một
  8

1

Phá vỡ

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

2

Phần tử

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

07 với thuộc tính

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

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

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

08 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

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

08. 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

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

04, thẻ

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

04 và thẻ

Sign Up

62.

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

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

04

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,
• Thẻ meta

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

  04,
• Tiêu đề trang,
• Lớp học

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

  14/

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

  15,
• 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

Vâng, 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

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

08, 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

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

04,

{
  "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,
• Thẻ meta

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

  04,
• Tiêu đề trang,
• Lớp học

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

  26/

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

  19,
• 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 đồ,
• Thẻ meta

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

  17,
• thẻ

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

  27 chuẩn,
• 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 điểm dừng tab ở 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 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

Thẻ Emmet trong HTML là gì?

Làm cách nào để sử dụng Emmet trong Mã VS cho HTML?

Làm thế nào để cài đặt Emmet?