📗 Phần 1 · Nền Tảng · Chương 2

Thiết Lập Môi Trường Lập Trình

Cài đặt và cấu hình VS Code + GitHub Copilot theo chuẩn chuyên nghiệp — nền tảng vững chắc để học tất cả các chương tiếp theo.

7 giờ học
📝 7 bài học
🎯 Setup checklist đầy đủ
📊 Mức độ: Cơ bản
💻 1. Làm Quen VS Code
Cài đặt, giao diện, phím tắt
🧩 2. Extensions Thiết Yếu
Top extensions cho AI coding
🤖 3. Cài GitHub Copilot
Kích hoạt và cấu hình Copilot
🐍 4. Python & Node.js
Cài đặt runtime & workspace
⚙️ 5. VS Code Tối Ưu
Settings, snippets & profiles
🌿 6. Git Workflow AI
Commit message, PR & review
🐳 7. Docker & Agent Mode
DevContainer, MCP & VS Code Agent

🎯 Mục tiêu học tập

  • Cài đặt và cấu hình VS Code với đầy đủ extensions cần thiết
  • Kích hoạt và sử dụng GitHub Copilot lần đầu tiên
  • Cài đặt Python và Node.js đúng cách
  • Tối ưu hoá workspace VS Code cho năng suất tối đa
  • Thiết lập Docker DevContainer, VS Code Agent Mode và MCP configuration chuẩn 2026
1

Bài 2.1 — Cài Đặt & Làm Quen VS Code

Tại sao VS Code?

VS Code (Visual Studio Code) là IDE miễn phí, mã nguồn mở của Microsoft — và là IDE phổ biến nhất thế giới với hơn 73% developer sử dụng (Stack Overflow 2024). Lý do:

  • Miễn phí hoàn toàn — không có phiên bản trả phí
  • Nhẹ và nhanh — khởi động trong dưới 2 giây
  • Extensions phong phú — hơn 50,000 extensions
  • GitHub Copilot native — tích hợp sâu nhất với Copilot
  • Hỗ trợ mọi ngôn ngữ — từ Python đến Rust

Cài đặt VS Code

  1. Download VS Code

    Truy cập code.visualstudio.com và download bản installer cho hệ điều hành của bạn (Windows/Mac/Linux). Chọn phiên bản Stable.

  2. Cài đặt với cài đặt mặc định

    Trên Windows, nhớ tick vào "Add to PATH""Register Code as an editor for supported file types". Điều này quan trọng để chạy code . từ terminal.

  3. Khởi động VS Code lần đầu

    Mở VS Code, bạn sẽ thấy Welcome tab. Có thể đóng tab này lại.

Giao diện VS Code — Nắm vững trong 5 phút

