Lộ trình học tập + bài tập thực hành

Lộ trình học tập repo VS Code

← Về MOC

Kiến thức nền cần có

• TypeScript cơ bản: interface, class, generic, decorator, async/await. Tài liệu chính thức: TypeScript Handbook (typescriptlang.org/docs/handbook).
• Node.js & npm cơ bản: cài package, chạy script.
• Git: fork, branch, pull request.
• (Tùy chọn) HTML/CSS/DOM nếu muốn sửa giao diện.

Giai đoạn 1 – Người dùng nâng cao viết extension (1–2 tuần)

Mục tiêu: hiểu Extension API, chưa cần build repo.

#	Việc làm	Ghi chú tham chiếu
1	Đọc tổng quan Code - OSS và cấu trúc repo	Tổng quan: Code - OSS và Visual Studio Code, Cấu trúc thư mục gốc của repo
2	Làm Hello World bằng yo code, chạy F5	Thực hành: viết extension đầu tiên
3	Làm bài “SQL Helper” (status bar + command + setting)	Thực hành: viết extension đầu tiên
4	Đọc extension sql và json trong repo – hiểu grammar & language configuration	Built-in Extensions – extension tích hợp sẵn
5	Đọc tài liệu Extension Host, hiểu extensionKind, main/browser	Extension Host & RPC

✅ Tự kiểm tra: giải thích được activation event, contribution point, vì sao context.subscriptions quan trọng.

Giai đoạn 2 – Hiểu kiến trúc lõi (2–3 tuần)

Mục tiêu: đọc hiểu code trong src/vs.

#	Việc làm	Ghi chú
1	Nắm 7 lớp và 6 môi trường đích	Kiến trúc phân lớp (Layers), Môi trường đích (Target Environments)
2	Vẽ lại sơ đồ tiến trình trên giấy	Kiến trúc đa tiến trình (Multi-process)
3	Lần theo luồng khởi động trong code	Luồng khởi động (Startup flow)
4	Đọc src/vs/platform/instantiation/common/instantiation.ts	Dependency Injection & Services
5	Đọc trọn thư mục workbench/contrib/timeline (nhỏ, đủ thành phần)	Contribution Model & Registry
6	Đọc base/common/lifecycle.ts, event.ts	Disposable & Event
7	Đọc hướng dẫn observables, thử viết lại ví dụ hóa đơn	Observables (lập trình phản ứng)
8	Lần theo một API: createStatusBarItem từ vscode.d.ts → mainThreadStatusBar.ts	Extension Host & RPC

✅ Tự kiểm tra: trả lời được “Nếu tôi thêm một service mới chỉ dùng cho desktop, tôi đặt file ở đâu, đăng ký thế nào, và import từ đâu?”

Đáp án gợi ý (bấm để mở)

• Interface + createDecorator đặt ở .../common/ (ví dụ src/vs/workbench/services/myFeature/common/myFeature.ts).
• Hiện thực desktop đặt ở .../electron-browser/myFeatureService.ts, cuối file gọi registerSingleton(IMyFeatureService, MyFeatureService, InstantiationType.Delayed).
• Import file hiện thực từ src/vs/workbench/workbench.desktop.main.ts.
• Lưu ý: nếu code web cũng dùng service này thì phải có bản hiện thực cho web, nếu không sẽ lỗi.

Giai đoạn 3 – Build, debug, test (1–2 tuần)

#	Việc làm	Ghi chú
1	Cài môi trường (hoặc dùng Codespaces) và build thành công	Build & Run từ mã nguồn
2	Chạy ./scripts/code.sh, thử Reload Window sau khi sửa một chuỗi giao diện	Build & Run từ mã nguồn
3	Đặt breakpoint ở renderer và extension host	Debug VS Code
4	Chạy unit test một file bằng npm run test-node -- --run ...	Testing – kiểm thử
5	Viết thêm 1 test case cho strings.test.ts (chỉ để luyện, không cần gửi PR)	Testing – kiểm thử

Giai đoạn 4 – Đóng góp thật (liên tục)

#	Việc làm	Ghi chú
1	Đọc kỹ quy ước code và chạy eslint trên file sửa	Coding Guidelines – quy ước viết code
2	Tìm issue nhãn good first issue, bình luận xin nhận	Quy trình đóng góp (Issue, PR, API)
3	Gửi PR nhỏ, có test, liên kết issue	Quy trình đóng góp (Issue, PR, API)
4	(Nâng cao) Tìm hiểu Agents Window, Chat	Agents Window & AI trong repo

Bài tập tổng hợp (mức khó tăng dần)

1. Dễ – Tìm nơi khai báo setting editor.fontSize. Gợi ý: tìm chuỗi 'editor.fontSize' sẽ không thấy, vì setting editor được đăng ký theo kiểu khác – hãy mở src/vs/editor/common/config/editorOptions.ts và tìm class EditorFontSize cùng dòng fontSize: register(new EditorFontSize()). Bài học: không phải setting nào cũng đăng ký trực tiếp qua registerConfiguration.
2. Dễ – Liệt kê 5 built-in extension có cả main và browser trong package.json.
3. Trung bình – Theo công thức ở Extension Host & RPC, lần theo API vscode.window.showInformationMessage tới tận file mainThread… xử lý.
4. Trung bình – Vẽ sơ đồ phụ thuộc của contrib timeline: nó import từ những contrib nào khác? Có vi phạm quy tắc “không với vào internals” không?
5. Khó – Tạo (trên bản fork, không gửi PR) một contribution “Hello Status” trong workbench/contrib/helloStatus/browser/helloStatus.contribution.ts: dùng registerWorkbenchContribution2 với WorkbenchPhase.Eventually để ghi log qua ILogService. Nhớ import file này từ workbench.common.main.ts và chạy npm run valid-layers-check.

Liên kết

• Tra thuật ngữ: Thuật ngữ (Glossary)
• Tài liệu gốc: Nguồn tham khảo chính thức