Bài viết này sẽ giới thiệu đến bạn 10 tiện ích mở rộng Visual Studio Code hữu ích giúp cải thiện đáng kể trải nghiệm phát triển web. 

Visual Studio Code (VsCode) là một trong những trình soạn thảo source code được sử dụng rộng rãi nhất hiện có, với hơn 148K sao trên GitHub. Nhờ tính linh hoạt, là các chương trình mã nguồn mở, đơn giản và có khả năng mở rộng mà VsCode dần trở nên phổ biến.

VSCode có hàng ngàn tiện ích mở rộng mà bạn có thể cài đặt để tăng năng suất và tiết kiệm thời gian làm việc hơn. Tất cả chúng đều có sẵn trong Visual Studio Code và phần lớn hoàn toàn miễn phí. Cùng VietnamWorks inTECH tìm hiểu ngay nhé!

1. Prettier

Prettier là một công cụ hữu ích tự động định dạng code của bạn bằng cách sử dụng các quy tắc cố định và có thể tùy chỉnh. Nó đảm bảo rằng tất cả code của bạn có định dạng nhất quán và có thể giúp thực thi một quy ước kiểu dáng cụ thể cho một project mà nhiều người cùng phát triển.

Tiện ích này mang lại sự tích hợp liền mạch giữa code editor và Prettier, cho phép bạn dễ dàng định dạng code bằng phím tắt hoặc ngay sau khi lưu tệp.

Cùng xem ví dụ minh họa ở bên dưới:

Cài đặt tiện ích tại đây: Prettier — Code formatter — Visual Studio Marketplace

2. JavaScript Booster

Tiện ích mở rộng này nâng cấp Visual Studio Code với các action code để thực hiện các tác vụ tái cấu trúc phổ biến xảy ra khi lập trình với JavaScript.

Chúng là hàng tá action code bao gồm: thay thế một câu lệnh bằng toán tử bậc ba: if...else

Tách một khai báo và khởi tạo thành nhiều câu lệnh:

và chuyển đổi một function thành arrow function:

Cài đặt tại đây: JavaScript Booster — Visual Studio Marketplace

3. ESLint

ESLint là một công cụ tìm và khắc phục các sự cố trong code JavaScript. Nó liên quan đến cả vấn đề chất lượng code và phong cách mã hóa, giúp xác định các mẫu lập trình có khả năng tạo ra các lỗi phức tạp.

Tiện ích này còn được tích hợp với code editor. Sự tích hợp này cho phép ESLint thông báo cho bạn về các vấn đề ngay trong editor.

Ví dụ: nó có thể sử dụng đường lượn sóng màu đỏ để thông báo lỗi:

Bạn xem chi tiết về lỗi bằng cách di chuột qua đường màu đỏ:

Chúng ta cũng có thể sử dụng tab Problems để xem tất cả các lỗi trong mọi file tại không gian làm việc VSCode hiện tại.

Cài đặt tại đây: ESLint — Visual Studio Marketplace

4. GitLens

GitLens là một tiện ích mở rộng mạnh mẽ khác giúp bạn tận dụng tối đa quyền kiểm soát Git source trong Visual Studio Code.

GitLens hiển thị các chế độ xem bao gồm kho dữ liệu thiết yếu và thông tin trên file hiện tại, chẳng hạn như lịch sử file, commit, branch và remotes.

Đặt con trỏ trên bất kỳ dòng nào trong editor và GitLens sẽ hiển thị thông tin về commits mới nhất ở dòng được thay đổi:

Cài đặt: GitLens — Git supercharged — Visual Studio Marketplace

5. Live Server

Tiện ích này sẽ giúp server tự động tải lại khi một tệp liên quan được thay đổi.

Trong bản demo bên dưới, một server mới được khởi chạy nhanh chóng để hiển thị nội dung của file index.html. Sửa đổi index.html và lưu file, server sẽ ngay lập tức được reload. Điều này giúp tiết kiệm thời gian và bạn không phải reload trang theo cách thủ công như trước nữa.