Activity Bar (thanh trái)
6 icon chính: Explorer, Search, Source Control (Git), Run/Debug, Extensions, và Copilot Chat.
Explorer (Ctrl+Shift+E)
Xem cây thư mục của project. Mở folder bằng File > Open Folder.
Editor Area
Vùng viết code trung tâm. Có thể chia đôi (Ctrl+\) để mở 2 file song song.
Terminal tích hợp
Mở bằng Ctrl+` (backtick). Chạy lệnh ngay trong VS Code mà không cần chuyển cửa sổ.
Command Palette
Ctrl+Shift+P — "Siêu lệnh" để tìm và chạy bất kỳ lệnh nào trong VS Code.
Status Bar (thanh dưới)
Hiển thị: branch Git hiện tại, ngôn ngữ file, encoding, và trạng thái Copilot.

Keyboard Shortcuts Thiết Yếu

Phím tắt (Windows)Phím tắt (Mac)Chức năng
Ctrl+PCmd+PMở file nhanh (Quick Open)
Ctrl+Shift+PCmd+Shift+PCommand Palette
Ctrl+`Ctrl+`Mở/đóng Terminal
Ctrl+BCmd+BẨn/hiện Sidebar
Ctrl+/Cmd+/Toggle comment
Alt+↑/↓Option+↑/↓Di chuyển dòng lên/xuống
Ctrl+DCmd+DChọn từ tiếp theo giống nhau
Ctrl+Shift+KCmd+Shift+KXóa dòng hiện tại
F12F12Go to Definition
Ctrl+Z / Ctrl+YCmd+Z / Cmd+YUndo / Redo

2

Bài 2.2 — Extensions Thiết Yếu

Extensions là "linh hồn" của VS Code. Hãy cài đặt những extension sau — đây là danh sách được chọn lọc kỹ càng, không thừa, không thiếu.

📦
Cách cài Extension

Nhấn Ctrl+Shift+X để mở Extension Marketplace. Tìm kiếm tên extension, nhấn Install. Hoặc dùng Command Palette: ext install [tên-extension]

Extensions AI (Bắt buộc)

GitHub Copilot
Extension AI chính. Tự động complete code khi bạn gõ.
github.copilot
GitHub Copilot Chat
Chat với AI ngay trong VS Code. Hỏi, giải thích, debug.
github.copilot-chat

Extensions Python (Cần cho Chương 4)

Python
Extension Python chính thức của Microsoft. IntelliSense, debugging, formatting.
ms-python.python
Pylance
Language server cho Python. Type checking, auto-imports nhanh hơn.
ms-python.pylance
Black Formatter
Auto-format Python code theo chuẩn Black — không cần tự căn chỉnh.
ms-python.black-formatter

Extensions JavaScript/Web (Cần cho Chương 5-8)

ESLint
Phát hiện lỗi JavaScript/TypeScript theo rule. Không thể thiếu.
dbaeumer.vscode-eslint
Prettier
Auto-format code JS/HTML/CSS. Lưu file là tự đẹp luôn.
esbenp.prettier-vscode
ES7+ React Snippets
Shortcuts nhanh cho React: gõ rafce → tạo component ngay.
dsznajder.es7-react-js-snippets
Tailwind CSS IntelliSense
Autocomplete class Tailwind. Thiết yếu nếu dùng Tailwind CSS.
bradlc.vscode-tailwindcss

Extensions Tiện Ích

GitLens
Xem git history, blame, compare branches ngay trong editor.
eamodio.gitlens
One Dark Pro
Theme tối đẹp nhất cho VS Code. Mắt không bị mỏi khi code lâu.
zhuangtongfa.material-theme
Material Icon Theme
Icon đẹp cho file/folder trong Explorer. Nhận biết loại file nhanh hơn.
pkief.material-icon-theme
Error Lens
Hiển thị lỗi/warning ngay trên dòng code. Không cần hover để xem lỗi.
usernamehw.errorlens
Live Server
Server local cho HTML. Tự reload browser khi bạn lưu file.
ritwickdey.liveserver
REST Client
Test API trực tiếp trong VS Code bằng file .http — thay thế Postman.
humao.rest-client

3

Bài 2.3 — Cài Đặt & Cấu Hình GitHub Copilot

Bước 1: Đăng ký GitHub Copilot

  1. Tạo tài khoản GitHub

    Nếu chưa có, truy cập github.com/signup và tạo tài khoản miễn phí.

  2. Kích hoạt Copilot

    Truy cập github.com/features/copilot → "Start a free trial". Bạn có 30 ngày miễn phí. Hoặc dùng GitHub Student Pack nếu bạn là sinh viên (miễn phí 1 năm).

  3. Cài Extension trong VS Code

    Cài 2 extensions: GitHub CopilotGitHub Copilot Chat. Sau khi cài, VS Code sẽ yêu cầu đăng nhập GitHub.

  4. Đăng nhập GitHub trong VS Code

    Khi popup xuất hiện, click "Allow" → browser sẽ mở ra → Đăng nhập GitHub → Copy code authorization → Dán vào VS Code.

Kiểm tra Copilot hoạt động

Tạo một file test.py mới, gõ comment sau:

python
# Hàm tính tổng các số từ 1 đến n

Sau khi gõ dòng comment và nhấn Enter, Copilot sẽ tự động đề xuất code. Nhấn Tab để chấp nhận. Nếu thấy gợi ý xuất hiện dưới dạng text màu xám — Copilot đang hoạt động!

💡
Copilot Controls quan trọng

Tab — Chấp nhận toàn bộ gợi ý
Ctrl+→ — Chấp nhận từng từ
Esc — Từ chối gợi ý
Alt+] / Alt+[ — Xem gợi ý tiếp theo/trước
Ctrl+Enter — Mở panel hiển thị 10 gợi ý cùng lúc

Tôi vừa cài GitHub Copilot trong VS Code. Hãy cho tôi biết:
1. Cách test xem Copilot có đang hoạt động không (step by step)
2. 5 workflow cơ bản nhất để làm việc với Copilot inline suggestion
3. Cách dùng Ctrl+Enter để xem nhiều gợi ý cùng lúc
4. Những tình huống nào Copilot suggest tốt nhất?
Hỏi Copilot Chat ngay khi mới cài — nó sẽ tự hướng dẫn bạn cách dùng nó!

Copilot Chat — Trợ Lý AI Trong VS Code

Ngoài inline completion, Copilot còn có Chat — nơi bạn có thể hỏi đáp trực tiếp. Mở bằng icon chat ở Activity Bar hoặc Ctrl+Shift+I.

Các lệnh đặc biệt trong Copilot Chat

LệnhChức năngVí dụ
/explainGiải thích code đang chọn/explain (chọn code trước)
/fixSửa bug trong code đang chọn/fix tại sao hàm này không trả về đúng?
/testsTạo unit tests cho code đang chọn/tests viết tests cho hàm này
/docViết documentation/docstring/doc
@workspaceHỏi về toàn bộ project@workspace tìm tất cả API endpoints
@vscodeHỏi về VS Code settings/commands@vscode cách thay đổi font size?
@workspace Hãy phân tích project của tôi và cho biết:
1. Những vấn đề tiềm ẩn có thể xảy ra
2. Những cải tiến nào nên làm trước
3. Cấu trúc folder có đúng convention không?
4. Dependencies nào đang outdated hoặc không cần thiết?
Dùng @workspace để Copilot Chat phân tích toàn bộ project của bạn — mạnh hơn nhiều so với chỉ hỏi về 1 file.
💡 Bí Kíp Dùng Copilot Chat Hiệu Quả
  • Luôn chọn (highlight) code trước khi dùng /explain, /fix, /tests
  • Dùng @workspace để hỏi về toàn bộ project — Copilot sẽ tìm kiếm qua tất cả files
  • Mở nhiều tab để so sánh: Ctrl+Enter → xem 10 gợi ý cùng lúc, chọn cái tốt nhất
  • Copilot Chat nhớ ngữ cảnh trong cùng conversation — hỏi follow-up thay vì bắt đầu lại

4

Bài 2.4 — Cài Python, Node.js & Tối Ưu Workspace

Cài đặt Python

  1. Download Python 3.12+

    Truy cập python.org/downloads → Download bản mới nhất. Trên Windows, nhớ tick "Add Python to PATH".

  2. Kiểm tra cài đặt

    Mở Terminal trong VS Code (Ctrl+`) và chạy:

