NỘI DUNG BÀI VIẾT
Visual Studio Code, được duy trì bởi Microsoft, là một trong những trình soạn thảo mã nguồn mở phổ biến nhất hiện có. VSCode nhằm mục đích cung cấp tất cả các công cụ bạn cần trong khi cắt bỏ các quy trình làm việc phức tạp của các IDE đầy đủ. Nhiều lập trình viên thích VS Code vì nó cung cấp rất nhiều tiện ích mở rộng để bổ sung chức năng, năng suất, gỡ lỗi và tốc độ.
Trong hướng dẫn nhanh này, chúng ta sẽ xem xét top 10 tiện ích mở rộng VSCode hàng đầu được sử dụng vào năm 2022. Chúng ta sẽ thảo luận về những gì chúng làm và cách chúng có thể giúp cuộc sống viết mã của bạn dễ dàng hơn. Hãy bắt đầu!
Bộ chỉnh màu cặp giá đỡ
Bộ chỉnh màu cặp khung mở rộng VS khớp với các dấu ngoặc tương ứng trong mã của bạn với cùng màu. Đây là một trợ giúp tuyệt vời khi bạn đang làm việc với những thứ như các thành phần, đối tượng hoặc hàm được lồng vào nhau mà tất cả đều có dấu ngoặc đơn hoặc dấu ngoặc đơn.
Với tiện ích mở rộng đơn giản này, việc tìm các cặp phù hợp và hiểu mã của bạn sẽ dễ dàng hơn nhiều. Ưu điểm lớn nhất của tiện ích mở rộng này là khả năng điều hướng và tiếp cận được cải thiện. Nó cũng giúp người khác đọc và hiểu mã của bạn dễ dàng hơn.
Better comments
Better comments là một tiện ích mở rộng được sử dụng để viết các nhận xét thân thiện với con người trong mã của bạn, điều này rất hữu ích cho bạn và bất kỳ ai đang đọc mã nguồn (đặc biệt là cho các nhóm). Nhận xét mang tính mô tả, thân thiện với con người tiết kiệm rất nhiều thời gian cho mọi người tham gia.
Với tiện ích mở rộng VS này, bạn có thể sử dụng các ký tự sau sau dấu gạch chéo kép // để thêm nhận xét dễ dàng hơn:
*đối với văn bản được đánh dấu!cho các lỗi và cảnh báo?cho các truy vấn và câu hỏi//cho gạch ngangTODOcho việc cần làm
Snippets
Snippets là một tiện ích bổ sung tuyệt vời cho năng suất. Snippets là một tập hợp các phần mở rộng khác nhau cho các ngôn ngữ lập trình thông dụng nhất. Ví dụ: React Snippet là một tiện ích mở rộng phổ biến, cho phép bạn sử dụng và tạo các lệnh tắt cho những việc bạn làm đi làm lại.
Một số tùy chọn phổ biến là:
- Angular Snippets (version 11)
- Python
- JavaScript (ES6) code snippets
- HTML Snippets
- Vue 3 Snippets
CSS Peak
CSS Peak là một tiện ích mở rộng tuyệt vời dành cho các lập trình viên web, vì nó cho phép bạn “xem qua” các kiểu cho các lớp CSS, id và thậm chí cả các thẻ HTML. Phần mở rộng này tương tự như tính năng dấu ngoặc gọi là trình chỉnh sửa nội tuyến CSS.
CSS Peak hỗ trợ theo dõi định nghĩa biểu tượng cho bất kỳ bộ chọn CSS nào, ví dụ:
Peek: tải nội dòng tệp CSS để chỉnh sửa nhanh (Ctrl + Shift + F12)
Đi tới: chuyển trực tiếp đến tệp CSS (F12)
Di chuột: hiển thị định nghĩa khi di chuột qua biểu tượng (Ctrl + hover)
Prettier
Phần mở rộng Prettier là một trình định dạng giúp giữ cho kiểu mã nhất quán. Bạn có thể định cấu hình cài đặt của mình theo cách bạn cần và lưu bằng các phím tắt. Prettier là một trong những trình định dạng mã phổ biến nhất hiện có, với hơn 38,5 nghìn sao trên GitHub.
Prettier sẽ tự động khắc phục các vấn đề về định dạng trong mã của bạn, như sửa sự kết hợp của dấu ngoặc đơn và dấu ngoặc kép hoặc việc sử dụng không thường xuyên dấu chấm phẩy.
Tiện ích mở rộng này hoạt động với các công nghệ sau: JavaScript, TypeScript, Java, JSON, CSS, HTML, Vue, Angular, Markdown, YAML, v.v.
Relative Path
Relative Path là một phần mở rộng tuyệt vời để viết các câu lệnh nhập. Bạn có thể dễ dàng lấy đường dẫn tương đối cho bất kỳ tệp nào bằng các phím tắt trong không gian làm việc của mình. Thay vì tìm kiếm vị trí của tệp, bạn chỉ cần tên của tệp và tiện ích mở rộng sẽ cung cấp đường dẫn tương đối từ vị trí hiện tại đến tệp đích đó.
Biểu tượng
Các biểu tượng cho phép bạn tạo các biểu tượng mô tả để giúp phân biệt giữa các tệp và thư mục. Điều này làm cho mã của bạn trực quan hơn, do đó, làm việc theo nhóm, quay lại mã sau một thời gian dễ dàng hơn hoặc thậm chí chỉ làm cho trải nghiệm thú vị hơn. Ví dụ, bạn có thể thay đổi màu của biểu tượng thư mục mặc định bằng cách sử dụng bảng lệnh.
Có một số tiện ích mở rộng Biểu tượng khác nhau, bao gồm
- vscode-icons
- Material Icon Theme
- Material Theme Icons
- Simple icons
GitLens
Phần mở rộng GitLens kết hợp các khả năng của Git với VSCode cho phép bạn trực quan hóa quyền tác giả mã thông qua Git. GitLens rất tuyệt để hiểu mã tốt hơn, vì vậy bạn có thể tìm hiểu ai, tại sao và khi nào mã được thay đổi. Nó cũng cho phép bạn khám phá lịch sử và sự phát triển của cơ sở mã.
Nó cũng có nhiều tính năng khác để sử dụng như:
- Điều hướng sửa đổi thông qua lịch sử tệp
- Chú thích đổ lỗi cho dòng hiện tại ở cuối dòng hiển thị cam kết
- Một chú thích đổ lỗi trên thanh trạng thái cho cam kết và tác giả đã sửa đổi dòng hiện tại lần cuối
Import Cost
Phần mở rộng import cost giúp nâng cao năng suất bằng cách hiển thị kích thước ước tính của một gói hàng nhập khẩu. Điều này giúp tránh các vấn đề bằng cách theo dõi kích thước của các phần phụ thuộc được thêm vào.
Nếu một lần nhập quá lớn, phần mở rộng import cost sẽ cảnh báo bạn để bạn có thể định cấu hình lại dựa trên các yêu cầu bạn đặt ra.
Markdown All in One
Markdown All in One là một phần mở rộng rất hữu ích cho tất cả những thứ liên quan đến markdown. Nó bổ sung các tính năng như tự động xem trước, phím tắt, tự động hoàn thành cú pháp, v.v. Markdown thường được sử dụng trong nhiều lĩnh vực công nghệ và tiện ích mở rộng này giúp bạn làm việc dễ dàng hơn, tăng năng suất và tốc độ.
Với Markdown All in One, bạn có thể sử dụng các phím tắt để thay đổi văn bản và thêm những thứ như in đậm, in nghiêng, v.v. Nó cũng có các tính năng tự động hữu ích để làm việc với những thứ như danh sách và toán học. Dưới đây là một số lệnh phổ biến:
- Tạo Mục lục
- Xóa số phần
- Chuyển đổi khối mã
- In tài liệu hiện tại sang HTML
Cảm ơn bạn đã theo dõi bài viết!
Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây.
Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm.
TỔNG HỢP TÀI LIỆU HỌC LẬP TRÌNH CƠ BẢN CHO NGƯỜI MỚI BẮT ĐẦU
KHOÁ HỌC BOOTCAMP JAVA/JAVASCRIPT/PHP TRỞ THÀNH LẬP TRÌNH VIÊN TRONG 5-6 THÁNG
