Cách lấy mã html cơ bản trong visual studio

Sau khi tự học trong một năm, tôi bắt đầu viết mã toàn thời gian khi tham gia chương trình đào tạo phát triển web của Founders and Coders vào tháng 3 năm 2020. Hai tuần sau khóa học, chúng tôi bắt đầu khóa học ở Vương quốc Anh và đoàn hệ của chúng tôi phải làm việc từ xa trong 16 tuần còn lại. Nhờ sức mạnh hợp tác của tiện ích mở rộng VS Code Live Share, chúng tôi vẫn có thể ghép nối chương trình và hoàn thành giáo trình theo kế hoạch, nhưng một trong những điều chúng tôi đã bỏ lỡ do không trực tiếp chia sẻ một cách hữu cơ các mẹo và thủ thuật nhỏ mà

Bạn có thể xem ai đó trình bày điều gì đó trong khi chia sẻ màn hình của họ, nhưng trừ khi bạn thấy họ gõ trên bàn phím, bạn không nhất thiết phải nhấn phím, điều này cũng có thể giúp bạn tiết kiệm được vài giây trong ngày. Kết quả là có rất nhiều thủ thuật VS Code tiện lợi mà tôi đã học được kể từ khi bắt đầu vai trò đầu tiên của mình với tư cách là Nhà phát triển Full Stack mà tôi ước mình đã biết trong suốt khóa học

Tôi đã tổng hợp những điều này thành một bài nói chuyện cho nhóm Người sáng lập và Lập trình viên tiếp theo, với tựa đề "Tại sao tôi không biết điều này sớm hơn?. ", và tôi cũng muốn chia sẻ chúng ở đây cho những người mới bắt đầu hành trình viết mã của riêng họ

Phím tắt mã VS

Emmet cung cấp cho bạn một số từ viết tắt mặc định cho nhiều loại tệp bao gồm

{
  "HTML boilerplate": {
    "prefix": "!!",
    "body": [
      "\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  Document\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n\r\n"
    ],
    "description": "HTML boilerplate with custom tags"
  }
}

4 và

{
  "HTML boilerplate": {
    "prefix": "!!",
    "body": [
      "\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  Document\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n\r\n"
    ],
    "description": "HTML boilerplate with custom tags"
  }
}

0 mở rộng thành các đoạn mã hữu ích. Hỗ trợ Emmet được tích hợp vào Mã VS nên không yêu cầu tải xuống tiện ích mở rộng

bản soạn sẵn HTML

Nếu bạn nhập

{
  "HTML boilerplate": {
    "prefix": "!!",
    "body": [
      "\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  Document\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n\r\n"
    ],
    "description": "HTML boilerplate with custom tags"
  }
}

1 vào tệp

{
  "HTML boilerplate": {
    "prefix": "!!",
    "body": [
      "\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  Document\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n\r\n"
    ],
    "description": "HTML boilerplate with custom tags"
  }
}

2 trong Mã VS và sau đó nhấn enter, bạn sẽ nhận được bộ khung HTML sau

  
  
  Document

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Rất nhiều thẻ HTML được sử dụng thường xuyên của tôi bị thiếu trong bản soạn sẵn này, vì vậy tôi đã định cấu hình thẻ của riêng mình

Tôi đã biến

{
  "HTML boilerplate": {
    "prefix": "!!",
    "body": [
      "\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  Document\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n\r\n"
    ],
    "description": "HTML boilerplate with custom tags"
  }
}

3 thành một phím tắt tùy chỉnh cho trình soạn thảo Mã VS của mình, bao gồm thẻ

{
  "HTML boilerplate": {
    "prefix": "!!",
    "body": [
      "\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  Document\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n\r\n"
    ],
    "description": "HTML boilerplate with custom tags"
  }
}

4 cho SEO, cũng như các thẻ để liên kết các biểu định kiểu CSS và tệp JavaScript và một vài thẻ ngữ nghĩa được sử dụng thường xuyên khác

Để làm điều này, bạn cần điều hướng đến Mã> Tùy chọn> Đoạn mã người dùng và tìm kiếm 'html. json'. Sau đó, bạn thêm đoạn mã tùy chỉnh của mình vào tệp này

Tôi khuyên bạn nên viết cấu trúc mong muốn thành một tệp HTML trước, sau đó bạn có thể sao chép nó vào một công cụ như thế này để phân tích cú pháp tệp HTML của bạn thành một chuỗi JSON với các ký tự thoát để có được thụt đầu dòng phù hợp