bash
python --version
# Output: Python 3.12.x

pip --version
# Output: pip 24.x from ...

Cài đặt Node.js

💡
Khuyến nghị: Dùng NVM (Node Version Manager)

Thay vì cài Node.js trực tiếp, hãy dùng NVM để dễ dàng chuyển đổi version. Tải tại: github.com/nvm-sh/nvm (Mac/Linux) hoặc github.com/coreybutler/nvm-windows (Windows).

bash
# Sau khi cài NVM, cài Node.js LTS:
nvm install --lts
nvm use --lts

# Kiểm tra
node --version    # v20.x.x hoặc cao hơn
npm --version     # 10.x.x hoặc cao hơn

Cấu hình settings.json — Workspace tối ưu

Mở Command Palette (Ctrl+Shift+P) → gõ "Open User Settings (JSON)" → dán cấu hình sau:

json — settings.json
{
  // === EDITOR ===
  "editor.fontSize": 14,
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', Consolas, monospace",
  "editor.fontLigatures": true,
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.wordWrap": "on",
  "editor.minimap.enabled": false,
  "editor.smoothScrolling": true,
  "editor.cursorBlinking": "smooth",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "editor.inlineSuggest.enabled": true,

  // === FILES ===
  "files.autoSave": "onFocusChange",
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,

  // === TERMINAL ===
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.fontFamily": "'JetBrains Mono', monospace",
  "terminal.integrated.smoothScrolling": true,

  // === PYTHON ===
  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter",
    "editor.tabSize": 4
  },

  // === GITHUB COPILOT ===
  "github.copilot.enable": {
    "*": true
  },
  "github.copilot.chat.localeOverride": "vi",

  // === WORKBENCH ===
  "workbench.colorTheme": "One Dark Pro",
  "workbench.iconTheme": "material-icon-theme",
  "workbench.startupEditor": "none",

  // === GIT ===
  "git.autofetch": true,
  "git.confirmSync": false
}
Setup hoàn tất!

Sau khi hoàn thành Bài 2.4, bạn đã có một môi trường lập trình chuyên nghiệp. Trong Chương 3, chúng ta sẽ học cách tận dụng tối đa bộ công cụ này.


5

Bài 2.5 — Cấu Hình VS Code Tối Ưu Cho AI Coding

VS Code mặc định đã tốt, nhưng sau khi tùy chỉnh đúng cách, nó sẽ trở thành công cụ mạnh mẽ gấp nhiều lần. Dưới đây là settings.json được tối ưu cho AI-assisted coding workflow.

settings.json — Cấu Hình Khuyến Nghị

Mở bằng: Ctrl+Shift+P → gõ "Open User Settings JSON"

