Lập trình

Hướng Dẫn Cài Đặt và Sử Dụng Visual Studio Code trên Windows, macOS, Linux và Code Server

By dabeecao

Visual Studio Code (VS Code) là một trong những trình soạn thảo mã nguồn phổ biến nhất hiện nay, hỗ trợ nhiều ngôn ngữ lập trình và cung cấp nhiều tiện ích mở rộng giúp tăng năng suất làm việc. Bài hướng dẫn này sẽ hướng dẫn bạn cách cài đặt và sử dụng VS Code trên các hệ điều hành Windows, macOS, Linux cũng như cài đặt Code Server để làm việc từ xa bằng nhiều phương pháp khác nhau. Ngoài ra, chúng ta cũng sẽ tìm hiểu các thiết lập cơ bản để tối ưu hóa trải nghiệm làm việc.

Cài Đặt Visual Studio Code

1. Cài Đặt trên Windows

Bước 1: Truy cập trang tải xuống chính thức của VS Code tại https://code.visualstudio.com/.

Bước 2: Nhấn nút “Download for Windows” để tải tệp cài đặt .exe.

Bước 3: Sau khi tải về hoàn tất, mở tệp .exe và làm theo hướng dẫn cài đặt:

  • Chấp nhận các điều khoản sử dụng.
  • Chọn thư mục cài đặt (mặc định thường là ổ đĩa C).
  • Chọn các tùy chọn bổ sung như thêm VS Code vào PATH, tạo biểu tượng trên desktop.

Bước 4: Nhấn “Install” và chờ quá trình cài đặt hoàn tất. Sau đó, nhấn “Finish” để mở VS Code.

2. Cài Đặt trên macOS

Bước 1: Truy cập trang tải xuống chính thức của VS Code tại https://code.visualstudio.com/.

Bước 2: Nhấn nút “Download for macOS” để tải tệp cài đặt .zip.

Bước 3: Sau khi tải về, giải nén tệp .zip và di chuyển ứng dụng Visual Studio Code vào thư mục Applications.

Bước 4: Mở ứng dụng từ thư mục Applications. Để mở từ terminal, bạn có thể thêm VS Code vào PATH bằng cách mở VS Code, nhấn Cmd + Shift + P, gõ shell command và chọn “Shell Command: Install ‘code’ command in PATH”.

3. Cài Đặt trên Linux

Các bước cài đặt trên Linux có thể khác nhau tùy thuộc vào bản phân phối bạn đang sử dụng. Dưới đây là hướng dẫn cho các bản phân phối phổ biến:

Debian/Ubuntu:

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"
sudo apt update
sudo apt install code

Fedora:

sudo rpm --import https://packages.microsoft.com/keys/microsoft.asc
sudo sh -c 'echo -e "[code]\nname=Visual Studio Code\nbaseurl=https://packages.microsoft.com/yumrepos/vscode\nenabled=1\ngpgcheck=1\ngpgkey=https://packages.microsoft.com/keys/microsoft.asc" > /etc/yum.repos.d/vscode.repo'
dnf check-update
sudo dnf install code

Arch Linux:

Trên Arch Linux và các phân phối dựa trên nó, bạn có thể cài đặt VS Code từ AUR:

yay -S visual-studio-code-bin

Lưu ý: Bạn cần cài đặt trình quản lý AUR như yay trước khi thực hiện lệnh trên.

Cài Đặt Code Server

Code Server là phiên bản VS Code có thể chạy trên máy chủ và truy cập qua trình duyệt, giúp bạn làm việc từ xa một cách dễ dàng. Có nhiều phương pháp để cài đặt Code Server, bao gồm sử dụng npm, Docker, và cài đặt trực tiếp từ binary. Dưới đây là các cách cài đặt chi tiết:

1. Cài Đặt Code Server qua npm

Bước 1: Cài Đặt Node.js và npm

Trước khi cài đặt Code Server, bạn cần cài đặt Node.js và npm. Truy cập https://nodejs.org/ để tải và cài đặt phiên bản LTS phù hợp với hệ điều hành của bạn.

Bước 2: Cài Đặt Code Server

Mở terminal và chạy lệnh sau để cài đặt Code Server thông qua npm:

sudo npm install -g code-server

Bước 3: Khởi Chạy Code Server

