5 extension VSCode nên cài cho backend dev

Bài toán

VSCode mặc định đã dùng được, nhưng có một nhóm extension biến nó thành môi trường làm việc thực sự hiệu quả thay vì chỉ là text editor thông thường.

Bài này đi thẳng vào 5 extension hay dùng nhất, từng cái nên dùng khi nào và cấu hình cần biết.

Remote SSH — code trực tiếp trên server

Extension: Remote - SSH (Microsoft)

Dùng khi nào

Khi bạn cần làm việc với file trên server từ xa, thay vì:

• copy code lên server bằng scp hay rsync mỗi lần sửa
• SSH vào rồi dùng vim hoặc nano trong terminal
• mount thư mục qua SFTP rồi edit local

Remote SSH cho phép VSCode kết nối thẳng vào server. Toàn bộ file browser, terminal, extension như Prettier hay ESLint chạy ngay trên server đó, không phải local.

Cách kết nối

Mở Command Palette (Ctrl+Shift+P) → Remote-SSH: Connect to Host → nhập địa chỉ:

user@your-server-ip

Hoặc thêm cấu hình vào ~/.ssh/config để đặt tên cho dễ nhớ:

Host homelab
    HostName 192.168.1.100
    User thach
    IdentityFile ~/.ssh/id_ed25519

Host vps-prod
    HostName 12.34.56.78
    User ubuntu
    IdentityFile ~/.ssh/id_ed25519

Sau đó trong VSCode chọn homelab hoặc vps-prod từ danh sách thay vì gõ IP mỗi lần.

Điều cần biết

• Server phải cài sshd và có key-based auth
• Lần đầu kết nối, VSCode sẽ tự cài VS Code Server trên remote — cần vài giây
• Extension cài trên local và remote riêng nhau. Prettier trên local không tự chạy khi bạn đang ở remote session — phải cài lại trong context remote
• Nếu server không có Internet, tải VS Code Server offline theo hướng dẫn trong docs chính thức

---

Docker — quản lý container ngay trong editor

Extension: Docker (Microsoft)

Dùng khi nào

Khi bạn hay phải gõ lại các lệnh như:

docker ps
docker logs -f ten-container
docker exec -it ten-container sh
docker compose up -d
docker compose logs --tail=50 -f

Docker extension đưa toàn bộ thứ này vào sidebar. Click vào container là có log, exec shell, start/stop/restart ngay mà không cần rời editor.

Những thứ dùng nhiều nhất

Xem log container: Chuột phải vào container → View Logs → log stream ra thẳng VSCode terminal.

Mở shell vào container: Chuột phải → Attach Shell → mở terminal trong container đó.

Xem image, volume, network: Sidebar có tab riêng cho từng loại resource.

Chạy Compose từ file: Chuột phải vào docker-compose.yml trong file explorer → Compose Up hoặc Compose Down.

Khi nào không cần

Nếu bạn đã quen terminal và lệnh Docker thì extension này chỉ tiết kiệm vài giây click. Với người mới hoặc người hay phải debug nhiều container cùng lúc thì sidebar này rất có ích.

---

Code Spell Check — bắt typo trước khi commit

Extension: Code Spell Checker (Street Side Software)

Dùng khi nào

Typo trong tên biến, comment hoặc string hay bị bỏ sót vì linter không check ngôn ngữ tự nhiên. Extension này gạch chân từ viết sai chính tả ngay trong editor, kể cả trong:

• tên biến kiểu camelCase hay snake_case
• comment
• string literal
• file Markdown

Cấu hình thực tế

Mặc định extension check tiếng Anh. Để thêm từ điển tiếng Việt hoặc tắt cảnh báo cho từ kỹ thuật hay dùng, thêm vào settings.json:

{
  "cSpell.language": "en",
  "cSpell.words": [
    "haproxy",
    "nginx",
    "loadbalancer",
    "backend",
    "nestjs",
    "prisma",
    "supabase"
  ],
  "cSpell.ignoreWords": [
    "dockerfile",
    "eslintrc",
    "tsconfig"
  ]
}