json — .vscode/settings.json (hoặc User Settings)
{
  // === COPILOT SETTINGS ===
  "github.copilot.enable": {
    "*": true,               // Bật cho tất cả ngôn ngữ
    "markdown": true,        // Bật cả trong Markdown
    "plaintext": false       // Tắt trong file .txt thông thường
  },
  "github.copilot.editor.enableAutoCompletions": true,
  "github.copilot.chat.localeOverride": "vi",  // Chat bằng tiếng Việt (nếu hỗ trợ)

  // === EDITOR SETTINGS ===
  "editor.fontFamily": "'JetBrains Mono', 'Fira Code', monospace",
  "editor.fontSize": 14,
  "editor.fontLigatures": true,       // Hiện ligatures đẹp (=> trở thành ⇒)
  "editor.tabSize": 2,
  "editor.insertSpaces": true,
  "editor.wordWrap": "on",
  "editor.lineNumbers": "on",
  "editor.rulers": [80, 120],         // Đường kẻ ở cột 80 và 120
  "editor.minimap.enabled": false,    // Tắt minimap để rộng hơn
  "editor.bracketPairColorization.enabled": true,
  "editor.guides.bracketPairs": true,
  "editor.inlineSuggest.enabled": true,
  "editor.suggest.preview": true,

  // === FORMAT ON SAVE ===
  "editor.formatOnSave": true,
  "editor.formatOnPaste": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "explicit"
  },

  // === FILE SETTINGS ===
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 1000,
  "files.trimTrailingWhitespace": true,
  "files.insertFinalNewline": true,
  "files.encoding": "utf8",

  // === TERMINAL ===
  "terminal.integrated.fontSize": 13,
  "terminal.integrated.defaultProfile.windows": "PowerShell",
  "terminal.integrated.cursorStyle": "line",

  // === WORKBENCH ===
  "workbench.colorTheme": "One Dark Pro",      // Cần cài extension One Dark Pro
  "workbench.iconTheme": "material-icon-theme", // Cần cài extension Material Icon Theme
  "workbench.startupEditor": "none",
  "workbench.tree.indent": 16,

  // === EXPLORER ===
  "explorer.sortOrder": "type",
  "explorer.confirmDelete": false,             // Tắt xác nhận khi xóa file

  // === LANGUAGE SPECIFIC ===
  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter",
    "editor.tabSize": 4
  },
  "[javascript][typescript][javascriptreact][typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

Danh Sách Extensions Cần Thiết

bash — Cài tất cả extensions một lần
# Chạy lần lượt hoặc copy tất cả vào terminal

# AI Coding
code --install-extension GitHub.copilot
code --install-extension GitHub.copilot-chat

# Python
code --install-extension ms-python.python
code --install-extension ms-python.black-formatter
code --install-extension ms-python.pylint

# JavaScript / Node.js
code --install-extension esbenp.prettier-vscode
code --install-extension dbaeumer.vscode-eslint
code --install-extension dsznajder.es7-react-js-snippets

# HTML / CSS
code --install-extension bradlc.vscode-tailwindcss
code --install-extension formulahendry.auto-rename-tag
code --install-extension naumovs.color-highlight

# Git
code --install-extension eamodio.gitlens
code --install-extension mhutchie.git-graph

# Theme và Icon
code --install-extension zhuangtongfa.material-theme
code --install-extension pkief.material-icon-theme

# Tiện ích khác
code --install-extension streetsidesoftware.code-spell-checker
code --install-extension christian-kohler.path-intellisense
code --install-extension ms-vsliveshare.vsliveshare

Keyboard Shortcuts Quan Trọng Nhất

Chức năng Phím tắt Windows
Mở file nhanhCtrl+P
Command PaletteCtrl+Shift+P
Mở terminalCtrl+`
Copilot ChatCtrl+Shift+I
Inline Chat với CopilotCtrl+I
Go to definitionF12
Find all referencesShift+F12
Rename symbolF2
Multi-cursor (click)Alt+Click
Duplicate lineShift+Alt+↓
Di chuyển dòngAlt+↑/↓
Format documentShift+Alt+F
💡 Mẹo từ ThanhDoIT
  • Cài hết extensions trong bài này ngay từ đầu — đừng cài dần dần. Một lần setup kỹ lưỡng sẽ tiết kiệm rất nhiều thời gian sau này.
  • Đặt VS Code settings.json vào Git repository của bạn (gist hoặc dotfiles repo). Khi setup máy mới chỉ cần copy file này là xong.
  • Học thuộc lòng tối thiểu 10 keyboard shortcuts cốt lõi của VS Code: Ctrl+P (quick open), Ctrl+Shift+P (command palette), Ctrl+` (terminal), F12 (go to definition).
  • Copilot Chat bên trong VS Code mạnh hơn hỏi trên web ChatGPT vì nó có context của project đang mở — nó "thấy" code của bạn.

6

Bài 2.6 — Git & GitHub Workflow với AI

Git là kỹ năng bắt buộc với mọi lập trình viên, đặc biệt khi làm việc với AI. Khi bạn dùng AI sinh code, version control giúp bạn track lại những thay đổi, rollback khi AI tạo ra bug, và collaborate hiệu quả hơn.

