Visual Studio Code là gì? Hướng dẫn sử dụng VSCode cho người mới

Visual Studio Code (VS Code) là một trình soạn thảo mã nguồn miễn phí, đa nền tảng, được phát triển bởi Microsoft. Nó đã nhanh chóng trở thành một trong những trình soạn thảo phổ biến nhất dành cho các nhà phát triển, nhờ giao diện thân thiện, tính năng mạnh mẽ và khả năng mở rộng cao.

Bài viết này sẽ hướng dẫn bạn chi tiết cách sử dụng Visual Studio Code (VSCode), từ những thao tác cơ bản nhất đến những mẹo giúp tăng tốc quá trình lập trình của bạn. Ngoài ra, mình sẽ tổng hợp một vài extension hữu ích và các phím tắt tiện lợi trong VSCode giúp quá trình code trở nên thuận tiện hơn.

1. Lý do nên chọn Visual Studio Code?

Có nhiều lý do khiến VS Code trở thành một lựa chọn hấp dẫn cho các lập trình viên:

• Miễn phí và mã nguồn mở: VS Code hoàn toàn miễn phí và được cấp phép theo giấy phép MIT. Điều này nghĩa là bạn có thể sử dụng và sửa đổi nó tự do mà không phải trả bất kỳ khoản phí nào. Bạn thậm chí có thể đóng góp vào dự án bằng cách sửa lỗi, thêm tính năng mới hoặc dịch thuật. Điều này đã thu hút rất nhiều lập trình viên và đóng góp vào sự phát triển mạnh mẽ của VS Code.
• Đa nền tảng: VS Code có sẵn trên Windows, macOS và Linux, cho phép bạn sử dụng nó trên bất kỳ hệ điều hành nào. Điều này mang lại sự thuận tiện cho các lập trình viên khi họ có thể làm việc trên nhiều thiết bị khác nhau mà không cần thay đổi môi trường phát triển.
• Giao diện thân thiện: VS Code có giao diện đơn giản, dễ sử dụng và trực quan, phù hợp cho cả người mới bắt đầu và các nhà phát triển có kinh nghiệm.
• Hỗ trợ nhiều ngôn ngữ lập trình: VS Code hỗ trợ hơn 30 ngôn ngữ lập trình phổ biến, bao gồm JavaScript, Python, Java, C++, C#, Golang, PHP và nhiều hơn nữa. Bạn có thể sử dụng VS Code để viết mã cho bất kỳ dự án nào, bất kể ngôn ngữ lập trình nào bạn đang sử dụng. VS Code cung cấp hỗ trợ cú pháp, gợi ý mã thông minh và các tính năng gỡ lỗi cho mỗi ngôn ngữ, giúp bạn viết mã hiệu quả và dễ dàng hơn.Ví dụ: Đối với JavaScript: VS Code cung cấp hỗ trợ hoàn chỉnh cho JavaScript, bao gồm IntelliSense (gợi ý mã thông minh), hỗ trợ gỡ lỗi tích hợp, hỗ trợ TypeScript.

• Đa dạng Extension hỗ trợ coder: VS Code có hệ thống extensions rộng lớn, cho phép bạn thêm các tính năng mới và tùy chỉnh trình soạn thảo theo nhu cầu của mình. Đây là một số extensions phổ biến cho người mới bắt đầu sử dụng.
• Hỗ trợ gỡ lỗi hiệu quả: VS Code cung cấp công cụ gỡ lỗi dễ sử dụng, hỗ trợ nhiều ngôn ngữ (Node.js, Python, C++, Java). Điểm nổi bật là thiết lập điểm dừng (Breakpoint), kiểm tra biến (Variable Inspection), điều khiển luồng mã (Control Flow) và console tích hợp.
  So với Sublime Text, VS Code vượt trội về tích hợp gỡ lỗi, tiện ích mở rộng và hỗ trợ Git. Trong khi Sublime Text tập trung vào hiệu suất nhanh và nhẹ nhưng cần phải trả phí. So với Atom, với khả năng tùy chỉnh cao và hỗ trợ cộng tác trực tiếp qua Teletype, lại không bằng VS Code về hiệu suất và ổn định. So với IntelliJ IDEA, mặc dù đắt tiền hơn, cung cấp công cụ phát triển mạnh mẽ và tích hợp sâu cho Java và các ngôn ngữ JVM, nhưng không đa năng như VS Code trong việc hỗ trợ nhiều ngôn ngữ lập trình.
