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.
🎯 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
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
-
Download VS Code
Truy cập
code.visualstudio.comvà download bản installer cho hệ điều hành của bạn (Windows/Mac/Linux). Chọn phiên bản Stable. -
Cài đặt với cài đặt mặc định
Trên Windows, nhớ tick vào "Add to PATH" và "Register Code as an editor for supported file types". Điều này quan trọng để chạy
code .từ terminal. -
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
Keyboard Shortcuts Thiết Yếu
| Phím tắt (Windows) | Phím tắt (Mac) | Chức năng |
|---|---|---|
Ctrl+P | Cmd+P | Mở file nhanh (Quick Open) |
Ctrl+Shift+P | Cmd+Shift+P | Command Palette |
Ctrl+` | Ctrl+` | Mở/đóng Terminal |
Ctrl+B | Cmd+B | Ẩn/hiện Sidebar |
Ctrl+/ | Cmd+/ | Toggle comment |
Alt+↑/↓ | Option+↑/↓ | Di chuyển dòng lên/xuống |
Ctrl+D | Cmd+D | Chọn từ tiếp theo giống nhau |
Ctrl+Shift+K | Cmd+Shift+K | Xóa dòng hiện tại |
F12 | F12 | Go to Definition |
Ctrl+Z / Ctrl+Y | Cmd+Z / Cmd+Y | Undo / Redo |
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.
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)
Extensions Python (Cần cho Chương 4)
Extensions JavaScript/Web (Cần cho Chương 5-8)
rafce → tạo component ngay.Extensions Tiện Ích
Bài 2.3 — Cài Đặt & Cấu Hình GitHub Copilot
Bước 1: Đăng ký GitHub Copilot
-
Tạo tài khoản GitHub
Nếu chưa có, truy cập
github.com/signupvà tạo tài khoản miễn phí. -
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). -
Cài Extension trong VS Code
Cài 2 extensions:
GitHub CopilotvàGitHub Copilot Chat. Sau khi cài, VS Code sẽ yêu cầu đăng nhập GitHub. -
Đă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:
# 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!
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?
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ệnh | Chức năng | Ví dụ |
|---|---|---|
/explain | Giải thích code đang chọn | /explain (chọn code trước) |
/fix | Sửa bug trong code đang chọn | /fix tại sao hàm này không trả về đúng? |
/tests | Tạo unit tests cho code đang chọn | /tests viết tests cho hàm này |
/doc | Viết documentation/docstring | /doc |
@workspace | Hỏi về toàn bộ project | @workspace tìm tất cả API endpoints |
@vscode | Hỏ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?
- 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
Bài 2.4 — Cài Python, Node.js & Tối Ưu Workspace
Cài đặt Python
-
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". -
Kiểm tra cài đặt
Mở Terminal trong VS Code (Ctrl+`) và chạy:
python --version
# Output: Python 3.12.x
pip --version
# Output: pip 24.x from ...
Cài đặt Node.js
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).
# 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:
{
// === 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
}
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.
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"
{
// === 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
# 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 nhanh | Ctrl+P |
| Command Palette | Ctrl+Shift+P |
| Mở terminal | Ctrl+` |
| Copilot Chat | Ctrl+Shift+I |
| Inline Chat với Copilot | Ctrl+I |
| Go to definition | F12 |
| Find all references | Shift+F12 |
| Rename symbol | F2 |
| Multi-cursor (click) | Alt+Click |
| Duplicate line | Shift+Alt+↓ |
| Di chuyển dòng | Alt+↑/↓ |
| Format document | Shift+Alt+F |
- 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.
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.
- 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 init— Khởi tạo repogit add .— Stage tất cảgit commit -m "msg"git push origin maingit stash— Tạm cất thay đổi
Setup Git & Kết Nối GitHub
Download tại git-scm.com. Windows: chạy installer, chọn "Use VS Code as default editor". Kiểm tra: git --version
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
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
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
# === 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
Conventional Commits — Chuẩn Commit Message
| Type | Ý nghĩa | Ví dụ |
|---|---|---|
feat | Tính năng mới | feat: add login form |
fix | Sửa bug | fix: correct password validation |
docs | Cập nhật documentation | docs: update README setup guide |
style | Format, whitespace (không đổi logic) | style: format with prettier |
refactor | Tái cấu trúc code | refactor: extract auth helper |
test | Thêm/sửa tests | test: add unit tests for auth |
chore | Task vặt (build, deps...) | chore: update dependencies |
perf | Cải thiện performance | perf: 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:
# 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
.gitignore — File Bắt Buộc Phải Có
# === 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.*
- .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
- Tạo folder mới
my-ai-project, mở bằng VS Code - Mở terminal:
git init→git config user.name "..." - Tạo file
.gitignore, copy template phía trên vào - Tạo file
README.mdvới mô tả project - Hỏi Copilot Chat: "Giúp tôi viết README.md chuyên nghiệp cho project [tên project]"
- Commit đầu tiên:
git add . && git commit -m "chore: initial project setup" - Tạo repo trên GitHub.com và push:
git remote add origin URL && git push -u origin main
- 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
- Mở VS Code, kiểm tra icon Copilot ở status bar đang active (màu xanh/trắng)
- Chạy terminal:
python --version,node --version,git --version— tất cả phải ra số version - Tạo file
test_setup.py, gõ# Hàm kiểm tra setup hoàn tất— Copilot phải gợi ý code - Mở Copilot Chat (
Ctrl+Shift+I), hỏi: "@vscode liệt kê tất cả extensions tôi đang cài" - Tạo Git repo, commit file test_setup.py với message theo Conventional Commits
- 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