Tệp

{
  "HTML boilerplate": {
    "prefix": "!!",
    "body": [
      "\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  Document\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n\r\n"
    ],
    "description": "HTML boilerplate with custom tags"
  }
}

5 của tôi trông như thế này

{
  "HTML boilerplate": {
    "prefix": "!!",
    "body": [
      "\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  Document\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n\r\n"
    ],
    "description": "HTML boilerplate with custom tags"
  }
}

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Và bản soạn sẵn đã hoàn thành trông như thế này

________số 8

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

viết tắt HTML

Đôi khi, bạn có thể mất nhiều thời gian hơn để học cách gõ phím tắt so với việc bạn chỉ gõ mã theo cách thủ công. Cá nhân tôi không thấy các từ viết tắt Emmet tiết kiệm thời gian để viết CSS, nhưng một số từ viết tắt HTML mà tôi thấy hữu ích bao gồm

các phần tử lồng nhau

Phím tắt

{
  "HTML boilerplate": {
    "prefix": "!!",
    "body": [
      "\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  Document\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n\r\n"
    ],
    "description": "HTML boilerplate with custom tags"
  }
}

6 tạo

{
  "HTML boilerplate": {
    "prefix": "!!",
    "body": [
      "\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  Document\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n\r\n"
    ],
    "description": "HTML boilerplate with custom tags"
  }
}

0

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Nhiều yếu tố

Phím tắt

{
  "HTML boilerplate": {
    "prefix": "!!",
    "body": [
      "\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  Document\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n\r\n"
    ],
    "description": "HTML boilerplate with custom tags"
  }
}

7 tạo

{
  "HTML boilerplate": {
    "prefix": "!!",
    "body": [
      "\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  Document\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n\r\n"
    ],
    "description": "HTML boilerplate with custom tags"
  }
}

2

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Thẻ có văn bản

Phím tắt

{
  "HTML boilerplate": {
    "prefix": "!!",
    "body": [
      "\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  Document\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n\r\n"
    ],
    "description": "HTML boilerplate with custom tags"
  }
}

8 tạo

{
  "HTML boilerplate": {
    "prefix": "!!",
    "body": [
      "\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  Document\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n\r\n"
    ],
    "description": "HTML boilerplate with custom tags"
  }
}

4

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Các phần tử có nhiều lớp

Phím tắt

{
  "HTML boilerplate": {
    "prefix": "!!",
    "body": [
      "\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  Document\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n\r\n"
    ],
    "description": "HTML boilerplate with custom tags"
  }
}

9 tạo

{
  "HTML boilerplate": {
    "prefix": "!!",
    "body": [
      "\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  Document\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n\r\n"
    ],
    "description": "HTML boilerplate with custom tags"
  }
}

6

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Các phần tử có ID

Phím tắt

  
  
  
  
  Document


  
  
  
  
  
  
  

0 tạo

{
  "HTML boilerplate": {
    "prefix": "!!",
    "body": [
      "\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  Document\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n\r\n"
    ],
    "description": "HTML boilerplate with custom tags"
  }
}

8

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Có thể tìm thấy danh sách đầy đủ các phím tắt trên Emmet Docs Cheat Sheet

Thẻ kiểm soát nguồn mã VS

Sử dụng tính năng Kiểm soát nguồn tích hợp sẵn của VS Code, bạn có thể sắp xếp các tệp của mình và viết thông báo cam kết bằng giao diện người dùng VS Code, thay vì sử dụng thiết bị đầu cuối

Những gì tôi thích về điều này là

• Bạn có thể tạo các tệp cụ thể một cách dễ dàng mà không cần phải nhập đường dẫn tệp vào thiết bị đầu cuối của mình
• Bạn có thể định dạng tin nhắn cam kết của mình dễ dàng hơn
• Khi bạn viết một tin nhắn cam kết, nó sẽ cảnh báo bạn nếu bạn vượt quá số lượng ký tự "được đề xuất" trong một dòng
• Nếu bạn đang sử dụng tiện ích mở rộng Chia sẻ trực tiếp, thông tin đăng nhập đồng tác giả của cộng tác viên của bạn sẽ xuất hiện [họ phải đăng nhập bằng tài khoản GitHub của họ]

Tiện ích mở rộng mã VS hữu ích

Bộ tô màu cặp giá đỡ 2