Sau khi cài đặt xong, bạn có thể khởi chạy Code Server bằng lệnh:

code-server

Mặc định, Code Server sẽ chạy trên cổng 8080. Bạn có thể truy cập vào địa chỉ http://localhost:8080 từ trình duyệt.

Bước 4: Thiết Lập Mật Khẩu và SSL (Tuỳ Chọn)

Để bảo mật, bạn nên thiết lập mật khẩu và SSL cho Code Server. Bạn có thể cấu hình bằng cách tạo tệp cấu hình tại ~/.config/code-server/config.yaml với nội dung như sau:

bind-addr: 0.0.0.0:8080
auth: password
password: yourpassword
cert: false

Thay yourpassword bằng mật khẩu bạn mong muốn. Để bật SSL, bạn cần cung cấp đường dẫn tới chứng chỉ và khóa riêng.

2. Cài Đặt Code Server qua Docker

Docker là một công cụ mạnh mẽ để triển khai ứng dụng trong các container. Cài đặt Code Server bằng Docker giúp dễ dàng quản lý và triển khai.

Bước 1: Cài Đặt Docker

Bước 2: Kéo và Chạy Container Code Server

Chạy lệnh sau để tải và chạy container Code Server:

docker run -d \
  --name code-server \
  -p 8080:8080 \
  -e PASSWORD=yourpassword \
  -v ~/projects:/home/coder/project \
  codercom/code-server:latest

Giải thích các tham số:

  • -d: Chạy container ở chế độ nền.
  • --name code-server: Đặt tên cho container.
  • -p 8080:8080: Mở cổng 8080 trên máy chủ và ánh xạ tới cổng 8080 trong container.
  • -e PASSWORD=yourpassword: Đặt mật khẩu truy cập Code Server.
  • -v ~/projects:/home/coder/project: Gắn thư mục ~/projects từ máy chủ vào thư mục /home/coder/project trong container để lưu trữ dự án.

Bước 3: Truy Cập Code Server

Mở trình duyệt và truy cập http://your-server-ip:8080. Nhập mật khẩu mà bạn đã thiết lập (yourpassword) để đăng nhập.

Bước 4: Cấu Hình SSL (Tuỳ Chọn)

Để bảo mật kết nối, bạn nên sử dụng ngược tải (reverse proxy) như Nginx hoặc Caddy để thiết lập SSL. Dưới đây là ví dụ cấu hình với Nginx:

server {
    listen 443 ssl;
    server_name your-domain.com;

    ssl_certificate /path/to/cert.pem;
    ssl_certificate_key /path/to/key.pem;

    location / {
        proxy_pass http://localhost:8080;
        proxy_set_header Host $host;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection upgrade;
        proxy_set_header Accept-Encoding gzip;
    }
}

3. Cài Đặt Code Server Trực Tiếp từ Binary

Nếu bạn không muốn sử dụng npm hoặc Docker, bạn có thể cài đặt Code Server trực tiếp từ binary.

Bước 1: Tải Binary Code Server

Truy cập trang phát hành của Code Server trên GitHub: https://github.com/coder/code-server/releases.

Tải về phiên bản phù hợp với hệ điều hành của bạn (Linux, macOS, Windows).

Bước 2: Giải Nén và Cài Đặt

Ví dụ với Linux:

# Tải về phiên bản mới nhất
wget https://github.com/coder/code-server/releases/download/v4.12.0/code-server-4.12.0-linux-amd64.tar.gz

# Giải nén
tar -xvzf code-server-4.12.0-linux-amd64.tar.gz

# Di chuyển vào thư mục /usr/local/bin
sudo mv code-server-4.12.0-linux-amd64/code-server /usr/local/bin/

Bước 3: Khởi Chạy Code Server

Chạy lệnh sau để khởi chạy Code Server:

code-server

Bước 4: Cấu Hình Mật Khẩu và SSL

Tạo tệp cấu hình tại ~/.config/code-server/config.yaml với nội dung tương tự như hướng dẫn cài đặt qua npm.

4. Sử Dụng Systemd để Quản Lý Code Server

Để đảm bảo Code Server tự động khởi động lại khi hệ thống khởi động lại và dễ dàng quản lý, bạn có thể sử dụng Systemd.

Bước 1: Tạo Tệp Service