• Kết nối với các dịch vụ phổ biến: VS Code tích hợp tốt với các dịch vụ phổ biến như Git, Azure, GitHub và Docker. Bạn có thể dễ dàng quản lý kho mã Git, triển khai ứng dụng Azure, sử dụng GitHub để cộng tác với các nhà phát triển khác và sử dụng Docker để tạo và chạy các container. Tính năng tích hợp này giúp bạn dễ dàng quản lý và triển khai mã của mình, giúp bạn tập trung vào việc viết mã và phát triển sản phẩm.

2. Hướng dẫn sử dụng Visual Studio Code cho người mới

Bước 1: Bắt đầu tải và cài đặt Visual Studio Code

Trước tiên bạn hãy truy cập trang web chính thức của Visual Studio Code tại địa chỉ: https://code.visualstudio.com.

Nhấn vào nút "Download" và chọn phiên bản phù hợp với hệ điều hành của bạn (Windows, macOS, hoặc Linux). Sau khi tải xuống, hãy làm theo các bước cài đặt ở bên dưới:

2.1. Đối Với Windows

1. Bấm vào và chạy tệp cài đặt (VSCodeUserSetup-{version}.exe) mà bạn đã tải về trên máy.
2. Bấm "Next" để bắt đầu quá trình cài đặt VsCode.
3. Đọc và chấp nhận các điều khoản sử dụng, sau đó nhấp "Next" để tiếp tục quá trình cài đặt.
4. Chọn thư mục cài đặt hoặc giữ nguyên đường dẫn mặc định, rồi bấm "Next" để tiếp tục.
5. Tùy chọn cài đặt thêm:

• Thêm Visual Studio Code vào PATH (giúp bạn có thể mở VS Code từ dòng lệnh).
• Tạo biểu tượng trên màn hình Desktop.
• Tích hợp các tùy chọn vào menu ngữ cảnh của Windows Explorer.

6. Nhấn "Install" để bắt đầu quá trình tải.

7. Sau khi quá trình cài đặt hoàn tất, nhấp vào "Finish" để khởi động VS Code.

2.2. Đối Với macOS

Mở tệp .dmg mà bạn đã tải xuống.

1. Kéo biểu tượng Visual Studio Code sang bên thư mục Applications.
2. Mở thư mục Applications ra và khởi động Visual Studio Code để bắt đầu code.

2.3. Đối Với Linux

Mở terminal và thêm kho phần mềm của Microsoft

sudo apt update
sudo apt install software-properties-common apt-transport-https wget
wget -q https://packages.microsoft.com/keys/microsoft.asc -O- | sudo apt-key add -
sudo add-apt-repository "deb [arch=amd64] https://packages.microsoft.com/repos/vscode stable main"

Cập nhật và cài đặt Visual Studio Code

sudo apt update
sudo apt install code

Bước 2: Khởi động Visual Studio Code

Sau khi cài đặt xong, mở Visual Studio Code bằng cách tìm kiếm "Visual Studio Code" trong menu Start trên Windows hoặc Launchpad trên macOS. Khi mở VS Code, bạn sẽ thấy giao diện chính với các thành phần chính như sau:

• Explorer: Quản lý tệp và thư mục của dự án code.
• Search: Tìm kiếm trong mã nguồn.
• Source Control: Quản lý phiên bản mã nguồn với Git giúp đưa dự án lên GitHub dễ dàng hơn.
• Run and Debug: Chạy và gỡ lỗi chương trình.
• Extensions: Sẽ quản lý và cài đặt các tiện ích mở rộng để hỗ trợ việc lập trình. Những extension này thường được lập trình bởi các lập trình viên khác.

Bước 3: Tạo một dự án mới

Mở Visual Studio Code và chọn File > Open Folder để mở thư mục dự án.