📚
Bạn Sẽ Học
  • Git workflow cơ bản tích hợp Copilot
  • Viết commit message chuyên nghiệp với AI
  • Code review & PR description với Copilot
  • Giải quyết merge conflict bằng AI
  • .gitignore + .editorconfig chuẩn
Git Commands Hay Dùng
  • git init — Khởi tạo repo
  • git add . — Stage tất cả
  • git commit -m "msg"
  • git push origin main
  • git stash — Tạm cất thay đổi

Setup Git & Kết Nối GitHub

1
Cài Git

Download tại git-scm.com. Windows: chạy installer, chọn "Use VS Code as default editor". Kiểm tra: git --version

2
Cấu hình Identity
bash
git config --global user.name "Tên Của Bạn"
git config --global user.email "email@gmail.com"
git config --global core.editor "code --wait"
git config --global init.defaultBranch main
3
Tạo SSH Key (an toàn hơn HTTPS)
bash
ssh-keygen -t ed25519 -C "email@gmail.com"
# Nhấn Enter 3 lần (dùng default)
cat ~/.ssh/id_ed25519.pub
# Copy output → GitHub Settings → SSH Keys → New SSH Key
4
Cài GitLens Extension

Tìm eamodio.gitlens trong Extensions. GitLens hiển thị blame inline, history, diff trực tiếp trong VS Code — cực kỳ hữu ích.

Daily Git Workflow với Copilot

bash — Workflow hàng ngày (AI-assisted)
# === BUỔI SÁNG — Lấy code mới nhất ===
git pull origin main

# === TRONG NGÀY — Làm việc ===
# Tạo branch mới cho tính năng
git checkout -b feature/ten-tinh-nang

# Code với Copilot... sau đó commit
git add .
git status   # kiểm tra trước khi commit

# Viết commit message có AI hỗ trợ (xem prompt bên dưới)
git commit -m "feat: add user authentication with JWT"

# === CUỐI NGÀY — Push lên GitHub ===
git push origin feature/ten-tinh-nang

# === KHI XONG — Merge vào main ===
git checkout main
git merge feature/ten-tinh-nang
git push origin main
Tôi vừa code xong tính năng sau. Hãy viết cho tôi một git commit message 
theo chuẩn Conventional Commits:

Tính năng đã làm:
- Thêm form đăng nhập với validation email/password
- Kết nối API /auth/login trả về JWT token
- Lưu token vào localStorage
- Redirect về trang dashboard sau khi đăng nhập thành công

Yêu cầu: type phù hợp (feat/fix/docs/refactor...), scope, mô tả ngắn gọn rõ ràng
Copilot Chat viết commit message chuyên nghiệp dựa trên mô tả tính năng của bạn — tiết kiệm thời gian và nhất quán hơn.

Conventional Commits — Chuẩn Commit Message

TypeÝ nghĩaVí dụ
featTính năng mớifeat: add login form
fixSửa bugfix: correct password validation
docsCập nhật documentationdocs: update README setup guide
styleFormat, whitespace (không đổi logic)style: format with prettier
refactorTái cấu trúc coderefactor: extract auth helper
testThêm/sửa teststest: add unit tests for auth
choreTask vặt (build, deps...)chore: update dependencies
perfCải thiện performanceperf: cache user queries

Giải Quyết Merge Conflict Với AI

Merge conflict là nỗi sợ của nhiều dev — nhưng với Copilot, bạn có thể giải quyết chúng nhanh chóng:

bash — Khi gặp merge conflict
# Khi merge gặp conflict
git merge feature/ten-tinh-nang
# Auto-merging src/auth.js
# CONFLICT (content): Merge conflict in src/auth.js

# Mở file conflict trong VS Code — thấy <<<<<<< ======= >>>>>>>
# Dùng Copilot Chat để hỏi:
# "Đây là merge conflict trong file auth.js, giải thích sự khác biệt 
#  và giúp tôi quyết định nên giữ phần nào"

# Sau khi resolve:
git add src/auth.js
git commit -m "fix: resolve merge conflict in auth.js"
Tôi đang gặp merge conflict trong file này. Đây là nội dung:

<<<<<<< HEAD
function validateUser(email, password) {
  if (!email || !password) return false;
  return email.includes('@') && password.length >= 8;
}
=======
function validateUser(user) {
  const { email, password } = user;
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) && password.length >= 6;
}
>>>>>>> feature/update-validation

Hãy:
1. Giải thích sự khác biệt giữa 2 phiên bản
2. Phiên bản nào tốt hơn và tại sao?
3. Viết version merged tốt nhất kết hợp ưu điểm cả hai
Copy-paste nội dung conflict vào Copilot Chat — nó sẽ phân tích và đề xuất cách merge tối ưu nhất.

.gitignore — File Bắt Buộc Phải Có

