Visual Studio Code (VS Code) cung cấp nhiều tính năng và phím tắt có giá trị để đơn giản hóa việc phát triển HTML. Những tính năng này rất tiện dụng và cho phép các nhà phát triển tốn ít thời gian hơn để viết mã. Mặc dù bạn có thể không sử dụng tất cả các phím tắt có sẵn nhưng việc học những phím tắt quan trọng nhất có thể giúp ích rất nhiều. Bài viết này đề cập đến một số phím tắt hữu ích nhất cần cân nhắc khi mã hóa HTML.

Emmet viết tắt

Mã VS hỗ trợ Emmet. Công cụ này giúp viết mã CSS và HTML dễ dàng hơn thông qua các phím tắt. Cấu trúc HTML cơ bản sẽ mở rộng nếu bạn gõ một dấu chấm than (!) rồi nhấn Chuyển hướng.

Emmet giới thiệu các khả năng mở rộng giúp giảm bớt thời gian viết mã bằng HTML trong Visual Studio Code. Bạn cũng có thể sử dụng điều này trong các trình soạn thảo khác. Việc viết các biểu thức tốc ký sẽ tạo ra các cấu trúc hoàn chỉnh trong HTML.

• Viết tắt Emmet cơ bản: Những chữ viết tắt này mở rộng một số thành phần thường được sử dụng. Đánh máy p rồi đánh Chuyển hướng mở rộng thành <p></p>trong khi P mở rộng đến <p></p>. Nếu bạn gõ ul>li*3nó sẽ mở rộng thành một danh sách có ba mục.
• Các phần tử lồng nhau: dấu > có thể được sử dụng để chỉ định các phần tử con. Ví dụ, p>h1 mở rộng đến <p><h1></h1></p>về cơ bản là tạo ra một <p> phần tử có phần tử
  

  bên trong.

