Visual Studio Code – Setup and First Webpage

Visual Studio Code (VSCode) – Setup and First Webpage

1. Cài đặt Visual Studio Code

Mở trình duyệt và tìm VS Code
- Trong ô tìm kiếm, gõ “VSCode” hoặc “Visual Studio Code”.
- Nhấp vào kết quả chính thức của Microsoft Visual Studio Code để vào trang tải về.
Chọn phiên bản phù hợp với hệ điều hành
- Nếu bạn đang dùng Windows, nhấn “Download for Windows”.
- Nếu đang dùng macOS, chọn “Download for macOS”.
- Với Linux, có các tùy chọn .deb hoặc .rpm, nhưng trong bài này ta hướng dẫn trên Windows.
Tiến hành cài đặt trên Windows
- Sau khi tải về, mở thư mục chứa file cài đặt (thường là Downloads), nhấp chuột phải vào file, chọn “Run as administrator” để chạy với quyền quản trị.
- Hầu hết những bước cài đặt còn lại bạn chỉ cần nhấn “Next” và chấp nhận các thiết lập mặc định.
- Khi cài xong, VS Code sẽ hỏi có tạo icon trên Desktop không, bạn có thể chọn “Create a desktop icon” để tiện mở nhanh.
Mở VS Code lần đầu
- Nhấp đúp vào icon VS Code trên Desktop hoặc tìm trong Start Menu.
- Giao diện mặc định khi vừa cài xong sẽ chỉ là một cửa sổ trắng với các tùy chọn cơ bản.

2. Tạo Thư mục Dự án

Lý do không tạo trên ổ C
- Ổ C thường chứa hệ điều hành, dễ bị mất dữ liệu khi Windows cần cài đặt hoặc gặp sự cố.
- Tốt nhất, bạn hãy tạo thư mục dự án trên một ổ khác (D, E, F…) để đảm bảo an toàn về lâu dài.
- Lưu ý: khi bắt đầu học, bạn có thể vẫn tạo tạm trên ổ C nếu máy chưa có ổ khác, nhưng sau này nên di chuyển sang ổ khác.
Mở VS Code và chọn thư mục dự án
- Trong VS Code, chọn File → Open Folder… (hoặc nhấn tổ hợp phím Ctrl + K, Ctrl + O để mở nhanh).
- Duyệt đến vị trí ổ đĩa (ví dụ D:\) hoặc bất kỳ nơi bạn muốn lưu trữ, rồi tạo mới một thư mục, ví dụ đặt tên Project-Web-1.
  - Lưu ý: Tên thư mục không nên có dấu cách để tránh lỗi đường dẫn. Ví dụ: Project-Web-1, MyFirstWeb, không dùng “Project Web 1”.
- Chọn thư mục vừa tạo và nhấn Select Folder.
- Lúc này, thanh bên trái của VS Code sẽ hiển thị cấu trúc thư mục trống của bạn.
Tin cậy nguồn (Trust)
- Khi bạn mở thư mục mới, VS Code thường hỏi: “Do you trust the authors of the files in this folder?”
- Chọn “Yes, I trust the authors” để VS Code kích hoạt đầy đủ tính năng phát triển. Nếu chọn “Temporarily Open” hoặc “No”, một số tính năng có thể bị giới hạn.

3. Tạo File HTML Đầu Tiên (index.html)

Khởi tạo file index.html
- Trong thanh Explorer (bên trái), nhấp vào biểu tượng “New File” (hình tờ giấy có dấu cộng).
- Đặt tên file là index.html.
  - Chú ý: Khi bạn truy cập một trang web từ domain hoặc hosting, trình duyệt mặc định sẽ tìm đến file index.html để hiển thị nội dung chính (homepage).
Tạo cấu trúc HTML cơ bản
- Mở file index.html vừa tạo.
- Gõ nhanh dấu chấm than ! rồi nhấn Tab (hoặc Enter) để VS Code tự động sinh ra cấu trúc HTML mẫu:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Bài học đầu tiên</title>
</head>
<body>
    
</body>
</html>
                    