Nhấp chuột phải vào thanh bên trái (Explorer) và chọn New File để tạo tệp mới.

Đặt tên cho tệp mới bằng cách nhập tên tệp (ví dụ: index.html, app.js, hoặc main.py,...) và nhấn Enter.

Bước 4: Viết và chạy mã code

• Trong cửa sổ soạn thảo, bạn có thể bắt đầu viết mã bằng ngôn ngữ lập trình bạn muốn sử dụng.

• VS Code sẽ tự động nhận diện ngôn ngữ lập trình và cung cấp các tính năng hỗ trợ như cú pháp, tô màu, gợi ý mã và nhiều tiện ích khác.

Bước 5: Lưu và chạy mã

• Lưu mã của bạn bằng cách nhấn tổ hợp phím Ctrl + S (Windows) hoặc Cmd + S (macOS). Bạn cũng có thể lưu mã bằng cách chọn File > Save từ menu.

Chạy Mã

Sử Dụng Công Cụ Dòng Lệnh

Nếu bạn lập trình bằng các ngôn ngữ như Python, JavaScript (Node.js), hay C++, bạn có thể chạy mã trực tiếp từ terminal tích hợp trong VS Code:

1. Để mở terminal tích hợp, bạn chọn Terminal từ menu và sau đó chọn New Terminal.
2. Điều hướng đến thư mục chứa tệp mã của bạn (nếu cần) bằng lệnh cd.
3. Để chạy mã code của bạn, sử dụng lệnh tương ứng với ngôn ngữ lập trình đang sử dụng. Ví dụ:

• Python: Sử dụng lệnh python tên_tệp.py.
• Node.js: Sử dụng lệnh node tên_tệp.js.
• C++: Biên dịch và chạy mã bằng lệnh g++ tên_tệp.cpp -o tên_tệp && ./tên_tệp.

Sử Dụng Tiện Ích Mở Rộng (Extensions) để chạy code

Visual Studio Code cung cấp nhiều tiện ích mở rộng giúp bạn chạy mã trực tiếp từ trình soạn thảo:

• Python: Tiện ích mở rộng Python cho phép bạn chạy mã trực tiếp. Bạn có thể nhấp vào biểu tượng tam giác (Run) ở góc trên cùng bên phải của cửa sổ mã hoặc nhấn F5 để thực thi mã.
• Live Server: Nếu bạn phát triển web, tiện ích Live Server giúp bạn khởi động máy chủ cục bộ và xem trước trang web một cách dễ dàng.

3. Một số mẹo sử dụng Visual Studio Code hiệu quả

3.1. Tận dụng sức mạnh của Extensions

VS Code có một kho lưu trữ extension khổng lồ, cung cấp các tính năng bổ sung cho mọi nhu cầu lập trình. Từ việc hỗ trợ ngôn ngữ mới đến việc tăng cường khả năng gỡ lỗi, các extension có thể biến VS Code thành công cụ hoàn hảo cho dự án của bạn.

Cách tìm kiếm và cài đặt extension:

• Nhấn tổ hợp phím Ctrl+Shift+X (hoặc Cmd+Shift+X trên macOS) để mở cửa sổ Extensions.
• Sử dụng thanh tìm kiếm để tìm kiếm extension bạn cần. Sau khi tìm thấy extension phù hợp thì nhấn vào nút Install để cài đặt extension.

Một số extension phổ biến:

• Bracket Pair Colorizer: Hỗ trợ phân biệt các cặp ngoặc đơn, ngoặc kép, ngoặc nhọn,… bằng màu sắc khác nhau, giúp bạn dễ dàng theo dõi cấu trúc code.
• Prettier: Format code tự động theo một quy chuẩn nhất định, giúp code trở nên gọn gàng và dễ đọc, đồng thời đảm bảo tính nhất quán trong phong cách code.
• Live Server: Khởi động một server web cục bộ, giúp bạn xem trực tiếp các thay đổi code trên trình duyệt, tiết kiệm thời gian và tăng hiệu quả phát triển.
• GitHub Pull Requests and Issues: Cho phép bạn xem và quản lý các pull request và issues trực tiếp trong VS Code, giúp bạn quản lý luồng công việc hiệu quả hơn.
• Code Spell Checker: Hỗ trợ kiểm tra chính tả trong code, giúp bạn phát hiện và sửa lỗi chính tả nhanh chóng.
• vscode-icons: Extension này cung cấp các biểu tượng icon cho các tệp và thư mục, giúp bạn dễ dàng nhận diện loại tệp và tổ chức mã nguồn một cách hiệu quả hơn.

