Visual Studio Code là một trình chỉnh sửa mã tuyệt vời đi kèm với các tính năng JavaScript và TypeScript như tái cấu trúc cơ bản ngay lập tức. Tuy nhiên, sức mạnh thực sự của nó là một thị trường mở rộng nổi bật. Có các tiện ích mở rộng cho hầu hết mọi thứ bạn có thể muốn thực hiện trong IDE [Môi trường phát triển tích hợp] và chúng có thể làm cho Mã VS tốt hơn nhiều lần
Thật không may, có thể tốn thời gian để tìm tiện ích mở rộng phù hợp và định cấu hình Mã VS. Nhiều nhà phát triển thích trải nghiệm vượt trội mà các IDE như Webstorm cung cấp. Bài đăng trên blog này cho thấy các tiện ích mở rộng Visual Studio Code có thể giúp bạn nâng cao trải nghiệm IDE cho JavaScript như thế nào. Nó bao gồm
Bạn có thể cài đặt thuận tiện 25 tiện ích mở rộng chuyển đổi Visual Studio Code thành một IDE JavaScript đầy đủ với Gói mở rộng IDE JavaScript. Chủ đề biểu tượng hoặc màu sắc và bản đồ phím tắt không được đề cập ở đây, chúng cũng không được bao gồm trong gói tiện ích mở rộng vì chúng phụ thuộc nhiều vào sở thích cá nhân hơn hầu hết các tiện ích mở rộng
Hãy đi sâu vào các tính năng khác nhau và xem những gì có thể có trong Mã VS chỉ với một vài tiện ích mở rộng
Hoàn thành mã và đoạn mã
Các tính năng hoàn thành mã [IntelliSense] có thể giúp viết mã nhanh hơn và dễ dàng hơn. Visual Studio Code cung cấp IntelliSense cho JavaScript và TypeScript theo mặc định và chứa hỗ trợ Emmet mạnh mẽ để mở rộng đoạn mã
Một trong những xu hướng mới nhất trong việc hoàn thành mã là trợ lý AI. Tuy nhiên, trải nghiệm của tôi với các trợ lý hoàn thành mã AI như GitHub Copilot và Tabnine cho đến nay vẫn còn lẫn lộn và do đó tôi chưa đưa chúng vào gói tiện ích mở rộng, nhưng chúng có thể hoạt động tốt cho bạn
Dưới đây là một vài tiện ích mở rộng đoạn mã có thể tăng năng suất của bạn
Tiện ích mở rộng đoạn trích ES7 cung cấp nhiều đoạn trích hàng ngày có thể mở rộng. Ví dụ: xác định nhập và xuất, tạo phương thức và vòng lặp cũng như trả về Lời hứa. Tiện ích mở rộng cũng chứa nhiều đoạn trích cho React và GraphQL
Với tiện ích mở rộng Emmet Live, bạn có thể xem trước đầu ra Emmet của mình trong khi tạo chữ viết tắt Emmet. Bạn có thể bắt đầu bằng lệnh Emmet Live
Khi viết bài kiểm tra hoặc tạo mô hình, thường mất thời gian để tìm ra dữ liệu giả tốt. Bạn có thể sử dụng tiện ích mở rộng vscode-random để tạo nhiều loại dữ liệu ngẫu nhiên, chẳng hạn như số, vị trí, email, IP, tên và giá trị ngày giờ
Linting, kiểm tra chính tả và gợi ý
Thời điểm tốt nhất để nhận phản hồi về mã của bạn là trong khi chỉnh sửa, tôi. e. , khi bạn có thể nhanh chóng thay đổi mã và tìm hiểu khi bạn thực hiện. Bằng cách tích hợp linting, kiểm tra chính tả và các đề xuất khác vào quy trình chỉnh sửa của bạn, bạn sẽ tránh được một số bước kiểm tra trước khi cam kết mở rộng hơn và kéo các chuyến đi khứ hồi của yêu cầu
Rất dễ mắc lỗi đánh máy và lỗi chính tả nhỏ trong tên biến và hàm, chuỗi, nhận xét, v.v. Tiện ích mở rộng Trình kiểm tra chính tả mã làm nổi bật những lỗi đó và thường có thể cung cấp cách viết đúng như một cách khắc phục
ESLint là trình nói dối JavaScript được sử dụng phổ biến nhất. Nó giúp bạn "tìm và khắc phục sự cố trong mã JavaScript của mình. " ESLint rất có thể mở rộng và có thể định cấu hình, đồng thời nhiều nhóm có các quy tắc tùy chỉnh riêng cho dự án của họ. Tiện ích mở rộng ESLint hiển thị lỗi và cảnh báo trực tiếp trong trình chỉnh sửa của bạn và cho phép bạn nhanh chóng khắc phục chúng một cách dễ dàng. Bạn cũng có thể định cấu hình nó để tự động khắc phục mọi sự cố khi lưu
Tiện ích mở rộng Ống kính Lỗi làm nổi bật và hiển thị lỗi, cảnh báo và thông báo thông tin trực tiếp trong trình chỉnh sửa. Với nó, bạn không cần phải thực hiện thêm bước nào để tìm hiểu ý nghĩa của những gạch dưới nguệch ngoạc - nó ở ngay trước mặt bạn. Nếu thông tin trở nên quá tải, bạn có thể dễ dàng bật và tắt thông tin đó cho các loại thông báo khác nhau bằng các lệnh Error Lens: Toggle...
Định dạng, hành động mã và tái cấu trúc
Visual Studio Code đi kèm với các phép tái cấu trúc cơ bản và các bản sửa lỗi nhanh như Rename, Extract Method và Extract Variable. Trải nghiệm chỉnh sửa có thể được nâng cao hơn nữa với các tiện ích mở rộng
Định dạng mã thủ công rất tốn thời gian và dễ bị lỗi. Với Prettier, trình định dạng mã chuẩn thực tế của thế giới JavaScript, bạn có thể tự động định dạng mã của mình. Bạn thậm chí có thể định cấu hình tiện ích mở rộng Mã VS đẹp hơn để định dạng mã nguồn khi bạn lưu nó
Phần mở rộng Thay đổi trường hợp thêm một loạt các lệnh để thay đổi trường hợp của văn bản đã chọn, e. g. , vào vỏ lạc đà, vỏ rắn, vỏ Pascal, v.v. Tất cả các lệnh đều có tiền tố Change Case
Trợ lý JS mà tôi đã phát triển thêm hơn 60 lần tái cấu trúc, sửa lỗi nhanh và hành động mã vào Mã VS. Nó chứa các phép tái cấu trúc React, hiện đại hóa ECMAScript, chuyển đổi phần tử cú pháp và ngôn ngữ, các hành động cho biểu thức logic và luồng điều khiển cũng như dọn dẹp mã
Hỗ trợ trình chỉnh sửa cho các loại tệp bổ sung
Khi bạn làm việc với JavaScript và TypeScript, có nhiều loại tệp khác có liên quan. Visual Studio Code đã có hỗ trợ chỉnh sửa cho JSON, HTML, CSS và Markdown. Các tiện ích mở rộng sau bổ sung thêm hỗ trợ trình chỉnh sửa nâng cao
Tiện ích mở rộng npm xác thực Nút đã cài đặt. js được xác định trong các tệp package.json
Tiện ích mở rộng SVG Preview thực hiện chính xác điều đó. hiển thị bản xem trước cho tệp .svg. Bạn có thể xoay và thu phóng hình ảnh trong bản xem trước và nó tự động cập nhật khi bạn chỉnh sửa nguồn SVG
TOML là một định dạng tệp cấu hình nhằm mục đích đơn giản và dễ đọc. Tiện ích mở rộng TOML thậm chí tốt hơn bổ sung hỗ trợ trình chỉnh sửa đầy đủ, bao gồm tô sáng cú pháp, gấp, điều hướng và định dạng
Sắp xếp Nhận xét, TODO và Dấu trang
Trong các dự án phát triển lớn hơn kéo dài nhiều năm và có sự tham gia của nhiều nhà phát triển, việc duy trì tổ chức xung quanh các nhận xét và các mục CẦN LÀM ngày càng trở nên cần thiết. Các phần mở rộng sau đây có thể giúp với điều đó
Tiện ích Nhận xét tốt hơn hiển thị các loại nhận xét khác nhau bằng các màu khác nhau. Nó hỗ trợ các tiền tố như !, ? và Error Lens: Toggle...0
TODO và FIXME dễ dàng bị lãng quên và thất lạc. Tiện ích Todo Tree quét các tệp trong không gian làm việc của bạn để tìm chú thích TODO và FIXME và sắp xếp chúng trong chế độ xem thanh bên. Bạn có thể dễ dàng duyệt chúng theo thư mục và xem lại các mục cần thiết mà bạn chú ý
Với tiện ích mở rộng Dấu trang, bạn có thể lưu và gắn nhãn các vị trí mã nguồn quan trọng và sắp xếp chúng trong bảng điều khiển thanh bên. Điều này có thể hữu ích khi bạn đang khám phá một cơ sở mã phức tạp hoặc khi bạn có các vị trí mà bạn thường xuyên quay lại
thử nghiệm
Viết và chạy thử nghiệm là một hoạt động phát triển quan trọng. Đặc biệt, các bài kiểm tra đơn vị chạy trong IDE rất hữu ích để nhận phản hồi ngay lập tức. Các tiện ích mở rộng sau đây thêm hỗ trợ người chạy thử nghiệm vào Mã VS
Test Explorer là một tập hợp các tiện ích mở rộng tích hợp kiểm tra liền mạch vào Mã VS. Tiện ích mở rộng giao diện người dùng Test Explorer của nó thêm bảng điều khiển bên để chạy thử nghiệm và xem kết quả, đồng thời Thanh trạng thái Test Explorer thêm số lượng thử nghiệm vào thanh trạng thái
Các thành phần giao diện người dùng hiển thị thông tin do bộ điều hợp thử nghiệm tạo ra. Bộ điều hợp nào bạn cần để thử nghiệm tùy thuộc vào khung thử nghiệm của bạn. Đối với JavaScript, có sẵn các tiện ích mở rộng bộ điều hợp thử nghiệm cho các khung thử nghiệm sau
Visual Studio Code đã thêm khả năng thử nghiệm gốc trong phiên bản 1. 59. Bạn có thể bật chúng trong Trình khám phá thử nghiệm bằng cách đặt Error Lens: Toggle...1 thành Error Lens: Toggle...2 trong cài đặt Mã VS
gỡ lỗi
Visual Studio Code đi kèm với một trình gỡ lỗi JavaScript xuất sắc. Nó có thể kết nối với Node. js, , do đó, trong hầu hết các trường hợp, không cần thêm tiện ích mở rộng khi gỡ lỗi JavaScript
Kiểm soát phiên bản
Git là hệ thống kiểm soát phiên bản [VCS] được sử dụng nhiều nhất và có các tiện ích mở rộng tuyệt vời cho VS Code. Bạn cũng có thể tìm các tiện ích mở rộng cho các VCS khác, chẳng hạn như Subversion trên thị trường Mã VS
Tiện ích mở rộng GitLens thêm một số bảng vào thanh bên kiểm soát nguồn và nâng cao trình chỉnh sửa bằng các lớp phủ thông tin. Bảng điều khiển thanh bên giúp bạn quản lý các nhánh, kho lưu trữ, cam kết, lịch sử tệp, điều khiển từ xa và các tiện ích mở rộng của trình chỉnh sửa bao gồm chế độ xem đổ lỗi, chỉ báo thay đổi, ống kính mã tác giả, v.v. GitLens là một tiện ích mở rộng thiết yếu giúp làm việc với Git trong VS Code dễ dàng hơn nhiều
Tiện ích mở rộng Git Graph hiển thị lịch sử Git một cách trực quan trong bảng chỉnh sửa. Bạn có thể mở nó bằng lệnh "View Git Graph". Trong chế độ xem biểu đồ, bạn có thể khám phá các cam kết riêng lẻ và thực hiện nhiều thao tác Git hàng ngày. Ví dụ: bạn có thể kiểm tra các nhánh và cam kết, tạo nhánh, chọn cam kết sơ khai, thực hiện hợp nhất, v.v.
Cơ sở dữ liệu, API REST và Máy khách Docker
Phát triển full-stack JavaScript thường có nghĩa là làm việc với các hệ thống bên ngoài như cơ sở dữ liệu, API REST và Docker. Các tiện ích mở rộng sau đây thêm ứng dụng khách vào Mã VS
Tiện ích mở rộng Máy khách cơ sở dữ liệu cho phép bạn kết nối với MySQL/MariaDB, PostgreSQL, SQLite, Redis và ElasticSearch. Bạn có thể khám phá cơ sở dữ liệu trong bảng điều khiển thanh bên của nó, mở các bảng cơ sở dữ liệu dưới dạng bảng soạn thảo và chạy các truy vấn SQL tùy chỉnh. Nội dung bảng cơ sở dữ liệu có thể chỉnh sửa được. Mọi thay đổi bạn thực hiện sẽ được lưu trữ ngay lập tức trong cơ sở dữ liệu
Tiện ích mở rộng Thunder Client tích hợp ứng dụng khách cho API REST vào Mã VS. Nó là một thay thế nhẹ cho Postman. Bạn có thể gửi bất kỳ loại yêu cầu Error Lens: Toggle...3 nào, xem dữ liệu phản hồi và sắp xếp các yêu cầu của bạn trong các bộ sưu tập
Làm việc với các thùng chứa đã trở thành một phần thiết yếu trong quá trình phát triển hàng ngày của nhiều kỹ sư phần mềm. Với tiện ích mở rộng Docker, bạn có thể khám phá các bộ chứa Docker đang chạy của mình, nhận hỗ trợ trình chỉnh sửa cho các tệp Docker, v.v.
Thưởng
Đây là một tiện ích mở rộng tiền thưởng nhỏ mà tôi thấy rất hữu ích
Bạn có thể chụp ảnh màn hình mã đẹp mắt ngay lập tức với tiện ích mở rộng CodeSnap. Bắt đầu với lệnh Error Lens: Toggle...4, chọn mã bạn muốn chụp màn hình và nhấp vào nút lense
Phần kết luận
Tôi hy vọng bài đăng đã cung cấp cho bạn một vài ý tưởng về tiện ích mở rộng có thể cải thiện trải nghiệm VS Code của bạn. Với Gói mở rộng IDE JavaScript, bạn có thể cài đặt tất cả và sau đó vô hiệu hóa hoặc gỡ cài đặt những gói không phù hợp với nhu cầu của bạn