9 VSCode extensions giúp dev tăng gấp đôi năng suất
Visual Studio Code (VSCode) là editor phổ biến nhất hiện nay với hơn 70% developer sử dụng thường xuyên (theo survey của Stack Overflow). Điểm mạnh nhất của VSCode là ecosystem extension cực lớn – bạn có thể biến nó thành một IDE full-power, một công cụ viết blog, hoặc thậm chí một môi trường quản lý project.
Trong bài viết này, mình sẽ chia sẻ 9 extension hữu ích nhất mà mình đã dùng nhiều năm và thấy thực sự tăng năng suất lập trình. Không chỉ liệt kê tên, mình sẽ đi sâu vào:
Chúng giúp ích như thế nào trong công việc hàng ngày.
Cách cài & config chi tiết.
Kịch bản thực tế khi sử dụng trong team.
1. GitLens — Supercharged Git
Công dụng:
- Hiển thị blame ngay cạnh dòng code: ai sửa dòng này, commit message là gì.
- Xem lịch sử commit chi tiết của file, branch.
- Có Commit Graph trực quan, dễ theo dõi nhánh nào merge vào đâu.
Ví dụ thực tế:
Bạn mở một file cũ trong project và thấy một đoạn logic khó hiểu. Bình thường bạn sẽ git blame
rồi git show
để biết ai viết và lý do commit. Với GitLens, chỉ cần rê chuột vào dòng, bạn sẽ thấy:
"huynv - Fix bug with date parsing"
=> Biết ngay commit và có link tới PR để đọc thêm.
Tip:
- Bật Current Line Blame để luôn thấy tác giả ở dòng hiện tại.
- Dùng panel Commit Graph để hình dung dòng chảy code thay vì
git log --graph
.
2. ESLint
Công dụng:
- Tự động check coding style, convention, bug tiềm ẩn.
- Giúp cả team viết code thống nhất, tránh tình trạng “mỗi người một style”.
Ví dụ thực tế:
- Bạn quên
await
khi gọi hàm async → ESLint cảnh báo ngay. - Bạn khai báo biến nhưng không dùng → ESLint highlight để bạn xoá.
Config nhanh:
npm install eslint --save-dev
npx eslint --init
Trong VSCode settings:
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
}
Khi bạn bấm Ctrl+S, code sẽ tự động được sửa theo rule → tiết kiệm cả đống thời gian fix tay.
3. GitHub Copilot & Copilot Chat (AI trợ lý viết code)
Công dụng:
-
Copilot gợi ý code theo ngữ cảnh bạn đang viết, gần giống “autocomplete siêu cấp”.
-
Copilot Chat (ngay trong VSCode sidebar) cho phép bạn:
- Hỏi về code đang mở (“Hàm này làm gì?”, “Có thể tối ưu không?”).
- Sinh unit test cho hàm cụ thể.
- Giải thích lỗi khi build/test fail.
- Generate snippet (VD: “Viết hàm sort mảng object theo field age”).
Ví dụ thực tế:
Bạn viết TypeScript:
function hashPassword(password: string): string {
→ Copilot tự động gợi ý body dùng crypto module, không cần bạn Google.
Bạn gặp hàm 50 dòng khó hiểu → mở Copilot Chat, gõ:
Explain this function step by step.
→ Nó trả lời ngay, highlight các bước.
Tips để dùng hiệu quả:
-
Khi muốn snippet nhanh → gõ comment mô tả:
// Generate a JWT token with user id and expiration 1h
Copilot sẽ sinh code ngay dưới.
-
Dùng Copilot Chat với selection: bôi đen đoạn code → Cmd+I (Mac) hoặc Ctrl+I (Win/Linux) → hỏi: “Refactor to use async/await” → nó refactor luôn.
-
Kết hợp với ESLint/Prettier: Copilot viết code, còn ESLint/Prettier lo định dạng và rule team.
Lưu ý:
- Copilot rất mạnh cho productivity cá nhân, nhưng không nên copy code mù quáng. Luôn review và test.
- Khi dùng trong team, có thể set rule: Copilot chỉ hỗ trợ, không thay thế hoàn toàn việc review code.
Với Copilot, năng suất tăng cảm nhận rõ rệt:
- Dev mới → học nhanh qua Copilot Chat.
- Dev kinh nghiệm → tiết kiệm thời gian viết code boilerplate, tập trung logic chính.
4. Prettier — Code formatter
Công dụng:
- Format code một cách opinionated, đảm bảo code trong repo nhìn giống nhau.
- Giúp review code nhanh hơn vì không phải check spacing, tab, dấu phẩy.
Ví dụ thực tế: Team bạn có 5 dev, mỗi người format khác nhau. Một PR 20 file, nhưng 80% diff là do format. → Sau khi dùng Prettier, mọi người chỉ tập trung vào logic, không còn tranh luận code style.
Config:
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode",
"prettier.requireConfig": true
5. Visual Studio IntelliCode
Công dụng:
- IntelliSense thông minh hơn: gợi ý API dựa trên ngữ cảnh và tần suất sử dụng thực tế.
- Giúp autocomplete “đúng cái mình cần” thay vì lướt qua cả đống option.
Ví dụ thực tế:
Khi viết:
users.map(u => u.)
IntelliCode sẽ gợi ý .name
, .email
, .id
lên đầu → vì nó hiểu từ code bạn hay dùng.
6. Live Share — Pair Programming dễ như share link Zoom
Công dụng:
- Pair programming trực tuyến ngay trong VSCode.
- Share terminal, server localhost (VD: port 3000) cho đồng đội.
Ví dụ thực tế:
Bạn và đồng đội debug bug production. Thay vì share màn hình qua Zoom, bạn mở Live Share → gửi link → đồng đội join → cả hai gõ code chung trên VSCode, cùng thấy kết quả ngay.
Rất hữu ích khi onboard dev mới hoặc review code phức tạp.
7. Remote - SSH / Remote Development
Công dụng:
- Cho phép mở thư mục trên server/VM/container như đang ở local.
- Thích hợp khi project cần môi trường đặc thù (Linux server, Docker).
Ví dụ thực tế:
Bạn dev trên Windows nhưng production chạy Ubuntu. Thay vì setup đủ thứ trong WSL/Docker, bạn chỉ cần:
ssh user@server
→ VSCode mở workspace trực tiếp trên server, IntelliSense, ESLint, Prettier… vẫn hoạt động.
8. Thunder Client / REST Client
Công dụng:
- Thunder Client: UI giống Postman nhưng tích hợp ngay trong editor.
- REST Client: viết file .http và gửi request ngay trong VSCode.
Ví dụ thực tế:
File user.http:
### Get all users
GET http://localhost:3000/api/users
### Create new user
POST http://localhost:3000/api/users
Content-Type: application/json
{
"name": "Alice",
"email": "alice@example.com"
}
Bấm Send Request → thấy kết quả ngay trong VSCode.
Khi review PR backend, bạn chạy luôn file .http
để test, không cần mở Postman.
9. Path Intellisense
Công dụng:
- Autocomplete đường dẫn khi import.
- Tránh lỗi đánh sai đường dẫn, tiết kiệm thời gian gõ.
Ví dụ thực tế:
Khi bạn gõ:
import UserService from './ser'
→ Nó sẽ gợi ý ./services/UserService.ts.
Workflow gợi ý để thực sự tăng năng suất
1. ESLint + Prettier
- Mỗi lần save → code tự động format + fix lint.
- Codebase nhất quán, review chỉ tập trung logic, không phải tranh luận style.
2. GitLens + Pull Request workflow
- Trước khi sửa code cũ, xem blame để hiểu tại sao dòng đó được viết.
- Biết commit nào đưa bug vào, dễ dàng trace hoặc revert.
3. GitHub Copilot Chat
- Hỏi trực tiếp về đoạn code khó hiểu, nhờ gợi ý refactor.
- Tự động sinh unit test, giải thích lỗi build/test fail → tiết kiệm rất nhiều thời gian tìm kiếm.
4. Remote SSH + REST Client / Thunder Client
- Code trực tiếp trên server/container → test API ngay trong VSCode.
- Không cần chuyển qua lại giữa Postman, Terminal và Editor → workflow mượt mà, liền mạch.
Kết luận
Nếu bạn chỉ muốn thử trước, hãy bắt đầu với 3 combo quan trọng nhất: GitLens, ESLint + Prettier, và GitHub Copilot (Chat). Chúng mang lại tác động rõ rệt nhất ngay trong tuần đầu tiên.
Khi đã quen, bạn có thể bổ sung thêm REST Client/Thunder Client, Remote SSH… để hoàn thiện workflow.
Năng suất không phải đến từ việc code nhanh hơn, mà từ việc giảm thời gian lặp lại và tập trung vào logic chính. Một ngày tiết kiệm 10–15 phút, một tháng bạn có thêm hàng giờ để làm việc quan trọng hơn.
Nếu bạn đang dùng extension nào “cứu cánh” cho mình, đừng ngại comment chia sẻ thêm để mọi người cùng nâng cấp workflow nhé!
All rights reserved