Cơ bảnKiến thức cơ bản

VS Code là gì? Cài đặt và extension hay nhất cho lập trình viên

8 phút đọc16 lượt xem
#vs code#visual studio code#extension vs code#công cụ lập trình#cài đặt vs code

VS Code là gì? Cài đặt và extension hay nhất cho lập trình viên

Khi bắt đầu học lập trình, bạn cần một công cụ để viết code. Và công cụ được hơn 73% lập trình viên trên thế giới sử dụng chính là VS Code (Visual Studio Code).

VS Code là gì?

Visual Studio Code (VS Code) là trình soạn thảo code miễn phí, mã nguồn mở do Microsoft phát triển và ra mắt năm 2015. Trong vài năm ngắn, nó đã trở thành công cụ phổ biến nhất thế giới cho lập trình viên.

Số liệu ấn tượng

  • Stack Overflow Developer Survey 2025: 73% lập trình viên dùng VS Code (xếp hạng 1)
  • Hơn 14 triệu người dùng hoạt động hàng tháng
  • Hơn 50.000 extension trên marketplace
  • Hoàn toàn miễn phí và mã nguồn mở

Cài đặt VS Code

Windows

  1. Truy cập code.visualstudio.com
  2. Click "Download for Windows"
  3. Chạy file .exe, tick vào "Add to PATH"

macOS

  1. Truy cập code.visualstudio.com, tải file .zip
  2. Kéo Visual Studio Code.app vào Applications
  3. Command Palette → "Install 'code' command in PATH"

Linux (Ubuntu)

sudo apt-get update
sudo apt-get install code

Phím tắt quan trọng nhất

Thao tácWindows/LinuxmacOS
Command PaletteCtrl+Shift+PCmd+Shift+P
Mở file nhanhCtrl+PCmd+P
Tìm kiếm toàn bộCtrl+Shift+FCmd+Shift+F
Mở terminalCtrl+`Ctrl+`
Comment dòngCtrl+/Cmd+/

Top 10 Extension không thể thiếu

  1. Prettier — Format code tự động khi lưu
  2. ESLint — Kiểm tra lỗi JavaScript/TypeScript
  3. Live Server — Tự động reload trình duyệt
  4. GitLens — Git siêu năng lực
  5. Python (Microsoft) — Bắt buộc cho Python
  6. Auto Rename Tag — Đổi tên thẻ HTML tự động
  7. Bracket Pair Colorizer — Tô màu dấu ngoặc
  8. Thunder Client — Test API trong VS Code
  9. Material Icon Theme — Icon đẹp cho file
  10. Vietnamese Language Pack — Giao diện tiếng Việt

Cấu hình VS Code cho Python

{
  "python.defaultInterpreterPath": "python3",
  "[python]": {
    "editor.defaultFormatter": "ms-python.black-formatter",
    "editor.formatOnSave": true
  },
  "editor.fontSize": 14,
  "editor.tabSize": 4
}

Cấu hình VS Code cho JavaScript/TypeScript

Tương tự như cấu hình Python, bạn nên thiết lập môi trường JavaScript/TypeScript chuẩn ngay từ đầu. Mở settings.json (Ctrl+Shift+P → "Open User Settings JSON") và thêm:

{
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
  "eslint.validate": ["javascript", "typescript", "typescriptreact"],
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.tabSize": 2
}

Sau khi lưu, mỗi lần bạn nhấn Ctrl+S, Prettier sẽ tự động format code và ESLint sẽ sửa các lỗi có thể sửa tự động.

Tính năng ẩn mà nhiều người không biết

  • Multi-cursor Editing (Alt+Click): Giữ Alt rồi click nhiều vị trí khác nhau để có nhiều con trỏ cùng lúc. Rất hữu ích khi cần đổi tên nhiều biến hoặc thêm text ở nhiều dòng cùng lúc. Dùng Ctrl+D để chọn thêm từ giống nhau tiếp theo.
  • Zen Mode (Ctrl+K Z): Ẩn tất cả UI phụ (sidebar, statusbar, tab bar) chỉ giữ lại vùng code. Lý tưởng khi cần tập trung cao độ. Nhấn Escape 2 lần để thoát.
  • Remote Development Extension: Bộ extension "Remote - SSH" cho phép bạn mở và chỉnh sửa code trực tiếp trên server Linux qua SSH — giao diện y chang làm việc local, không cần copy file qua lại.
  • Built-in Git Integration: Tab Source Control (Ctrl+Shift+G) cho phép stage, commit, push, pull ngay trong VS Code mà không cần mở terminal. GitLens extension còn bổ sung thêm blame, history theo từng dòng.
  • Snippets và Emmet: Trong file HTML, gõ ! rồi Tab để tạo khung HTML đầy đủ trong 1 giây. Gõ ul>li*3 rồi Tab để tạo danh sách 3 mục. Bạn cũng có thể tự tạo snippet riêng qua "Configure User Snippets".

Câu hỏi thường gặp

VS Code hay WebStorm — nên dùng cái nào?
VS Code miễn phí, nhẹ hơn và có hệ sinh thái extension khổng lồ. WebStorm (JetBrains) là IDE trả phí (~$7/tháng) với tính năng refactoring và phân tích code thông minh hơn out-of-the-box — đặc biệt hữu ích cho dự án JavaScript/TypeScript lớn. Đối với người mới học hoặc dự án cá nhân, VS Code là lựa chọn tốt nhất. WebStorm đáng cân nhắc khi đã đi làm ở team dùng JetBrains.

VS Code hay Vim — cái nào tốt hơn?
Đây là hai triết lý khác nhau. Vim (hoặc Neovim) cực kỳ nhanh khi thành thạo vì thao tác hoàn toàn bằng bàn phím, nhưng đường cong học tập dốc đứng. VS Code thân thiện hơn nhiều cho người mới. Tin vui: bạn không cần chọn — cài extension "Vim" trong VS Code để có vim keybindings mà vẫn giữ được tất cả tính năng của VS Code.

Kết luận

VS Code là công cụ miễn phí nhưng mạnh ngang IDE trả phí. Sau khi cài đặt và cấu hình đúng, bạn sẽ thấy năng suất lập trình tăng lên đáng kể.

Về tác giả

Ảnh đại diện tác giả Kenji — họa tiết hình học

Kenji

Kỹ sư phần mềm full-stack (Web), hơn 5 năm kinh nghiệm thực tế

  • Python
  • DB
  • Hạ tầng
  • Đào tạo & cố vấn
  • AI

Làm việc cùng đồng nghiệp người Việt, tôi thấy thiếu tài liệu kỹ thuật rõ ràng bằng tiếng Việt. codeahoc là nơi tôi chia sẻ theo hướng thực tế, dễ áp dụng.

Nguyên tắc nội dung

  • Ưu tiên nguồn gốc và góc nhìn từ thực tế triển khai.
  • Nếu có sai sót, nội dung sẽ được cập nhật và sửa kịp thời.

Khóa học liên quan

The Complete Web Developer Bootcamp

Học HTML, CSS, JavaScript, React, Node.js toàn diện.

4.7
Xem khóa học →

CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

CSS nâng cao: Flexbox, Grid, animations, responsive design.

4.6
Xem khóa học →

*Đây là liên kết liên kết (affiliate link). Chúng tôi có thể nhận hoa hồng nếu bạn mua khóa học qua liên kết này.