Tạo tệp code-server.service tại /etc/systemd/system/code-server.service với nội dung sau:

[Unit]
Description=code-server
After=nginx.service

[Service]
Type=simple
User=your-username
ExecStart=/usr/local/bin/code-server
Restart=always

[Install]
WantedBy=multi-user.target

Thay your-username bằng tên người dùng của bạn.

Bước 2: Kích Hoạt và Khởi Động Service

sudo systemctl daemon-reload
sudo systemctl enable code-server
sudo systemctl start code-server

Bước 3: Kiểm Tra Trạng Thái Service

sudo systemctl status code-server

Các Thiết Lập Cơ Bản trong Visual Studio Code

Sau khi cài đặt VS Code, bạn có thể tùy chỉnh các thiết lập cơ bản để phù hợp với nhu cầu làm việc của mình.

1. Giao Diện và Chủ Đề

  • Thay Đổi Chủ Đề:
    • Mở Command Palette bằng Ctrl + Shift + P (Windows/Linux) hoặc Cmd + Shift + P (macOS).
    • Gõ Preferences: Color Theme và chọn chủ đề bạn ưa thích.
  • Thay Đổi Biểu Tượng:
    • Gõ Preferences: File Icon Theme trong Command Palette và chọn bộ biểu tượng mong muốn.

2. Cài Đặt Tiện Ích Mở Rộng (Extensions)

Extensions giúp mở rộng chức năng của VS Code. Bạn có thể cài đặt chúng từ sidebar hoặc thông qua Command Palette.

Ví dụ:

  • Cài Đặt GitLens:
    • Vào sidebar Extensions (hoặc nhấn Ctrl + Shift + X).
    • Tìm kiếm “GitLens” và nhấn “Install”.
  • Cài Đặt Prettier (định dạng mã):
    • Tìm kiếm “Prettier – Code formatter” và cài đặt.

3. Thiết Lập Các Tùy Chọn Cơ Bản

  • Cài Đặt Font và Kích Thước:
    • Vào File > Preferences > Settings (hoặc nhấn Ctrl + ,).
    • Tìm kiếm font và điều chỉnh Editor: Font Family, Editor: Font Size theo ý muốn.
  • Tự Động Định Dạng Mã:
    • Trong Settings, tìm format on save và bật tùy chọn Editor: Format On Save.
  • Cấu Hình Git:
    • Nếu bạn sử dụng Git, hãy cấu hình tên người dùng và email:
    git config --global user.name "Tên của bạn" git config --global user.email "email@domain.com"

4. Thiết Lập Keybindings (Phím Tắt)

Bạn có thể tùy chỉnh phím tắt để tăng tốc độ làm việc.

  • Vào File > Preferences > Keyboard Shortcuts (hoặc nhấn Ctrl + K Ctrl + S).
  • Tìm phím tắt bạn muốn thay đổi và nhấn đúp vào nó để chỉnh sửa.

5. Cấu Hình Terminal Tích Hợp