Để thêm từ project-level (chia sẻ với team), tạo file .cspell.json ở root:

{
  "version": "0.2",
  "language": "en",
  "words": [
    "userid",
    "orgid",
    "cloudflared"
  ]
}

Điểm hay

Extension nhận diện được pattern kiểu getUserById và tách ra check từng từ get, user, by, id. Không cần viết tên biến hoàn toàn đúng chính tả mới phát hiện được lỗi.

---

Prettier — format code tự động khi save

Extension: Prettier - Code formatter (Prettier)

Dùng khi nào

Khi team hay tốn thời gian tranh luận về indent 2 hay 4 space, dấu chấm phẩy hay không, single quote hay double quote. Prettier chốt hết bằng config, format tự động mỗi khi save.

Cài đặt cơ bản

Cài extension xong, bật format on save trong settings.json:

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

Tạo file .prettierrc ở root project để định nghĩa style:

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 100,
  "arrowParens": "always"
}

Để loại trừ file không muốn format, tạo .prettierignore:

node_modules
dist
build
*.min.js

Dùng với TypeScript / React

Prettier hỗ trợ sẵn TS, TSX, JS, JSX, CSS, JSON, Markdown. Không cần cài thêm plugin cho những loại file này.

Nếu dùng Tailwind, cài thêm:

npm install -D prettier-plugin-tailwindcss

Rồi thêm vào .prettierrc:

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

Plugin này tự sắp xếp class Tailwind theo thứ tự chuẩn, không cần nhớ class nào đặt trước class nào.

---

ESLint — bắt lỗi logic và pattern nguy hiểm

Extension: ESLint (Microsoft)

Prettier vs ESLint — không thay thế nhau

Câu hỏi hay gặp: đã có Prettier rồi còn cần ESLint không?

• Prettier chỉ quan tâm đến hình thức: space, dấu chấm phẩy, xuống dòng
• ESLint quan tâm đến nội dung code: biến khai báo nhưng không dùng, == thay vì ===, any trong TypeScript, missing dependency trong useEffect

Hai cái bổ sung cho nhau, nên dùng cả hai.

Cài đặt

npm install -D eslint
npx eslint --init

Với TypeScript project, config .eslintrc.json thường trông như sau:

{
  "env": {
    "node": true,
    "es2022": true
  },
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended"
  ],
  "rules": {
    "@typescript-eslint/no-explicit-any": "warn",
    "@typescript-eslint/no-unused-vars": "error",
    "no-console": "warn"
  }
}

Tích hợp với Prettier

Dùng cả hai mà không bị conflict:

npm install -D eslint-config-prettier

Thêm prettier vào cuối mảng extends:

{
  "extends": [
    "eslint:recommended",
    "plugin:@typescript-eslint/recommended",
    "prettier"
  ]
}

eslint-config-prettier tắt hết các rule ESLint về formatting để Prettier không bị override hoặc conflict.

Bật fix on save

Để ESLint tự sửa những lỗi có thể fix được khi save:

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

---

Tóm lại — extension nào dùng cho bài toán nào

Extension	Dùng khi nào
Remote SSH	Code trực tiếp trên server hoặc VM từ xa
Docker	Quản lý container, xem log, exec shell mà không rời editor
Code Spell Check	Tránh typo trong biến, comment, string
Prettier	Format code tự động, thống nhất style trong team
ESLint	Bắt lỗi logic, pattern nguy hiểm, enforce rule codebase

Cả 5 đều miễn phí, cài từ marketplace và hoạt động tốt khi kết hợp nhau. Remote SSH và Docker đặc biệt hữu ích nếu bạn hay làm việc với server hoặc container. Prettier và ESLint thì gần như bắt buộc với mọi project JavaScript hoặc TypeScript làm theo team.