Tại sao Extensions quan trọng?

VS Code là text editor mạnh mẽ, nhưng extensions mới là thứ biến nó thành IDE đầy đủ. Với đúng extensions, bạn có thể tăng năng suất lên gấp nhiều lần, giảm lỗi, và làm việc hiệu quả hơn.

Essential Extensions

1. ESLint

ID: dbaeumer.vscode-eslint

Extension số 1 cho JavaScript/TypeScript developers. Phát hiện và fix lỗi code style tự động.

Tính năng:

  • Highlight lỗi real-time

  • Auto-fix khi save

  • Hỗ trợ custom rules

  • Tích hợp với Prettier


Settings gợi ý:
{
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

2. Prettier - Code Formatter

ID: esbenp.prettier-vscode

Format code tự động, đảm bảo consistency trong team. Hỗ trợ nhiều ngôn ngữ.

Settings gợi ý:

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

3. GitLens — Git supercharged

ID: eamodio.gitlens

Biến VS Code thành Git client mạnh mẽ. Xem ai đã sửa dòng code nào, khi nào, và tại sao.

Tính năng chính:

  • Blame annotations: Xem ai sửa từng dòng

  • File history: Lịch sử thay đổi của file

  • Compare branches: So sánh code giữa branches

  • Interactive rebase: Rebase trực quan


4. Error Lens

ID: usernamehw.errorlens

Hiển thị lỗi ngay trên dòng code thay vì phải hover. Tiết kiệm thời gian debug.

Trước: Phải hover để xem lỗi
Sau: Lỗi hiển thị ngay inline với màu sắc rõ ràng

5. Auto Rename Tag

ID: formulahendry.auto-rename-tag

Tự động đổi tên cả tag mở và đóng khi bạn sửa một trong hai. Essential cho HTML/JSX development.

UI & Productivity

6. Material Icon Theme

ID: PKief.material-icon-theme

Icon đẹp và rõ ràng cho files và folders. Giúp nhận diện file types nhanh hơn.

7. One Dark Pro

ID: zhuangtongfa.Material-theme

Theme tối phổ biến nhất, dễ nhìn cho coding sessions dài.

8. Indent-Rainbow

ID: oderwat.indent-rainbow

Tô màu các mức indent khác nhau, cực kỳ hữu ích cho Python, YAML, hoặc nested code.

9. Todo Tree

ID: Gruntfuggly.todo-tree

Tìm và hiển thị tất cả TODO, FIXME, HACK comments trong project.

Tip: Thêm custom tags:

{
  "todo-tree.general.tags": [
    "TODO",
    "FIXME",
    "HACK",
    "XXX",
    "BUG",
    "REVIEW"
  ]
}

Development Tools

10. GitHub Copilot

ID: GitHub.copilot

AI pair programmer. Gợi ý code thông minh dựa trên context.

Tips sử dụng:

  • Viết comment mô tả function trước

  • Tab để accept, Esc để reject

  • Ctrl+Enter để xem nhiều suggestions

  • Copilot Chat cho Q&A


11. Thunder Client

ID: rangav.vscode-thunder-client

REST API client ngay trong VS Code. Thay thế Postman, không cần mở app khác.

Tính năng:

  • Collections & Environments

  • Import/Export Postman collections

  • Request history

  • Scripting support


12. REST Client

ID: humao.rest-client

Gửi HTTP requests trực tiếp từ file .http. Đơn giản và version-control friendly.

### Get all users
GET https://api.example.com/users
Authorization: Bearer token_here

Create user

POST https://api.example.com/users
Content-Type: application/json

{
  "name": "John Doe",
  "email": "john@example.com"
}

13. Docker

ID: ms-azuretools.vscode-docker

Quản lý Docker containers, images, và compose files trực tiếp từ VS Code.

14. Path Intellisense

ID: christian-kohler.path-intellisense

Autocomplete file paths khi import. Hỗ trợ alias paths.

15. Code Spell Checker

ID: streetsidesoftware.code-spell-checker

Kiểm tra chính tả trong code và comments. Tránh typos xấu hổ.

Settings Tối ưu

settings.json đề xuất

{
  "editor.fontSize": 14,
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', Consolas, monospace",
  "editor.fontLigatures": true,
  "editor.lineHeight": 1.6,
  "editor.minimap.enabled": false,
  "editor.renderWhitespace": "boundary",
  "editor.smoothScrolling": true,
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  
  "terminal.integrated.fontSize": 13,
  
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "One Dark Pro",
  "workbench.startupEditor": "none",
  
  "git.autofetch": true,
  "git.confirmSync": false
}

Cài đặt nhanh

Tạo file extensions.txt:

dbaeumer.vscode-eslint
esbenp.prettier-vscode
eamodio.gitlens
usernamehw.errorlens
formulahendry.auto-rename-tag
PKief.material-icon-theme
oderwat.indent-rainbow
Gruntfuggly.todo-tree
rangav.vscode-thunder-client
christian-kohler.path-intellisense
streetsidesoftware.code-spell-checker
ms-azuretools.vscode-docker

Chạy script cài đặt:

cat extensions.txt | xargs -L 1 code --install-extension

Kết luận

Đây là bộ extensions cơ bản mà mọi developer nên có. Tùy chỉnh thêm theo stack và workflow của bạn. Nhớ rằng: ít nhưng chất lượng tốt hơn là cài quá nhiều extensions không cần thiết.

Pro tip: Sync settings với GitHub để dùng chung giữa các máy:

  • Settings Sync (built-in): Ctrl+Shift+P > "Turn on Settings Sync"

#VS Code#Tools#Productivity