Login

Những extension VS Code hữu ích cho lập trình viên (và cách chọn)

  • author-image

    Nguyễn Đình Cường

  • blog-tag
  • blog-comment 0 comment
  • created-date 09 Nov, 2026
blog-thumbnail

Sức mạnh của VS Code đến từ kho extension khổng lồ. Nhưng cài quá nhiều sẽ khiến editor chậm và rối, còn cài đúng thì năng suất tăng đáng kể. Bài này giới thiệu các nhóm extension thực sự đáng cài và nguyên tắc để chọn lọc.

Nhóm giữ code sạch và nhất quán

  • Prettier: trình định dạng code tự động cho JavaScript, TypeScript, CSS, HTML, JSON, Markdown. Bạn bật "Format on Save" là xong, không còn tranh luận về dấu nháy hay thụt lề.
  • ESLint: phát hiện lỗi và code kém chất lượng trong JavaScript/TypeScript ngay khi bạn gõ, gạch chân màu đỏ hoặc vàng.
  • EditorConfig for VS Code: đọc file .editorconfig để cả nhóm dùng cùng quy ước thụt lề, kết thúc dòng dù dùng editor khác nhau.
  • Code Spell Checker: bắt lỗi chính tả trong tên biến và comment, tiếng Anh sai chính tả trong code rất khó tìm.

Nhóm làm việc với Git

  • GitLens: hiển thị ai sửa dòng code nào, khi nào, kèm commit message ngay cạnh dòng. Rất hữu ích để hiểu vì sao đoạn code tồn tại.
  • Git Graph: xem lịch sử và các nhánh dưới dạng biểu đồ trực quan.
  • GitHub Pull Requests (hoặc GitLab Workflow): xem và review pull request ngay trong editor.

Nhóm theo ngôn ngữ và framework

Mỗi ngôn ngữ có extension chính thức hoặc phổ biến, hãy cài khi bạn thực sự dùng:

Ngôn ngữ / công nghệExtension thường dùng
PythonPython (của Microsoft), Pylance
PHPPHP Intelephense
JavaExtension Pack for Java
C#C# Dev Kit
GoGo (của đội Go)
DockerDocker, Dev Containers
Tailwind CSSTailwind CSS IntelliSense
Flutter / DartDart, Flutter

Nhóm tiện ích hàng ngày

  • Live Server: mở trang HTML với tự động tải lại khi lưu, tiện cho người học web.
  • REST Client hoặc Thunder Client: gửi request HTTP ngay trong editor để thử API.
  • Error Lens: hiển thị lỗi và cảnh báo ngay cuối dòng thay vì phải rê chuột.
  • Path Intellisense: gợi ý đường dẫn file khi import.
  • Auto Rename Tag: đổi thẻ mở thì thẻ đóng đổi theo trong HTML/JSX.
  • Markdown All in One: hỗ trợ viết README và tài liệu bằng Markdown.
  • Material Icon Theme: icon file dễ phân biệt, nhìn cây thư mục nhanh hơn.

Cấu hình Prettier và format khi lưu

Sau khi cài Prettier, bạn thêm vào settings.json:

{"editor.formatOnSave": true,"editor.defaultFormatter": "esbenp.prettier-vscode"}

Để cả nhóm dùng chung quy tắc, tạo file .prettierrc ở thư mục gốc dự án:

{"singleQuote": true,"semi": true,"printWidth": 100}

Nguyên tắc chọn extension

  1. Kiểm tra nguồn: ưu tiên extension có nhà phát hành xác minh, nhiều lượt cài và còn được cập nhật. Extension có quyền truy cập file của bạn, nên hãy cẩn trọng với bản ít người dùng.
  2. Chỉ cài khi có nhu cầu thật: mỗi extension tiêu tốn một ít bộ nhớ và thời gian khởi động.
  3. Dùng Profile: VS Code cho phép tạo các profile riêng (ví dụ Web, Python), mỗi profile bật bộ extension khác nhau.
  4. Tắt theo workspace: có thể vô hiệu hóa extension chỉ cho một dự án nếu không cần.
  5. Dọn dẹp định kỳ: vài tháng xem lại danh sách, gỡ những cái ít dùng.

Đồng bộ giữa các máy

Bật Settings Sync trong VS Code bằng tài khoản GitHub hoặc Microsoft để đồng bộ cài đặt, phím tắt và extension giữa nhiều máy. Đổi máy mới chỉ mất vài phút để có lại môi trường quen thuộc.

Kết luận

Bộ extension tốt là bộ nhỏ gọn phục vụ đúng công việc của bạn: một công cụ định dạng, một linter, GitLens và vài tiện ích theo ngôn ngữ đã là đủ cho phần lớn người dùng. Đừng biến editor thành cửa hàng ứng dụng, hãy giữ nó nhanh và dễ chịu.

Nếu bạn đang dựng môi trường để bắt đầu học, các khóa học trên codebem.com có hướng dẫn cài đặt công cụ ngay từ những bài đầu.

author_photo
Nguyễn Đình Cường

0 comment