VS Code có tích hợp terminal, giúp bạn thực hiện các lệnh mà không cần rời khỏi trình soạn thảo.

  • Mở terminal bằng cách nhấn Ctrl + ` hoặc vào View > Terminal.
  • Bạn có thể chọn shell mặc định (PowerShell, Command Prompt, Bash, v.v.) từ menu dropdown trong terminal.

Một Số Mẹo Sử Dụng VS Code

1. Sử Dụng Multi-Cursor

Bạn có thể chỉnh sửa nhiều dòng cùng lúc bằng cách giữ Alt (Windows/Linux) hoặc Option (macOS) và kéo chuột để tạo nhiều con trỏ.

2. Split Editor (Chia Sẻ Cửa Sổ Soạn Thảo)

  • Nhấn Ctrl + \ (Windows/Linux) hoặc Cmd + \ (macOS) để chia cửa sổ soạn thảo thành nhiều phần.
  • Bạn có thể kéo các tab file vào các phần khác nhau để làm việc song song.

3. Sử Dụng Emmet cho HTML/CSS

Emmet giúp bạn viết mã HTML và CSS nhanh hơn bằng cách sử dụng các shortcut. Ví dụ, gõ div.container>ul>li*5 rồi nhấn Tab sẽ tự động tạo ra cấu trúc HTML tương ứng.

4. Debugging (Gỡ Lỗi)

VS Code hỗ trợ gỡ lỗi cho nhiều ngôn ngữ. Bạn có thể thiết lập các breakpoint, xem biến và gọi stack thông qua tab Debug.

5. Sử Dụng Live Share để Hợp Tác

Tiện ích mở rộng Live Share cho phép bạn cùng làm việc trên cùng một dự án với đồng nghiệp theo thời gian thực.

  • Cài đặt tiện ích “Live Share” từ Extensions.
  • Mở Live Share và chia sẻ liên kết với đồng nghiệp để bắt đầu phiên làm việc chung.

Một Số Mẹo Sử Dụng Code Server

1. Bảo Mật Code Server

  • Thiết Lập Mật Khẩu: Luôn đặt mật khẩu mạnh để bảo vệ Code Server của bạn.
  • Sử Dụng SSL: Sử dụng HTTPS để mã hóa kết nối giữa trình duyệt và máy chủ.
  • Firewall: Đảm bảo rằng chỉ các IP được phép mới có thể truy cập vào cổng Code Server.

2. Tự Động Khởi Động Code Server

Nếu bạn đã cài đặt Code Server thông qua Systemd (như hướng dẫn ở phần cài đặt trực tiếp từ binary), nó sẽ tự động khởi động khi hệ thống khởi động lại. Nếu bạn sử dụng Docker, bạn có thể thêm tùy chọn --restart unless-stopped để container tự động khởi động lại:

docker run -d \
  --name code-server \
  -p 8080:8080 \
  -e PASSWORD=yourpassword \
  -v ~/projects:/home/coder/project \
  --restart unless-stopped \
  codercom/code-server:latest

3. Cài Đặt Tiện Ích Mở Rộng trên Code Server

Code Server hỗ trợ các tiện ích mở rộng tương tự như VS Code. Bạn có thể cài đặt chúng thông qua giao diện web:

  • Mở Code Server trong trình duyệt.
  • Truy cập sidebar Extensions (hoặc nhấn Ctrl + Shift + X).
  • Tìm kiếm và cài đặt các tiện ích bạn cần.

4. Sử Dụng SSH Tunnels để Truy Cập Code Server

Nếu bạn không muốn mở cổng trực tiếp trên máy chủ, bạn có thể sử dụng SSH Tunnels để truy cập Code Server một cách an toàn.

ssh -L 8080:localhost:8080 your-username@your-server-ip

Sau đó, mở trình duyệt và truy cập http://localhost:8080.

5. Tối Ưu Hóa Hiệu Suất

  • Giới Hạn Tiện Ích Mở Rộng: Chỉ cài đặt các tiện ích mở rộng cần thiết để giảm tải cho máy chủ.
  • Sử Dụng SSD: Nếu máy chủ của bạn sử dụng SSD, tốc độ đọc/ghi sẽ nhanh hơn, cải thiện hiệu suất Code Server.
  • Giám Sát Tài Nguyên: Sử dụng các công cụ như htop, docker stats để theo dõi việc sử dụng CPU, RAM và điều chỉnh cấu hình nếu cần.

Kết Luận

Visual Studio Code là một công cụ mạnh mẽ và linh hoạt, phù hợp cho cả người mới bắt đầu và các lập trình viên chuyên nghiệp. Bằng cách làm theo các bước trong hướng dẫn này, bạn sẽ nhanh chóng cài đặt và thiết lập VS Code trên hệ điều hành của mình, cũng như tận dụng được các phương pháp cài đặt Code Server để làm việc từ xa hiệu quả. Đừng quên khám phá thêm các tiện ích mở rộng và các thiết lập nâng cao để tối ưu hóa môi trường phát triển của bạn.

Chúc bạn thành công!

Bài viết liên quan

Lập trình

Hướng dẫn Cài Đặt trình biên dịch cho Visual Studio Code để lập trình C++ trên Windows và macOS/Linux

5 1 đánh giá
Đánh giá bài viết
guest
4 Góp ý
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận

Giới thiệu

Cao Duy Anh

Cao Duy Anh

Blog này được mình làm để chia sẻ các đam mê khác trong cuộc sống: web development, lập trình,...

0
Rất thích suy nghĩ của bạn, hãy bình luận.x