```
- Bạn có thể sửa phần <title> thành tên trang web, ví dụ <title>Bài học đầu tiên</title>.
Thêm nội dung thử nghiệm
- Trong thẻ <body>, gõ:
```
<h1>Chào mừng bạn đến với trang web đầu tiên!</h1>
```
- Nhấn Ctrl + S để lưu file. Nếu bên cạnh tên file có dấu chấm tròn trắng, nghĩa là chưa lưu; khi đã lưu, dấu chấm biến mất.

4. Cài Đặt Các Thiết Lập Cơ Bản Cho VS Code

Tăng Kích Thước Font cho Dễ Nhìn
- Mở Settings
  - Nhấn vào biểu tượng bánh răng (góc dưới trái) → chọn Settings hoặc nhấn Ctrl + ,.
- Tìm từ khóa “font size”
  - Ở ô tìm kiếm, gõ font size (hoặc Editor: Font Size).
  - Tại mục Editor: Font Size, nhập giá trị lớn hơn mặc định (mặc định thường là 14). Ví dụ: 22 hoặc 24 tùy sở thích.
- Quan sát sự thay đổi
  - Ngay lập tức, vùng soạn thảo code sẽ phóng to theo giá trị vừa nhập.
  - Mở thêm file index.html hoặc các file khác để kiểm tra cách hiển thị.
Chia Cửa Sổ Làm Việc
- Kéo/thả để chia màn hình
  - Giữ chuột trái vào tab file (ví dụ index.html), kéo sát cạnh trái hoặc cạnh phải của VS Code đến khi thấy vùng gợi ý chia nửa màn hình, rồi thả chuột.
  - Kết quả: VS Code sẽ ghim file đó vào nửa màn hình, để phần còn lại trống để bạn mở Settings hoặc file khác.
- Thao tác lần nữa để ghim Settings
  - Mở Settings (Ctrl + ,) và kéo Settings sang nửa màn hình còn lại, bạn sẽ thấy cùng lúc cả hai cửa sổ: một bên là code, một bên là Settings.
  - Khi chỉnh sửa Settings (ví dụ đổi font size), bạn có thể quan sát trực quan ngay phía bên kia.
- Đóng/tắt khi không cần
  - Sau khi đã thiết lập xong, bạn có thể đóng cửa sổ Settings bằng cách nhấn dấu “X” ở tab Settings, để lại cửa sổ code chính.
Hiển Thị Phần Mở Rộng File (.html)
- Kiểm tra phần mở rộng
  - Windows thường ẩn đuôi file nếu không cài đặt. Bạn vào File Explorer → chọn View → Options → chuyển sang tab View → bỏ chọn “Hide extensions for known file types”.
  - Nhấn Apply và OK. Lúc này bạn sẽ thấy rõ index.html thay vì chỉ “index”.

5. Chạy Trang HTML Trên Trình Duyệt

Mở file bằng trình duyệt
- Trong VS Code: nhấn chuột phải vào index.html, chọn Reveal in Explorer (hoặc nhấn Shift + Alt + R), cửa sổ Windows Explorer sẽ mở thư mục dự án chứa file.
- Nhấn chuột phải vào file index.html, chọn Open with → chọn trình duyệt bạn mong muốn (Chrome, Firefox, Edge, v.v.).
- Hoặc chỉ cần nhấp đúp vào file, nếu bạn đã thiết lập Chrome (hoặc một trình duyệt khác) làm mặc định.
Quan sát kết quả
- Trình duyệt sẽ hiển thị trang trắng với dòng chữ:
```
Chào mừng bạn đến với trang web đầu tiên!
```
- Mỗi khi bạn sửa code (ví dụ thay nội dung <h1>…</h1>) và nhấn Ctrl + S, quay lại trình duyệt và nhấn F5 (Refresh) để nạp lại nội dung mới nhất.

6. Quản Lý Nhiều Dự Án Trong VS Code

Đóng dự án hiện tại
- Chọn File → Close Folder để đóng toàn bộ dự án đang mở.
- Lúc này, VS Code sẽ không còn hiển thị nội dung thư mục nào.
Mở nhiều thư mục vào Workspace
- Chọn File → Add Folder to Workspace… (hoặc File → Open Folder… nếu chưa có dự án nào).
- Chọn lần lượt các thư mục dự án nhỏ của bạn (ví dụ: Project-Web-1, Project-Web-2, Project-Web-3).
- Sau khi thêm, bạn sẽ thấy các thư mục này liệt kê trong sidebar, có thể bấm vào từng thư mục để xem và chỉnh file riêng biệt.
Lưu Workspace (tùy chọn)
- Nếu muốn lưu lại cấu hình nhiều thư mục này để lần sau mở nhanh, bạn chọn File → Save Workspace As…, đặt tên file ví dụ MyWebProjects.code-workspace.
- Lần sau chỉ cần mở file .code-workspace này để VS Code tự động load tất cả các dự án con.

7. Mẹo Tham Khảo: Wayback Machine (web.archive.org)

Wayback Machine (web.archive.org) là một dự án lưu trữ toàn bộ lịch sử trang web từ năm 1996 đến hiện tại.
Bạn có thể nhập tên miền bất kỳ (ví dụ: facebook.com) để xem giao diện, nội dung website ở các thời điểm quá khứ.
- Ví dụ: Giao diện Facebook năm 2004, 2010, 2014…
Điều này giúp bạn hiểu được quá trình phát triển của một trang web qua thời gian, từ đó rút ra kinh nghiệm thiết kế, bố cục và tính năng cho dự án của mình.

8. Tổng kết

- Đến đây, bạn đã nắm được cách tải và cài đặt VS Code, tạo thư mục dự án, khởi tạo file index.html với cấu trúc HTML cơ bản, và chạy thử trên trình duyệt.
- Đồng thời, bạn học được cách tăng kích thước font, chia màn hình, và quản lý nhiều dự án trong cùng một Workspace của VS Code.
- Ở các bài sau, chúng ta sẽ tiếp tục cài đặt thêm những công cụ hỗ trợ (Extensions) để tối ưu việc lập trình web, đồng thời làm quen với các ngôn ngữ cơ bản như HTML, CSS, JavaScript…

Chúc bạn thực hành thành công và hẹn gặp lại ở bài tiếp theo!