gitignore — Template cho Python + Node.js project
# === PYTHON ===
__pycache__/
*.py[cod]
*.pyo
.env
venv/
.venv/
*.egg-info/
dist/
build/
.pytest_cache/
.coverage

# === NODE.JS ===
node_modules/
npm-debug.log*
.npm
dist/
build/

# === ENVIRONMENT ===
.env
.env.local
.env.*.local
*.env

# === EDITORS ===
.vscode/settings.json    # Giữ lại extensions.json nhưng bỏ settings cá nhân
.idea/
*.swp
*.swo

# === OS ===
.DS_Store
Thumbs.db
desktop.ini

# === SECRETS ===
*.pem
*.key
*.cert
config/secrets.*
⚠ KHÔNG BAO GIỜ commit các file sau lên GitHub:
  • .env — chứa API keys, passwords, database URLs
  • *.pem / *.key — private keys, certificates
  • node_modules/ — quá nặng (hàng trăm MB), dùng npm install để restore
  • venv/ / .venv/ — Python virtual environment, restore bằng pip install -r requirements.txt
🎯 Thực Hành: Khởi Tạo Repo Đúng Chuẩn
  1. Tạo folder mới my-ai-project, mở bằng VS Code
  2. Mở terminal: git initgit config user.name "..."
  3. Tạo file .gitignore, copy template phía trên vào
  4. Tạo file README.md với mô tả project
  5. Hỏi Copilot Chat: "Giúp tôi viết README.md chuyên nghiệp cho project [tên project]"
  6. Commit đầu tiên: git add . && git commit -m "chore: initial project setup"
  7. Tạo repo trên GitHub.com và push: git remote add origin URL && git push -u origin main
✅ Sau Bài Này Bạn Đã Có
  • Git workflow đầy đủ từ init đến push
  • Commit message chuyên nghiệp theo Conventional Commits
  • Biết dùng Copilot để giải quyết merge conflict
  • .gitignore đúng chuẩn, không lo lộ secrets

7

Bài 2.7 — Docker, DevContainer & VS Code Agent Mode

Hai công nghệ giúp bạn nâng tầm môi trường dev lên professional-grade: DevContainer cho môi trường lập trình nhất quán 100% (mọi người trong team cùng exact setup), và VS Code Agent Mode — Copilot tự lên kế hoạch và thực thi nhiều bước code mà không cần bạn nhắc từng bước.

Docker
Công nghệ container — đóng gói ứng dụng + runtime + dependencies vào một "hộp" chạy nhất quán trên mọi máy. "Trên máy tôi chạy được" không còn là vấn đề.
Dev Container
VS Code feature: định nghĩa môi trường lập trình trong file .devcontainer/devcontainer.json. Clone repo → mở container → đầy đủ tools, extensions, không cần cài gì thêm.
Agent Mode (Copilot)
Copilot tự động lập kế hoạch → thực thi nhiều bước → đọc kết quả → tự sửa lỗi → lặp lại. Bạn giao task lớn, AI tự hoàn thành.
MCP (Model Context Protocol)
Protocol mở cho phép Copilot kết nối với tools bên ngoài: database, GitHub, Jira, Figma... AI có thể query DB, tạo PR, đọc design spec ngay trong VS Code.

1. Cài Docker Desktop & Chạy Container Đầu Tiên

1
Cài Docker Desktop

Download từ docker.com/products/docker-desktop. Hỗ trợ Windows/Mac/Linux. Sau khi cài, khởi động lại máy.

2
Cài extension Dev Containers

Trong VS Code: tìm Dev Containers (ms-vscode-remote.remote-containers) → Install.

3
Mở project trong container

Ctrl+Shift+P"Dev Containers: Open Folder in Container" → Chọn folder → VS Code tự build container.

4
Verify

Terminal trong VS Code bây giờ chạy bên trong container. node --version trả về version được define trong devcontainer.json.

.devcontainer/devcontainer.json — Node.js 22 project
{
  "name": "Node.js 22 Development",

  // Image pre-built từ Microsoft — Node 22 + npm + git
  "image": "mcr.microsoft.com/devcontainers/javascript-node:22",

  // Hoặc dùng Docker Compose cho full stack (Node + PostgreSQL)
  // "dockerComposeFile": "docker-compose.yml",
  // "service": "app",

  // Forward port container ra máy host để preview app
  "forwardPorts": [3000, 5173, 5432],

  // Extensions tự động cài trong container (chạy một lần duy nhất)
  "customizations": {
    "vscode": {
      "extensions": [
        "github.copilot",
        "github.copilot-chat",
        "ms-azuretools.vscode-docker",
        "esbenp.prettier-vscode",
        "dbaeumer.vscode-eslint",
        "prisma.prisma",
        "bradlc.vscode-tailwindcss"
      ],
      "settings": {
        "editor.defaultFormatter": "esbenp.prettier-vscode",
        "editor.formatOnSave": true
      }
    }
  },

  // Lệnh chạy sau khi container start (cài dependencies)
  "postCreateCommand": "npm install",

  // Mount SSH agent để dùng Git với SSH key của máy host
  "mounts": [
    "source=${localEnv:SSH_AUTH_SOCK},target=/ssh-agent,type=bind"
  ],

  // Chạy với user non-root cho bảo mật
  "remoteUser": "node"
}
.devcontainer/docker-compose.yml — Full-stack với PostgreSQL
version: '3.8'

