Những extensions tốt nhất cho Visual Studio Code

Tóm tắt

Bài viết giới thiệu 16 extensions tốt nhất cho Visual Studio Code được sử dụng hàng ngày, bao gồm GitLens (quản lý Git), Git Graph (visualize Git history), Prettier (code formatter), ESLint (code linter), Live Server (local development server), và nhiều extensions hữu ích khác. Mỗi extension được mô tả chi tiết về chức năng và cách sử dụng, giúp developers tăng năng suất và cải thiện trải nghiệm làm việc với VS Code.

Visual Studio Code là một trình chỉnh sửa mã nguồn, nhẹ nhưng mạnh mẽ, hỗ trợ cho đa dạng các hệ điều hành: Windows, macOS và Linux. Nó hỗ trợ cho JavaScript, TypeScript và Node.js và có một hệ sinh thái phong phú các tiện ích mở rộng cho các ngôn ngữ khác (chẳng hạn như C++, C#, Java, Python, PHP, Go) và các runtimes (chẳng hạn như .NET và Unity).

Trong bài viết này, tôi sẽ liệt kê một số tiện ích mở rộng tốt nhất cho VS Code mà tôi sử dụng hàng ngày. Tôi hy vọng nó sẽ hữu ích cho bạn.

1. GitLens

GitLens là một extension cho Visual Studio Code, cho phép bạn tăng cường khả năng làm việc với Git trong VS Code1. Extension này giúp bạn hiểu rõ hơn về code, biết ai, tại sao và khi nào một dòng hoặc một khối code được thay đổi.

• Link: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
• Chức năng:
  • Hiển thị thông tin blame cho dòng code hiện tại hoặc cho các khối code bằng CodeLens.
  • Hiển thị thông tin chi tiết về commit và stash trong Side Bar.
  • Hiển thị lịch sử và sự phát triển của các repository, commit và file.
  • Hỗ trợ tìm kiếm, so sánh và quản lý các commit, branch, tag, stash, v.v...
  • Hỗ trợ giao tiếp với các dịch vụ Git như GitHub, GitLab, Bitbucket, v.v...
  • Hỗ trợ tích hợp với Live Share để cộng tác trực tuyến.
  • GitLens giúp bạn hiểu rõ hơn về mã nguồn trong các dự án sử dụng Git. Đây là một tiện ích mở rộng không thể thiếu đối với các lập trình viên sử dụng Git và Visual Studio Code.

2. Git Graph

Git Graph là một extension cho Visual Studio Code, cho phép bạn xem một đồ thị Git của repository của bạn, và dễ dàng thực hiện các câu lệnh Git từ đồ thị. Extension này giúp bạn trực quan hóa và quản lý các commit, branch, tag, stash, v.v...

• Link: https://marketplace.visualstudio.com/items?itemName=mhutchie.git-graph
• Chức năng:
  • Hiển thị đồ thị Git với các commit, branch, tag, stash, remote, v.v...
  • Hỗ trợ thực hiện các câu lệnh Git bằng cách nhấn chuột phải lên một commit, branch, tag, v.v... Các câu lệnh Git bao gồm: Create, Checkout, Delete, Fetch, Merge, Pull, Push, Rebase, Rename & Reset; Add, Delete & Push Tags; Checkout, Cherry Pick, Drop, Merge & Revert Commits; Clean, Reset & Stash các thay đổi chưa commit; apply, tạo branch, drop và pop stash; v.v...
  • Hiển thị chi tiết commit và các thay đổi file bằng cách nhấn vào một commit. Trên giao diện chi tiết commit bạn có thể: xem sự khác biệt của bất kỳ file nào được thay đổi bằng cách nhấn vào nó; mở phiên bản hiện tại của bất kỳ file nào bị ảnh hưởng trong commit; sao chép đường dẫn của bất kỳ file nào bị ảnh hưởng trong commit vào clipboard; nhấn vào bất kỳ url HTTP/HTTPS nào trong phần nội dung của commit để mở nó trong trình duyệt web mặc định của bạn.
  • So sánh bất kỳ hai commit nào bằng cách nhấn vào một commit và sau đó nhấn CTRL/CMD + nhấn vào một commit khác. Trên giao diện so sánh commit bạn có thể: xem sự khác biệt của bất kỳ file nào được thay đổi giữa hai commit được chọn bằng cách nhấn vào nó; mở phiên bản hiện tại của bất kỳ file nào bị ảnh hưởng giữa hai commit được chọn; sao chép đường dẫn của bất kỳ file nào bị ảnh hưởng giữa hai commit được chọn vào clipboard.
  • Lọc các branch được hiển thị trong Git Graph sử dụng menu Branches. Các tùy chọn để lọc các branch là: hiển thị tất cả các branch; chọn một hoặc nhiều branch để xem; chọn từ một mảng tùy chỉnh của các mẫu glob (bằng cách thiết lập git-graph.customBranchGlobPatterns).
  • Và còn nhiều tính năng khác...

Đây là một extension tuyệt vời cho các lập trình viên sử dụng Git và Visual Studio Code, bởi vì với Git Graph, bạn không cần dùng thêm một ứng dụng nào khác để quản lý Git. Tất cả đều có thể thực hiện được trên VS Code, một cách vô cùng trực quan và dễ dàng.

3. Git History

Git History là một extension cho Visual Studio Code, cho phép bạn xem và tìm kiếm lịch sử Git của repository, branch, file hoặc dòng code1. Extension này có thể giúp bạn khám phá và phân tích các commit, branch, tag, stash, v.v...

• Link: https://marketplace.visualstudio.com/items?itemName=donjayamanne.githistory
• Chức năng:
  • Xem và tìm kiếm git log cùng với biểu đồ và thông tin chi tiết.
  • Xem bản sao trước đó của tập tin.
  • Xem và tìm kiếm lịch sử: Xem lịch sử của một hoặc tất cả các branch; Xem lịch sử của một tập tin; Xem lịch sử của một dòng trong tệp (Git Blame); Xem lịch sử của một tác giả.
  • So sánh: các branch, các commit, các file giữa các commit.
  • Hỗ trợ GitHub avatar, cherry-pick commit, tạo stash, branch, merge, rebase, reset, revert, v.v...

4. Prettier - Code formatter

Prettier là một extension cho Visual Studio Code, giúp bạn định dạng code một cách tự động và nhất quán. Prettier hỗ trợ nhiều ngôn ngữ lập trình như JavaScript, TypeScript, CSS, HTML, Markdown và nhiều ngôn ngữ khác. Prettier là một công cụ hữu ích để tạo ra những đoạn code đẹp mắt và dễ đọc hơn.

• Link: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
• Chức năng:
  • Định dạng code một cách tự động và nhất quán theo các quy tắc được định nghĩa trước.
  • Hỗ trợ nhiều ngôn ngữ lập trình như JavaScript, TypeScript, CSS, HTML, Markdown và nhiều ngôn ngữ khác.
  • Tích hợp với hầu hết các trình biên dịch như VS Code, Webstorm, Atom, Sublime Text và nhiều trình biên dịch khác.
  • Dễ dàng sử dụng chỉ với một vài thiết lập hoặc có thể tùy biến theo ý muốn.
  • Giúp code dễ đọc và dễ bảo trì hơn.

5. ESLint

ESlint là một linter dành cho ngôn ngữ lập trình JavaScript được viết bằng Node.js. ESlint thực sự rất hữu dụng bởi vì JavaScript là một ngôn ngữ thông dịch và được dịch trực tiếp thành mã máy, rất nhiều lỗi chỉ có thể phát hiện được trong thời gian chạy project. ESlint giúp bạn phân tích code, tìm những lỗi lặt vặt, không tuân thủ coding style, sai coding convention, và đưa ra những đề xuất cải tiến.

• Link: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint
• Chức năng:
  • Phân tích code JavaScript, tìm những lỗi lặt vặt, không tuân thủ coding style, sai coding convention, và đưa ra những đề xuất cải tiến.
  • Giúp bạn viết code JavaScript chất lượng hơn, dễ đọc và bảo trì hơn.
  • Hỗ trợ các plugin để mở rộng hoạt động của ESlint: eslint-plugin-react, eslint-plugin-vue, eslint-plugin-angular, v.v...
  • Hỗ trợ các parser khác nhau để phân tích cú pháp của JavaScript: esprima, babel-eslint, @typescript-eslint/parser, v.v...
  • Hỗ trợ các processor để xử lý các file có chứa nhiều ngôn ngữ khác nhau: markdown, html, vue, v.v...
  • Hỗ trợ các config có sẵn được sử dụng bởi các project nổi tiếng, ví dụ như eslint:recommended, airbnb, google, standard, v.v...

6. Auto Rename Tag

Extension Auto Rename Tag là một extension rất hữu ích cho các nhà phát triển web sử dụng VS Code. Như tên gợi ý, Auto Rename Tag sẽ tự động đổi tên thẻ đóng khi bạn cập nhật thẻ mở và ngược lại. Bạn sẽ thấy extension này hữu ích không chỉ với HTML, mà còn với React với JSX.

• Link: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-rename-tag
• Chức năng: Tự động đổi tên thẻ đóng khi bạn cập nhật thẻ mở và ngược lại.

7. Live Server

Extension Live Server là một plugin của Visual Studio Code, giúp bạn khởi chạy một máy chủ phát triển cục bộ với tính năng tải lại trình duyệt tự động cho các trang tĩnh và động.

• Link: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
• Chức năng:
  • Khởi chạy một máy chủ phát triển cục bộ với tính năng tải lại trình duyệt tự động cho các trang tĩnh và động.
  • Hỗ trợ nhiều ngôn ngữ lập trình như HTML, CSS, JavaScript, TypeScript, Markdown, v.v...
  • Hỗ trợ nhiều trình duyệt như Chrome, Firefox, Edge, v.v...
  • Hỗ trợ nhiều tính năng như Live Reload, Hot Reload, HTTPS, CORS, v.v...

8. Path Intellisense

Extension Path Intellisense là một plugin của Visual Studio Code, giúp bạn tự động hoàn thành tên tệp.

• Link: https://marketplace.visualstudio.com/items?itemName=christian-kohler.path-intellisense
• Chức năng:
  • Tự động hoàn thành tên tệp.
  • Loại bỏ phần mở rộng tệp theo mặc định nếu câu lệnh là một câu lệnh import.
  • Hỗ trợ các thư viện Node.js.
  • Tự động thêm dấu gạch chéo khi điều hướng đến thư mục.
  • Tự động kích hoạt gợi ý tiếp theo khi chọn một gợi ý...

9. Material Icon Theme

Extension Material Icon Theme là một extension cho phép bạn thay đổi các biểu tượng của file và folder theo phong cách Material Design. Bạn có thể tùy chỉnh màu sắc, hình dạng và opacity của các biểu tượng, cũng như thêm các biểu tượng tùy chỉnh cho các file hoặc folder cụ thể.

• Link: https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme
• Chức năng:
  • Thay đổi các biểu tượng của file và folder theo phong cách Material Design, một hệ thống thiết kế đơn giản, hiện đại và thân thiện.
  • Tùy chỉnh màu sắc, hình dạng và opacity của các biểu tượng bằng cách sử dụng command palette hoặc user settings.
  • Thay đổi theme của các biểu tượng folder, có nhiều lựa chọn như classic, specific, blue, none….
  • Thêm các biểu tượng tùy chỉnh cho các file hoặc folder cụ thể bằng cách sử dụng user settings. Bạn có thể thêm các biểu tượng SVG của riêng bạn nếu muốn.
  • Thay đổi saturation của các biểu tượng, có thể làm chúng trông xám xịt hoặc hoàn toàn xám.

10. Live Share

Extension Live Share là một extension cho phép bạn cộng tác với những người khác trên cùng một dự án một cách thời gian thực. Bạn có thể chia sẻ phiên làm việc của bạn với ai đó, cho phép họ chỉnh sửa code cũng như chia sẻ server và phiên gỡ lỗi.

• Link: https://marketplace.visualstudio.com/items?itemName=MS-vsliveshare.vsliveshare
• Chức năng:
  • Chỉnh sửa và gỡ lỗi cùng lúc, không cần phải đồng bộ code hoặc cấu hình các công cụ, thiết lập hoặc môi trường giống nhau.
  • Nhìn thấy con trỏ, vị trí và hành động của người khác trong file hiện tại.
  • Chuyển đổi giữa việc theo dõi hoặc khám phá các ý tưởng/nhiệm vụ một cách độc lập.
  • Sử dụng các tính năng gỡ lỗi của VS Code, như hovers, locals và watches, the stack trace hoặc the debug console.
  • Chia sẻ terminal và localhost web apps.
  • Chat với người khác trong phiên làm việc.

11. Settings Sync

Extension Setting Sync cho phép bạn đồng bộ các cấu hình như settings, keybindings, extensions, user snippets và UI state giữa các máy tính khác nhau. Bạn có thể sử dụng tài khoản Microsoft hoặc GitHub để đăng nhập và lưu trữ các cấu hình của bạn trên đám mây.

• Link: https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync
• Chức năng:
  • Đồng bộ tự động hoặc thủ công các cấu hình của bạn.
  • Tạo và quản lý nhiều profile cấu hình khác nhau.
  • Xem lịch sử và phiên bản của các cấu hình trên GitHub Gist.
  • Chỉnh sửa và tùy biến các cài đặt đồng bộ.
  • Đồng bộ các cài đặt theo từng nền tảng (Windows, Mac, Linux).

12. Quokka.js

Extension Quokka.js là một extension cho Visual Studio Code, cho phép bạn viết và chạy JavaScript / TypeScript một cách nhanh chóng và dễ dàng. Giá trị của các biến và biểu thức được cập nhật và hiển thị ngay bên cạnh code của bạn, khi bạn đang gõ.

• Link: https://marketplace.visualstudio.com/items?itemName=WallabyJs.quokka-vscode
• Chức năng:
  • Chạy code ngay lập tức khi bạn gõ, không cần lưu file hoặc chuyển sang terminal.
  • Hiển thị các thông báo lỗi, console log và giá trị của các biểu thức ngay trong code.
  • Hiển thị chỉ số bao phủ code, cho biết code nào đã được chạy, code nào chưa hoặc chỉ chạy một phần.
  • Dùng Time Machine để di chuyển qua lại giữa các dòng code, xem giá trị của các biến, sửa code và bước vào, bước qua hoặc bước ra khỏi code.
  • Dùng Codeclip để chia sẻ code, kết quả và ghi âm Time Machine với mọi người.
  • Dùng Code Stories để xem code đang chạy trong một giao diện liên tục, chọn một biến hoặc biểu thức để xem giá trị của nó.
  • Dùng Value Explorer để xem và khám phá các giá trị không phải kiểu nguyên thủy trong một cây dễ dàng điều hướng.

13. Code Spell Checker

Extension Code Spell Checker là một extension cho Visual Studio Code, cho phép bạn kiểm tra chính tả của code và tài liệu. Extension này có thể giúp bạn bắt được những lỗi chính tả thường gặp trong khi giảm thiểu số lượng các trường hợp báo lỗi sai

• Link: https://marketplace.visualstudio.com/items?itemName=streetsidesoftware.code-spell-checker
• Chức năng:
  • Hỗ trợ nhiều ngôn ngữ khác nhau, có thể cài đặt thêm các từ điển bổ sung.
  • Hỗ trợ các loại file khác nhau, như JavaScript, TypeScript, HTML, CSS, Markdown, LaTeX, v.v...
  • Cho phép tùy chỉnh danh sách các từ bỏ qua hoặc thêm vào từ điển.
  • Cho phép kiểm tra chính tả trong các comment, string hoặc cả file.
  • Cho phép sửa lỗi chính tả bằng cách gợi ý các từ đúng hoặc cho phép bạn nhập từ mới.

14. Better Comments

Extension Better Comments là một extension cho Visual Studio Code, cho phép bạn tùy chỉnh font chữ và độ trong suốt của các comment trong code. Extension này cũng thêm bốn loại comment khác nhau, mỗi loại có màu nền riêng biệt. Bạn có thể sử dụng các comment này để ghi chú, cảnh báo, lưu ý hoặc tạo các TODO list.

• Link: https://marketplace.visualstudio.com/items?itemName=aaron-bond.better-comments
• Chức năng:
  • Hỗ trợ nhiều ngôn ngữ lập trình, như C#, F#, VB.NET, C/C++, JavaScript, Python, HTML, và XAML.
  • Cho phép thay đổi font chữ, kích thước, in nghiêng và độ trong suốt của các comment.
  • Cho phép sử dụng các ký tự đặc biệt để đánh dấu các loại comment khác nhau, như ! cho quan trọng, ? cho câu hỏi, todo cho công việc cần làm, x hoặc X hoặc // cho gạch ngang.
  • Cho phép tùy chỉnh màu nền và font chữ cho mỗi loại comment.
  • Cho phép gạch chân hoặc chỉ tô màu từ khóa todo cho comment công việc.

15. Code Runner

Extension Code Runner cho phép bạn chạy code của nhiều ngôn ngữ lập trình khác nhau một cách nhanh chóng và tiện lợi1. Extension này có thể giúp bạn kiểm tra và thử nghiệm code của bạn mà không cần phải chuyển sang terminal hoặc môi trường khác.

• Link: https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner
• Chức năng:
  • Hỗ trợ hơn 50 ngôn ngữ lập trình, như C, C++, Java, JS, PHP, Python, Perl, Ruby, Go, Lua, Groovy, PowerShell, CMD, BASH, F#, C#, VBScript, TypeScript, CoffeeScript, Scala, Swift, Julia, Crystal, OCaml, R, AppleScript, Elixir, VB.NET, Clojure, Haxe, Obj-C, Rust, Racket, Scheme, AutoHotkey, AutoIt, Kotlin, Dart, Pascal, Haskell và Nim.
  • Cho phép chạy code bằng cách nhấn nút Run Code hoặc sử dụng phím tắt Ctrl+Alt+N.
  • Cho phép dừng chạy code bằng cách nhấn nút Stop Code hoặc sử dụng phím tắt Ctrl+Alt+M.
  • Cho phép chạy code của file hiện tại hoặc của đoạn code được chọn.
  • Cho phép tùy chỉnh các cài đặt như thư mục làm việc hiện tại, lệnh chạy code cho từng ngôn ngữ hoặc cho toàn bộ extension.

16. REST Client

Extension REST Client là một extension cho Visual Studio Code, cho phép bạn gửi các yêu cầu HTTP và xem các phản hồi HTTP một cách dễ dàng và trực quan. Extension này có thể giúp bạn kiểm tra và phát triển các API RESTful mà không cần sử dụng các công cụ bên ngoài.

• Link: https://marketplace.visualstudio.com/items?itemName=humao.rest-client
• Chức năng:
  • Hỗ trợ gửi các yêu cầu HTTP với các phương thức khác nhau: GET, POST, PUT, DELETE, PATCH, HEAD, OPTIONS, v.v...
  • Hỗ trợ gửi các yêu cầu HTTP với các loại nội dung khác nhau: form-data, x-www-form-urlencoded, raw, binary, v.v...
  • Hỗ trợ gửi các yêu cầu HTTP với các tiêu đề (headers), tham số (parameters), biến (variables), chứng thực (authentication), v.v...
  • Hỗ trợ xem các phản hồi HTTP với các định dạng khác nhau: JSON, HTML, XML, v.v...
  • Hỗ trợ xem các thông tin chi tiết của phản hồi HTTP: mã trạng thái (status code), thời gian phản hồi (response time), kích thước phản hồi (response size), v.v...

Disclaimer 🔵

Nội dung bài viết này có tham khảo thêm từ Bing AI, nếu có bất kỳ vấn đề nào liên quan đến bản quyền, vui lòng liên hệ với tôi để được gỡ bỏ.