Visual Studio Code là một mã nguồn mở, được phát triển bởi Microsoft. Công cụ này sẽ giúp bạn phát triển các dự án lớn và phức tạp, đặc biệt là các extension mà Visual Studio Code cung cấp. Bài viết dưới đây sẽ đề cập đến các extension phổ biến dành cho Visual Studio Code để giúp bạn có thể thêm ngôn ngữ, gỡ lỗi và cài đặt các chức năng mới để hỗ trợ quá trình phát triển web.

Prettier

Prettier là một công cụ giúp bạn định dạng code một cách tự động và tạo ra một phong cách code chung cho team lập trình thông qua quy tắc riêng được quy định bởi extension. Nó cũng hỗ trợ cho đa dạng loại ngôn ngữ như là JavaScript, TypeScript, Flow, JSX, JSON, HTML, Vue, Angular…

Cài đặt Prettier cho Visual Studio Code sẽ tạo ra sự liền mạch giữa code editor và Prettier, cho phép bạn dễ dàng format code bằng phím tắt hoặc ngay sau khi lưu tệp.

JavaScript Booster

JavaScript Booster là một công cụ tái cấu trúc mã được phát triển bởi Stephan Burguchev. Công cụ này sẽ tự động refactoring lại đoạn code theo đúng chuẩn clean code mà các chuyên gia khuyên dùng.

Nó có một số tính năng code actions như chuyển đổi var thành const hoặc let, loại bỏ các statements thừa, hợp nhất khai báo và khởi tạo. Lấy ý tưởng từ WebStorm, cho đến nay, nó đã có hơn 74 nghìn lượt cài đặt.

ESLint

ESLint là một công cụ dùng để tìm và khắc phục sự cố trong code JavaScript của bạn. Nó xử lý các vấn đề về chất lượng code và code style, từ đó có thể xác định được các pattern tạo ra các lỗi phức tạp.

ESLint extension for Visual Studio Code cho phép kết hợp ESLint với code editor để tự động cảnh báo nếu gặp lỗi ngay trong editor, mỗi khi bạn viết code.

GitLens

GitLens là một tiện ích mở rộng để giúp bạn tận dụng tối đa khả năng kiểm soát source trong Visual Studio Code. Với công cụ này, bạn sẽ không còn phải cài thêm một tool riêng để hỗ trợ quản lý git như SourceTree, GitHub Desktop…Thay vào đó, bạn có thể thao tác với git trực tiếp ngay trong Visual Studio Code.

Live Server

Live Server là một tiện ích mở rộng của Visual Studio Code , khi sử dụng tiện ích này bạn có thể khởi động Local Server để xem file html chỉ bằng một cái nhấp chuột. Server sẽ tự động reload ngay sau khi tệp được liên kết bị thay đổi.

CSS Peek

CSS Peek là một tiện ích mở rộng giúp bạn xem CSS style definitions một cách nhanh chóng cho các class name và ID được chỉ định trong HTML

Có 3 cách sử dụng CSS Peek:

  • Cách 1: Giữ phím ctrl và đưa chuột vào class name hoặc ID của một thẻ HTML, nó hiển thị thông tin CSS tương ứng.
  • Cách 2: Sử dụng phím tắt để mở cửa sổ hiển thị tệp CSS mà có định nghĩa style tương ứng với class name đó.
  • Cách 3: Sử dụng phím tắt để điều hướng đến vị trí của definition trong tệp CSS của nó.

IntelliSense for CSS class names in HTML

Tiện ích Intellisense for CSS Class Names in HTML sẽ tự động gợi ý những class name phù hợp mà đã được định nghĩa trong css. Tiện ích này sẽ đọc các file CSS từ workspace (local) hoặc các phần CSS online trên mạng dựa vào phần tử link bạn định nghĩa trong file *.html.

Các tính năng của extension:

  • Hỗ trợ tự động hoàn thành code CSS class (css trong html và từ file *.css trong workspace)
  • Hỗ trợ cả external CSS được liên kết bằng thuộc tính link trong html header.
  • Hỗ trợ cú pháp Emmet. (mặc định bị tắt đi)
  • Hỗ trợ TypeScript React, JavaScript và JavaScript React.
  • Hỗ trợ CSS, SASS, SCSS.
  • Tính năng cache và re-cache thủ công các class css

>>> Tham khảo Các câu hỏi về React thường gặp khi phỏng vấn.

JavaScript (ES6) Code Snippets

Đây là một tiện ích mở rộng với các đoạn code tiết kiệm thời gian cho JavaScript trong ES6 syntax. Javascript (ES6) code snippets cho phép chúng ta sử dụng và tạo các lệnh tắt cho những việc làm đi làm lại.

Visual Studio Intellicode

Trí tuệ nhân tạo phát triển để tăng năng suất làm việc ở tất cả ngành nghề và lĩnh vực IT cũng không ngoại lệ. Visual Studio IntelliCode là extension được phát triển bởi Microsoft DevLabs, có khả năng tạo ra các gợi ý để hoàn thành code phù hợp với ngữ cảnh. Nó thực hiện điều này bằng cách sử dụng mô hình AI đã được đào tạo trên hàng nghìn dự án nguồn mở phổ biến trên GitHub. Hiện nay, Visual Studio IntelliCode hỗ trợ JavaScript/TypeScript, Java và Python. 

Giả sử khi bạn gõ ký tự “.”, nó sẽ gợi ý ra các đối tượng phù hợp với tình huống hiện tại. Các mục trong danh sách được biểu thị bằng ký hiệu ngôi sao, như minh họa trong bản trình diễn sau.

Visual Studio Code Icons

Visual Studio Code Icons là một trong những tiện ích icon pack phổ biến nhất, có hơn 11 triệu lượt tải xuống. Các icon pack có sẵn để tùy chỉnh giao diện của các loại tệp khác nhau trong Visual Studio Code. Chúng nâng cao giao diện của ứng dụng, giúp dễ dàng xác định và phân biệt các loại tệp khác nhau.

Như vậy, qua bài viết này, các lập trình viên đã có thể bỏ túi thêm cho mình những extension hữu ích để ứng dụng vào công việc. Hy vọng những công cụ này có thể giúp các lập trình viên làm việc hiệu quả hơn.