3.2. Sử dụng phím tắt hiệu quả

VS Code cung cấp rất nhiều phím tắt giúp bạn thao tác nhanh hơn. Việc ghi nhớ và sử dụng các phím tắt này sẽ giúp bạn tiết kiệm thời gian và năng suất hơn trong quá trình code.

• Một số phím tắt phổ biến:

Ctrl+S: Lưu file code.
Ctrl+Shift+S: Lưu tất cả các file code.
Ctrl+Z: Hoàn tác thao tác trước đó.
Ctrl+Y: Làm lại thao tác đã xoá.
Ctrl+F: Tìm kiếm văn bản hoặc code có trong file.
Ctrl+Shift+F: Tìm kiếm văn bản hoặc mã code trong toàn bộ workspace.
Ctrl+H: Thay thế văn bản.
Ctrl+G: Đi đến dòng code nhất định.
Ctrl+Shift+P: Mở bảng lệnh, cho phép bạn truy cập các chức năng và lệnh của VS Code.
Alt+Left/Right: Di chuyển giữa các tab mở.

Bạn có thể tìm kiếm thêm các phím tắt khác trong menu File > Preferences > Keyboard Shortcuts (hoặc Code > Settings > Keyboard Shortcuts trên macOS). Ngoài ra, bạn có thể tạo các phím tắt tùy chỉnh phù hợp với nhu cầu của mình.

3.3. Tận dụng các tính năng gỡ lỗi mạnh mẽ

VS Code cung cấp một bộ công cụ gỡ lỗi mạnh mẽ, giúp bạn dễ dàng tìm ra và sửa lỗi trong code.

Cách sử dụng gỡ lỗi:

1. Đặt breakpoint: Nhấp vào lề bên trái dòng code cần gỡ lỗi để đặt breakpoint. Khi code chạy đến breakpoint, quá trình thực thi sẽ tạm dừng, cho phép bạn kiểm tra giá trị của các biến và theo dõi luồng thực thi.
2. Khởi động gỡ lỗi: Nhấn nút Run and Debug (hoặc F5) để bắt đầu quá trình gỡ lỗi.
3. Điều khiển gỡ lỗi: Sử dụng các nút Step Over, Step Into, Step Out, Continue để điều khiển quá trình gỡ lỗi theo ý muốn.

Các tính năng gỡ lỗi:

• Watch: Theo dõi giá trị của các biến trong quá trình gỡ lỗi, giúp bạn nắm bắt được trạng thái của code.
• Call Stack: Hiển thị danh sách các hàm được gọi trong quá trình thực thi code, giúp bạn hiểu rõ hơn về luồng thực thi của chương trình.
• Console: Cho phép bạn thực thi các lệnh JavaScript trong quá trình gỡ lỗi, giúp bạn kiểm tra và sửa lỗi một cách hiệu quả.

Kết luận

Visual Studio Code là một trình soạn thảo mã nguồn mạnh mẽ, miễn phí và đa nền tảng, phù hợp cho cả người mới bắt đầu và các nhà phát triển có kinh nghiệm. Với giao diện thân thiện, tính năng mạnh mẽ và khả năng mở rộng cao, Visual Studio Code là một công cụ lý tưởng để viết mã, gỡ lỗi và triển khai dự án của bạn. Hãy thử sử dụng Visual Studio Code để trải nghiệm những ưu điểm mà nó mang lại.

Mời bạn đón đọc thêm các bài viết về lập trình tại blog 200Lab nhé:

• VS code extension cho React
• Những extension cần thiết khi làm việc với Flutter trên VS Code
• Bảo mật thông tin: Cách lưu trữ mật khẩu trong database cách an toàn