services:
  # App container — Node.js dev environment
  app:
    build:
      context: ..
      dockerfile: .devcontainer/Dockerfile
    volumes:
      - ../..:/workspaces:cached  # Mount source code
    command: sleep infinity        # Container chạy mãi, VS Code connect vào
    environment:
      DATABASE_URL: postgresql://postgres:devpassword@db:5432/devdb
      NODE_ENV: development
    depends_on:
      - db

  # PostgreSQL database
  db:
    image: postgres:16
    restart: unless-stopped
    volumes:
      - postgres-data:/var/lib/postgresql/data
    environment:
      POSTGRES_PASSWORD: devpassword
      POSTGRES_DB: devdb
    ports:
      - "5432:5432"   # Accessible từ máy host (TablePlus, pgAdmin)

  # Redis cho caching/sessions
  redis:
    image: redis:7-alpine
    restart: unless-stopped
    ports:
      - "6379:6379"

volumes:
  postgres-data:
💡
Tại sao DevContainer?
  • Onboarding 0 phút: Developer mới clone repo → mở container → đủ tools, đúng version, không cần setup
  • Máy sạch: Không cài Python/Node/Ruby trực tiếp lên máy host — dễ xóa, không conflict version
  • CI/CD đồng nhất: Container local = container CI = container production
  • GitHub Codespaces: Cùng devcontainer.json → chạy được trên browser, không cần máy mạnh

2. VS Code Agent Mode — AI Tự Động Đa Bước

🤖
Agent Mode vs Chat Mode

Chat Mode: Bạn hỏi → AI trả lời → bạn copy code → bạn paste → bạn chạy → lặp lại
Agent Mode: Bạn giao task → AI tự đọc file → tự viết code → tự chạy terminal → tự sửa lỗi → báo cáo kết quả

1
Bật Agent Mode

Mở Copilot Chat → click dropdown bên cạnh nút gửi → chọn "Agent". Hoặc dùng Ctrl+Shift+I → chọn Agent tab.

2
Viết task rõ ràng

Mô tả WHAT (cần làm gì) và WHY (tại sao) — không cần HOW (AI tự tìm cách). Ví dụ: "Tạo REST API endpoint POST /api/todos với validation và test".

3
Xem AI làm việc

Agent tự đọc codebase → plan → viết code → chạy test → sửa lỗi. Mỗi bước hiện rõ trong UI. Bạn có thể dừng bất kỳ lúc nào.

4
Review trước khi apply

Agent sẽ show diff của mọi file thay đổi trước khi apply. Luôn review — đặc biệt với thay đổi ảnh hưởng nhiều file.

Ví dụ Agent Mode prompts hiệu quả
# Prompt 1 — Tạo feature hoàn chỉnh
"Tạo feature authentication cho Express app:
- POST /auth/register (validate email, hash password với bcrypt)
- POST /auth/login (trả JWT access token 15m + refresh token)  
- GET /auth/me (protected route)
- Thêm middleware verifyToken
- Tạo Prisma model User nếu chưa có
- Viết tests cho tất cả endpoints"

# Prompt 2 — Refactor toàn bộ
"@workspace Refactor tất cả JavaScript sang TypeScript:
- Thêm kiểu dữ liệu rõ ràng cho tất cả functions
- Tạo interfaces/types riêng trong types/ folder
- Không thay đổi behavior, chỉ thêm types"

# Prompt 3 — Debug và fix
"Chạy npm test và fix tất cả failing tests. 
Sau khi fix, chạy lại để confirm xanh hết."

# Prompt 4 — Scaffold từ spec
"Đọc file SPEC.md và tạo tất cả API endpoints được mô tả.
Follow file structure hiện tại của project."

3. MCP — Kết Nối Copilot Với Tools Bên Ngoài