Tiện ích mở rộng này tô màu các dấu ngoặc mở và đóng phù hợp trong mã của bạn để bạn có thể xác định phạm vi các chức năng và câu lệnh của mình trong nháy mắt

không có phần mở rộng

Với phần mở rộng

Chỉnh sửa. Bài viết này ban đầu được liên kết với Bộ tô màu cặp giá đỡ v1, cảm ơn bạn @indcoder đã chỉ ra trong các nhận xét rằng có một phiên bản v2 nhanh hơn và chính xác hơn

Đường dẫn tệp tương đối

Tiện ích mở rộng này cung cấp cho bạn lối tắt để nhận đường dẫn tệp tương đối của tệp khác từ tệp hiện tại của bạn. Điều này thực sự hữu ích trong một cơ sở mã lớn với nhiều thư mục lồng nhau, nơi bạn có nhiều lần nhập và xuất giữa các tệp, chẳng hạn như trong React. dự án js

Sử dụng phím tắt để hiển thị tìm kiếm tệp [Windows

  
  
  
  
  Document


  
  
  
  
  
  
  

1, Mac

  
  
  
  
  Document


  
  
  
  
  
  
  

2]

Tìm kiếm tệp bạn muốn có đường dẫn tương đối cho

Đường dẫn tương đối sẽ xuất hiện

GitLens

Tiện ích mở rộng này được Git tăng cường cho trình chỉnh sửa của bạn với vô số tính năng mà tôi chưa biết cách sử dụng

Những gì tôi sử dụng nó là tính năng đổ lỗi Git, chú thích lịch sử cam kết gần đây nhất cho mỗi dòng trong tệp của bạn. Điều này đặc biệt hữu ích khi làm việc trong một dự án nhóm để bạn có thể xem nhanh thời điểm những thay đổi cuối cùng được thực hiện, ai đã thực hiện chúng và thông báo cam kết có liên quan

xinh hơn

Prettier là cứu cánh vì nó tự động định dạng mã của bạn. Bạn có thể tải xuống dưới dạng tiện ích mở rộng trên VS Code và nó sẽ chạy các cài đặt mà bạn định cấu hình trong ứng dụng [đi tới Cài đặt và tìm kiếm 'Prettier']

Để định dạng tệp hiện tại của bạn, hãy nhấp chuột phải và chọn Định dạng tài liệu hoặc để bật định dạng tự động khi bạn lưu tệp của mình, hãy đi tới Cài đặt và tìm kiếm 'định dạng khi lưu' và đánh dấu vào hộp kiểm

Bạn nên có tệp cấu hình

  
  
  
  
  Document


  
  
  
  
  
  
  

3 trong thư mục gốc của dự án nhóm của mình, nơi bạn chỉ định số lượng khoảng trắng bạn muốn cho ý định, dấu ngoặc đơn hay dấu ngoặc kép, liệu tất cả các dòng có kết thúc bằng dấu chấm phẩy hay không, v.v.

Tệp cấu hình sẽ ghi đè cài đặt VS Code cục bộ của bạn để mọi người trong nhóm sẽ có cùng quy tắc định dạng được áp dụng cho mã của họ - tránh xung đột khó chịu

Tôi sử dụng Trình tạo cấu hình đẹp hơn này để tạo JSON cho tệp và các tài liệu Đẹp hơn giải thích thêm về ý nghĩa của từng tùy chọn định dạng

JSON sau đây trong tệp

  
  
  
  
  Document


  
  
  
  
  
  
  

3

{
  "HTML boilerplate": {
    "prefix": "!!",
    "body": [
      "\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  Document\r\n\r\n\r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n  \r\n\r\n"
    ],
    "description": "HTML boilerplate with custom tags"
  }
}

3

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Định dạng lại cái này

Về điều này, với khoảng cách nhất quán, chiều rộng dòng trung bình khoảng 80 ký tự, 2 khoảng trắng để thụt đầu dòng và không phải tab, dấu chấm phẩy được in ở cuối mỗi câu lệnh và dấu ngoặc kép thay vì dấu ngoặc đơn

Đây chỉ là một ví dụ để chứng minh các thay đổi định dạng áp dụng Prettier và không phải là đề xuất về kiểu mã. Hầu hết thời gian bạn sẽ không phải loay hoay với các cài đặt quá nhiều và bạn có thể sử dụng cấu hình cơ bản để giữ cho cơ sở mã của mình nhất quán hoặc khi bạn bắt đầu làm việc với tư cách là nhà phát triển, công ty của bạn sẽ có "phong cách nội bộ"