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

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\"en\">\r\n\r\n  \"UTF-8\">\r\n  \"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  \"description\" content=\"\">\r\n  \"stylesheet\" type=\"text\/css\" href=\"styles.css\">\r\n  

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\"en\">\r\n\r\n  \"UTF-8\">\r\n  \"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  \"description\" content=\"\">\r\n  \"stylesheet\" type=\"text\/css\" href=\"styles.css\">\r\n  


  

  
  

  
  
  

0 tạo

{
  "HTML boilerplate": {
    "prefix": "!!",
    "body": [
      "\r\n\"en\">\r\n\r\n  \"UTF-8\">\r\n  \"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  \"description\" content=\"\">\r\n  \"stylesheet\" type=\"text\/css\" href=\"styles.css\">\r\n  


  

  
  

  
  
  

1, Mac

 lang="en">

   charset="UTF-8">
   name="viewport" content="width=device-width, initial-scale=1.0">
   name="description" content="">
   rel="stylesheet" type="text/css" href="styles.css">
  


  

  
  

  
  
  

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

 lang="en">

   charset="UTF-8">
   name="viewport" content="width=device-width, initial-scale=1.0">
   name="description" content="">
   rel="stylesheet" type="text/css" href="styles.css">
  


  

  
  

  
  
  

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

 lang="en">

   charset="UTF-8">
   name="viewport" content="width=device-width, initial-scale=1.0">
   name="description" content="">
   rel="stylesheet" type="text/css" href="styles.css">
  


  

  
  

  
  
  

3

{
  "HTML boilerplate": {
    "prefix": "!!",
    "body": [
      "\r\n\"en\">\r\n\r\n  \"UTF-8\">\r\n  \"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n  \"description\" content=\"\">\r\n  \"stylesheet\" type=\"text\/css\" href=\"styles.css\">\r\n