Như bạn đã thấy trong bản demo, bạn có thể dễ dàng khởi chạy một server mới bằng cách sử dụng Open with Live Server trong menu ngữ cảnh cho một file trong VSCode Explorer.

Cài đặt: Live Server — Visual Studio Marketplace

6. CSS Peek

CSS Peek Extension cho phép bạn nhanh chóng xem các định nghĩa kiểu CSS cho các class names và ID khác nhau được gán trong HTML.

Có ba cách để sử dụng CSS Peek:

  • Bạn có thể giữ phím Ctrl và di chuột qua class names hoặc ID để xem qua định nghĩa của nó.

  • Bạn có thể sử dụng phím tắt để mở cửa sổ mô tả cách liên tục để hiển thị các mô tả CSS của class names hoặc ID.

  • Bạn có thể sử dụng phím tắt để điều hướng đến vị trí của định nghĩa trong tệp CSS của nó.

Dưới đây là ví dụ minh họa:

Cài đặt: Xem nhanh CSS — Visual Studio Marketplace

7. Intellisense for CSS Class Names in HTML

Tiện ích mở rộng này có thể hoạt động song song với CSS Peek, nó cung cấp code hoàn chỉnh cho thuộc tính class HTML từ các định nghĩa CSS hiện có, được tìm thấy trong không gian làm việc Visual Studio Code.

Đây là một tiện ích mở rộng cực kỳ hữu ích khi thư viện CSS của bên thứ ba chứa hàng trăm class.

Cài đặt: IntelliSense cho tên lớp CSS trong HTML — Visual Studio Marketplace

8. JavaScript (ES6) Code Snippets

Như tên gọi, đây là một tiện ích mở rộng được tải đầy đủ với hàng nghìn code snippet giúp tiết kiệm thời gian cho JavaScript, theo cú pháp ES6.

Dưới đây là bản demo về imp và imd snippets từ tiện ích mở rộng này được sử dụng để nhanh chóng nhập hai mô-đun với cú pháp ES6.

Cài đặt: Đoạn mã JavaScript (ES6) — Visual Studio Marketplace

9. Visual Studio Intellicode

IntelliCode là một công cụ tạo ra các đề xuất code hoàn chỉnh. Nó thực hiện điều này bằng cách sử dụng một mô hình AI đã được đào tạo trên hàng ngàn dự án open source phổ biến trên GitHub.

Khi bạn nhập ký tự . để truy cập một phương thức hoặc trường đối tượng, IntelliCode sẽ đề xuất một danh sách các đối tượng có khả năng được sử dụng. Các mục trong danh sách được biểu thị bằng ký hiệu ngôi sao, như ví dụ trong bản demo sau.

IntelliCode có sẵn cho JavaScript, TypeScript, Python và một số ngôn ngữ khác.

Cài đặt: IntelliCode — Visual Studio Marketplace

10. VSCode Icons

Tệp icon có sẵn để tùy chỉnh giao diện của các file thuộc các loại khác nhau trong Visual Studio Code. Chúng nâng cao giao diện của ứng dụng và giúp dễ dàng xác định và phân biệt các file thuộc nhiều loại khác nhau.

VSCode Icons là một trong những tiện ích về gói icon phổ biến nhất, với bộ icon rất toàn diện, được “bảo chứng” bởi hơn 11 triệu lượt tải xuống.

Tiện ích này cung cấp các icon riêng biệt cho các file và thư mục có tên cụ thể, bao gồm: package.json, node_modules và .prettierrc.

Cài đặt: vscode-icons — Visual Studio Marketplace

Lời kết

Như vậy, chúng ta vừa điểm qua 10 tiện ích mở rộng thiết yếu hỗ trợ phát triển web trong Visual Studio Code. Nếu thấy hay, hãy nhớ chia sẻ bài viết cho bạn bè cùng biết nhé!

VietnamWorks inTECH