Hướng dẫn chi tiết cách tải và sử dụng Visual Studio Code

Là một lập trình viên, bạn chắc hẳn đã quen thuộc với phần mềm lập trình Visual Studio Code do Microsoft phát triển. Với giao diện thân thiện, nhẹ nhàng và nhiều tính năng mạnh mẽ, công cụ này được đông đảo lập trình viên ưa chuộng. Bài viết này sẽ hướng dẫn bạn cách tải Visual Studio Code và những thao tác sử dụng cơ bản.

Visual Studio Code là gì?

Visual Studio Code là một trình soạn thảo mã nguồn miễn phí, được phát triển bởi Microsoft. Công cụ này nhanh chóng trở thành lựa chọn hàng đầu của nhiều lập trình viên nhờ hiệu suất cao và tính năng đa dạng. Visual Studio Code hỗ trợ các chức năng như debug, Git, tô sáng cú pháp. Bên cạnh đó, VSC còn cho phép người dùng tùy chỉnh theme, phím tắt và nhiều tùy chọn khác.

Hướng dẫn tải Visual Studio Code

Để tải và sử dụng Visual Studio Code phiên bản mới nhất, bạn hãy truy cập trang chủ tại địa chỉ: code.visualstudio.com. Sau đó, chọn phiên bản tương thích với hệ điều hành trên máy tính của bạn và tiến hành tải xuống.

Khi đã tải xong, bạn chỉ cần thực hiện các bước sau:

• Bước 1: Nhấp đúp vào file cài đặt để khởi động quá trình cài đặt VSC.
• Bước 2: Nhấn I Agree để chấp nhận các điều khoản sử dụng.
• Bước 3: Nhấn Next để tiếp tục qua các bước tiếp theo.
• Bước 4: Tích chọn các tùy chọn sau:
  • Thêm hành động “Open with code” vào menu ngữ cảnh của tệp trong Windows Explorer.
  • Thêm hành động “Open with code” vào menu ngữ cảnh của thư mục trong Windows Explorer.
  • Đăng ký Code làm trình chỉnh sửa cho các loại tệp được hỗ trợ.

• Bước 5: Đảm bảo tích chọn Add to PATH và nhấn Install.
• Bước 6: Chờ quá trình cài đặt hoàn tất, sau đó nhấn Finish để kết thúc.

Hướng dẫn sử dụng Visual Studio Code cho HTML

• Thanh sidebar

Phía bên trái cửa sổ, bạn sẽ thấy 4 biểu tượng được sắp xếp dọc theo cạnh. Mỗi biểu tượng đại diện cho một chức năng cụ thể mà bạn có thể dễ dàng nhận biết.

• • Hai tờ giấy chồng lên nhau: Đây là mục Explorer, nơi hiển thị cây thư mục của dự án.
  • Biểu tượng kính lúp: Đây là công cụ tìm kiếm. Khi nhấp vào, một cửa sổ sẽ hiện ra, cho phép bạn tìm kiếm các đối tượng trong thư mục dự án.

• • Một công cụ không thể thiếu trong môi trường lập trình nhóm và quản lý phiên bản chính là GIT. Nếu dự án chưa được Git quản lý, VSC sẽ hiển thị nút để bạn khởi tạo kho lưu trữ Git.
  • Biểu tượng con bọ đại diện cho chức năng debugger. Chức năng này cho phép bạn kiểm tra giá trị biến, chạy từng dòng code để theo dõi các thay đổi trong quá trình thực thi.

• Thanh trạng thái

Một điểm đáng chú ý trong cách sử dụng Visual Studio Code cho HTML là thanh trạng thái. Ở góc dưới bên trái, bạn sẽ thấy biểu tượng kèm theo các con số. Đây là nơi hiển thị số lượng lỗi (error) và cảnh báo (warning) trong code. Nếu các con số này lớn hơn 0, bạn cần kiểm tra và khắc phục ngay.

Ở góc dưới bên phải. Mục đầu tiên hiển thị vị trí dòng và cột của con trỏ. Tiếp theo là định dạng encoding, mặc định là UTF-8. Bạn có thể thay đổi encoding bằng cách nhấn vào và chọn định dạng phù hợp.

Cuối cùng là ký tự kết thúc dòng, trong LINUX là Line Feed (LF), còn trên Windows là Carriage Return và Line Feed (CRLF).

• Khung nhập lệnh

Command Palette là một tính năng nổi bật của Sublime Text, được nhiều trình soạn thảo hiện đại tích hợp. Để di chuyển nhanh đến một file trong dự án, bạn chỉ cần nhấn CTRL + P, khung nhập lệnh sẽ xuất hiện giữa màn hình, nhập tên file để hiển thị kết quả phù hợp nhất.

Để thực hiện cách sử dụng Visual Studio Code, bạn có thể dùng tổ hợp phím Ctrl + Shift + P, sau đó nhập lệnh cần thực thi vào khung hiển thị.

Các Plugin hỗ trợ giúp sử dụng VSC dễ dàng hơn

• CSS Peek

CSS Peek là công cụ giúp lập trình viên di chuyển nhanh đến vị trí định nghĩa các class và ID trong CSS. Khi bạn nhấp vào một selector trong file HTML, CSS Peek sẽ đưa con trỏ đến đúng file và vị trí mà class hoặc ID được khai báo.

• Color info

Đây là một tiện ích nhỏ giúp hiển thị thông tin chi tiết về màu sắc được sử dụng trong CSS. Khi di chuột qua một đoạn mã CSS, bạn có thể xem trực tiếp màu sắc, mã màu và các định dạng màu tương ứng.

• Open In Browser

Visual Studio Code không tích hợp sẵn tính năng mở file trực tiếp trên trình duyệt. Tuy nhiên, với plugin này, bạn có thể thêm tùy chọn mở file bằng trình duyệt thông qua menu khi nhấp chuột phải vào file cần xem.