.vscode/mcp.json — Cấu hình MCP servers
{
  "servers": {
    // GitHub MCP — Copilot có thể đọc/tạo issues, PRs, comments
    "github": {
      "type": "http",
      "url": "https://api.githubcopilot.com/mcp/",
      "headers": {
        "Authorization": "Bearer ${env:GITHUB_TOKEN}"
      }
    },

    // Filesystem MCP — Copilot đọc/ghi files ngoài workspace
    "filesystem": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-filesystem", "/path/to/allowed"]
    },

    // PostgreSQL MCP — Copilot query trực tiếp database
    "postgres": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-postgres"],
      "env": {
        "POSTGRES_CONNECTION_STRING": "${env:DATABASE_URL}"
      }
    }
  }
}
🔗
MCP Use Cases thực tế
  • GitHub MCP: "Tạo PR cho feature này với description đầy đủ" → Copilot tự tạo PR
  • Database MCP: "Viết migration để thêm cột created_by vào bảng tasks" → Copilot đọc schema thật, generate đúng migration
  • Filesystem MCP: "Tổ chức lại cấu trúc folder project theo best practices" → AI di chuyển files thật
⚠️ Agent Mode & MCP — Cần Thận Trọng
  • Luôn review trước khi apply: Agent có thể xóa/overwrite files. Đọc kỹ diff — đặc biệt với file quan trọng.
  • Dùng Git trước khi bắt đầu: Commit sạch trước khi giao task lớn cho Agent → dễ revert nếu cần.
  • MCP Database: Cấp quyền read-only nếu chỉ cần đọc schema. Không cấp DELETE quyền trừ khi thực sự cần.
  • GitHub Token: Dùng Fine-grained Personal Access Token với scope tối thiểu — không dùng classic token full-access.
🛠 Thực Hành: Thiết Lập DevContainer + Agent Mode
  1. Cài Docker Desktop + extension Dev Containers trong VS Code
  2. Tạo file .devcontainer/devcontainer.json theo template trên cho project hiện tại
  3. Mở project trong container: Ctrl+Shift+P → "Reopen in Container"
  4. Trong Agent Mode, thử prompt: "Tạo file README.md đầy đủ cho project này, bao gồm: mô tả, cách cài đặt, commands, và API docs"
  5. Review diff → Apply → kiểm tra README được tạo đúng
🎯 Bài Tập Tổng Kết Chương 2 — Environment Audit
  1. Mở VS Code, kiểm tra icon Copilot ở status bar đang active (màu xanh/trắng)
  2. Chạy terminal: python --version, node --version, git --version — tất cả phải ra số version
  3. Tạo file test_setup.py, gõ # Hàm kiểm tra setup hoàn tất — Copilot phải gợi ý code
  4. Mở Copilot Chat (Ctrl+Shift+I), hỏi: "@vscode liệt kê tất cả extensions tôi đang cài"
  5. Tạo Git repo, commit file test_setup.py với message theo Conventional Commits
  6. Mở settings.json, confirm "editor.formatOnSave": true đang bật

🗒 Tóm Tắt Chương 2

  • VS Code là IDE miễn phí tốt nhất cho AI coding — cài đặt theo hướng dẫn với đầy đủ extensions
  • GitHub Copilot tích hợp qua extension — Tab để chấp nhận, Esc để từ chối, Ctrl+Enter để xem 10 gợi ý
  • Copilot Chat (/explain, /fix, /tests, @workspace) là trợ lý AI ngay trong editor
  • Python + Node.js + Git đã cài đặt và cấu hình đúng
  • settings.json tối ưu: format on save, font đẹp, Copilot bật, bracket colorization
  • Git workflow chuyên nghiệp: Conventional Commits, .gitignore đúng chuẩn, biết resolve merge conflict với AI
  • Docker DevContainer: môi trường lập trình nhất quán — mọi người cùng exact setup, onboarding 0 phút
  • VS Code Agent Mode: giao task lớn cho AI tự lên kế hoạch và thực thi đa bước
  • MCP servers: kết nối Copilot với GitHub, database, filesystem — AI làm được nhiều hơn
🗺 Sơ Đồ — Hành Trình Thiết Lập Môi Trường
flowchart LR A["VS Code"] --> B["Extensions + Copilot"] B --> C["Python venv + Node npm"] C --> D["Git workflow"] D --> E["Docker · Sẵn sàng code"]

🧠 Kiểm Tra Kiến Thức Chương 2

Trả lời 5 câu để củng cố. Đạt ≥ 80% sẽ tự động đánh dấu hoàn thành chương.

1. Trình soạn thảo code chính của khóa học là gì?

VS Code là trình soạn thảo chính, tích hợp Copilot và terminal.

2. Lệnh tạo môi trường ảo trong Python là gì?

python -m venv venv tạo môi trường ảo cô lập cho dự án.

3. Trình quản lý gói của Node.js là gì?

npm là trình quản lý gói của Node.js, cài thư viện bằng npm install.

4. Extension AI cần cài trong VS Code là gì?

GitHub Copilot là extension AI cốt lõi của khóa học.

5. Công cụ nào đóng gói ứng dụng cùng môi trường vào container?

Docker đóng gói ứng dụng vào container để chạy giống nhau ở mọi máy.
Zalo: 0898 619 966 Z Gọi: 0898 619 966