• Phép nhân: Phép nhân tạo ra nhiều phần tử. Thêm *3 vào danh sách có thứ tự sẽ tạo ra một danh sách có ba mục.
• Thuộc tính: Thêm thuộc tính cho thành phần HTML bên trong dấu ngoặc vuông. Ví dụ, [href=”#”] trở thành <a href="#"></a>tạo phần tử neo có thuộc tính a href.
• Cú pháp giống CSS: Cú pháp được lấy cảm hứng từ bộ chọn CSS, khiến nó trở nên quen thuộc và trực quan đối với các nhà phát triển web.
• biểu thức toán học: Bạn có thể thực hiện một số phép toán cơ bản bên trong các chữ viết tắt. Ví dụ, p>ul>li.item$*3 sẽ mở rộng thành phần tử

  chứa danh sách có thứ tự với ba mục danh sách có tên lớp là item1, item2 và item3.

Các chữ viết tắt được mở rộng bằng cách gõ và sau đó nhấn nút Chuyển hướng cái nút. Nếu có một số giải thích hợp lệ cho chữ viết tắt của bạn, hãy xoay vòng chúng bằng cách nhấn nút Chuyển hướng tùy chọn một lần nữa. Chữ viết tắt Emmet không dành riêng cho Mã VS. Bạn có thể sử dụng chúng trong các trình soạn thảo khác có hỗ trợ Emmet.

Gói thẻ

Chọn một dòng hoặc lệnh, sau đó nhấn Ctrl+Shift+G nếu sử dụng Linux hoặc Windows. Nếu sử dụng Mac, hãy sử dụng Cmd+Shift+G. Phím tắt này bao bọc nội dung được chọn bằng thẻ HTML.

Đây là một tính năng tiện lợi trong VS Code. Nó rất hữu ích khi bạn phải đính kèm nội dung bằng thẻ hoặc khi bạn cần cấu trúc mã của mình. Lựa chọn có thể là một dòng, nhiều dòng hoặc một khối mã.

Một tùy chọn khác là nhấp chuột phải vào mã đã chọn của bạn rồi chọn Gói bằng chữ viết tắt trong menu ngữ cảnh. Khi bạn kích hoạt lệnh gói thẻ, một dấu nhắc sẽ xuất hiện nơi bạn có thể chọn tên thẻ HTML mong muốn. Nếu bạn nhập pví dụ: phần tử

bao bọc mã đã chọn.

Gói thẻ giúp đánh dấu và cấu trúc mã mà không cần gõ thủ công các thẻ mở và đóng. Điều này tiết kiệm rất nhiều thời gian và giảm tỷ lệ mắc lỗi cú pháp.

Định dạng

Định dạng mã HTML là một cách tốt để duy trì tính nhất quán và dễ đọc trong các dự án. Trong VS Code, các tùy chọn định dạng tích hợp cho phép hành động diễn ra tự động trong HTML theo các quy tắc được xác định trước.

Phím tắt dùng để định dạng HTML là Shift+Alt+F cho Windows và Linux. Shift+Tùy chọn+F hoạt động trên macOS.

Phím tắt có thể định dạng toàn bộ tài liệu HTML hoặc một phần mã. Khi bạn nhấn nó, các quy tắc định dạng sẽ được áp dụng. Khoảng cách thụt lề và ngắt dòng được điều chỉnh cho phù hợp.

Bạn cũng có thể tự động định dạng mã trong VS Code.

Bình luận

Bạn có thể bình luận hoặc bỏ ghi chú trên một dòng hoặc trên nhiều dòng mã được chọn cùng một lúc. Nếu một nhận xét đã tồn tại, phím tắt sẽ xóa nhận xét đó và nếu không được chú thích, các nhận xét sẽ được thêm vào. Các nhận xét trong HTML được đính kèm trong các thẻ .

Điều hướng mã

Điều này đề cập đến khả năng di chuyển giữa các phần khác nhau của cơ sở mã hoặc chuyển trực tiếp đến các định nghĩa trong thuộc tính hoặc thẻ HTML. Sử dụng Ctrl+] tùy chọn trên Linux và Windows để điều hướng qua các thẻ. Người dùng Mac có thể sử dụng Cmd+] để đi tới thẻ đóng của phần tử. Để chuyển đến thẻ mở, nhấn Ctrl+[[ cho Windows và Linux hoặc Cmd +[[ cho Mac.

Để chuyển sang định nghĩa của một thuộc tính hoặc thẻ, hãy sử dụng F12 chìa khóa. Nó xác định thẻ đóng hoặc thẻ mở tương ứng của cơ sở mã để tìm vị trí chính xác.

Bạn vẫn sẽ truy cập định nghĩa khi giữ phím điều khiển và nhấp vào thuộc tính hoặc thẻ HTML trên Windows. Nhấn Lệnh + nhấp chuột trên macOS cho cùng một hành động. Điều này giúp loại bỏ nhu cầu tìm kiếm vị trí theo cách thủ công.

Chế độ Zen

Chế độ này không bị phân tâm. Nó giúp các nhà phát triển dễ dàng tập trung hoàn toàn vào mã hơn bằng cách ẩn các nút và thanh công cụ. Kích hoạt chế độ này bằng cách sử dụng Ctrl+KZ phím tắt trên Windows và Cmd+KZ trên máy Mac. Ngoài ra, hãy đi đến Xem và sau đó Vẻ bề ngoài. Bật lên Chế độ Zen đây.

Bảng lệnh

Đây là một tính năng được sử dụng rộng rãi trong VS Code và đặc biệt hữu ích cho người mới bắt đầu. Nó đại diện cho mọi tùy chọn cấu hình, phím tắt và chức năng và ở dạng danh sách.

Tất cả những gì bạn phải làm là nhập những gì bạn muốn thực hiện vào bảng lệnh. Bạn sẽ nhận được các lệnh khác nhau để hỗ trợ bạn.

Để truy cập bảng lệnh, hãy sử dụng Ctrl+Shift+P phím tắt cho Windows. Phím tắt Mac là Cmd+Shift+P.

Tìm tập tin

Nếu có văn bản bạn cần nằm trong tệp dự án hiện tại, bạn có thể truy cập nó bằng cách nhấp vào biểu tượng Tìm kiếm ở thanh bên. Ngoài ra, hãy sử dụng Ctrl+Shift+F phím tắt trên Windows hoặc Cmd+Shift+F trên máy Mac.

Xóa từ trước đó

Khi bạn nhấn giữ vào thanh backspace để xóa một từ, bạn có thể vô tình xóa đi những phần khác. Để giới hạn việc xóa từ trước đó, hãy sử dụng Ctrl+Phím lùi phím tắt trên Windows hoặc Cmd+Backspace trên máy Mac.

Sao chép dòng

Trong quá trình phát triển, lập trình viên đôi khi cần sao chép-dán các dòng sang các phần khác của dự án. Những thay đổi nhỏ sau đó có thể được thực hiện đối với các dòng khi cần thiết. Phím tắt là một cách hay để tăng tốc quá trình này, đặc biệt nếu bạn thực hiện việc này thường xuyên.

Phím tắt Windows là Shift+alt+lên hoặc Shift+alt+xuống. Đối với Mac, phím tắt là Chọn+shift+lên hoặc Chọn+shift+xuống.

Mở lại trình chỉnh sửa đã đóng

Nếu bạn đang xử lý một dự án HTML lớn có nhiều tệp, bạn có thể cảm thấy khó chịu nếu vô tình đóng một tab. Rất may, bạn có thể sử dụng phím tắt để mở tab đã đóng cuối cùng trong VS Code

Để mở lại trình soạn thảo đã đóng, hãy sử dụng Ctrl+Shift+T phím tắt trên Windows hoặc Cmd +Shift+T trên máy Mac. Bạn có thể mở nhiều tab đã đóng bằng phím tắt này.

Tăng tốc mã hóa bằng phím tắt HTML

Nhiều phím tắt giúp việc sử dụng mã VS tương đối dễ dàng hơn. Mặc dù có nhiều tùy chọn hơn nội dung trong bài viết, nhưng trên đây là một số tùy chọn phổ biến nhất mà người mới bắt đầu và người dùng dày dạn kinh nghiệm có thể thấy hữu ích. Với sự phổ biến của VS Code, việc tận dụng tất cả các tính năng có thể khiến nó trở nên thú vị hơn. Chọn các phím tắt mà bạn thường sử dụng để tăng tốc độ mã hóa.

Tiếp theo, bạn nên tìm hiểu cách so sánh hai tệp trong VS Code.

Câu hỏi thường gặp

Hỏi: Các phím tắt HTML có thể tùy chỉnh trong Mã VS không?

MỘT: Đúng. Bạn có thể tùy chỉnh các phím tắt HTML trong VS Code bằng cách thay đổi cài đặt người dùng hoặc không gian làm việc của mình.

Hỏi: Tôi có thể tạo lối tắt HTML tùy chỉnh của riêng mình trong Mã VS không?

MỘT: Đúng. Bạn có thể tạo các đoạn mã HTML hoặc phím tắt tùy chỉnh trong VS Code bằng cách xác định chúng trong cài đặt người dùng hoặc không gian làm việc. Điều này cho phép bạn tạo lối tắt cho các mẫu mã hoặc thành phần tùy chỉnh được sử dụng thường xuyên.