Thiết lập môi trường lập trình

Trước khi bắt đầu lập trình JavaScript một cách chuyên nghiệp, chúng ta cần chuẩn bị một môi trường phát triển phù hợp. Trong bài học này, chúng ta sẽ:

• Cài đặt VS Code và thiết lập các tiện ích hỗ trợ.
• Cài đặt Node.js để chạy JavaScript ngoài trình duyệt.
• Giới thiệu một số công cụ hỗ trợ hữu ích như Live Server và Chrome DevTools.

Thiết lập môi trường lập trình

1. Cài đặt VS Code và thiết lập tiện ích hỗ trợ

VS Code là gì?
Visual Studio Code (VS Code) là một trình soạn thảo mã nguồn miễn phí, mạnh mẽ, hỗ trợ nhiều ngôn ngữ lập trình, bao gồm JavaScript.

Cách cài đặt VS Code

1. Truy cập trang chủ https://code.visualstudio.com/
2. Nhấn Download và chọn phiên bản phù hợp với hệ điều hành (Windows, macOS, Linux).
3. Chạy file cài đặt và làm theo hướng dẫn để hoàn tất quá trình cài đặt.

Thiết lập tiện ích hỗ trợ
Sau khi cài đặt VS Code, chúng ta nên thêm một số tiện ích giúp lập trình JavaScript hiệu quả hơn:

• ESLint: Hỗ trợ kiểm tra lỗi và định dạng mã JavaScript.
• Prettier: Tự động định dạng mã nguồn giúp code dễ đọc hơn.
• JavaScript (ES6) Code Snippets: Cung cấp gợi ý nhanh cho cú pháp JavaScript.

Cách cài đặt tiện ích trên VS Code

1. Mở VS Code và nhấn Ctrl + Shift + X (hoặc vào tab Extensions).
2. Tìm kiếm tên tiện ích (ví dụ: "ESLint") và nhấn Install.

2. Cài đặt Node.js và kiểm tra phiên bản

Node.js là gì?
Node.js là một môi trường chạy JavaScript bên ngoài trình duyệt, cho phép chúng ta sử dụng JavaScript để phát triển ứng dụng backend, tạo server, và thực thi script.

Cách cài đặt Node.js

1. Truy cập https://nodejs.org/
2. Tải xuống phiên bản LTS (Long-Term Support) để đảm bảo tính ổn định.
3. Cài đặt theo hướng dẫn của trình cài đặt.

Kiểm tra phiên bản Node.js và npm
Sau khi cài đặt, mở Terminal (CMD, PowerShell, hoặc Terminal trong VS Code) và nhập lệnh sau:

node -v

Kết quả hiển thị phiên bản Node.js, ví dụ: v18.16.0.

Ngoài ra, Node.js đi kèm với npm (Node Package Manager), giúp cài đặt thư viện JavaScript. Kiểm tra phiên bản npm bằng lệnh:

npm -v

Kết quả có thể là 9.5.1 (tùy vào phiên bản).

Lưu ý: Nếu chưa thấy phiên bản, có thể cần khởi động lại máy tính.

3. Giới thiệu một số công cụ hỗ trợ

Live Server - Chạy web nhanh chóng
Live Server là một tiện ích của VS Code giúp bạn xem ngay kết quả khi chỉnh sửa code mà không cần tải lại trang thủ công.

Cách cài đặt Live Server

1. Mở VS Code, vào tab Extensions (Ctrl + Shift + X).
2. Tìm "Live Server" và nhấn Install.
3. Sau khi cài đặt, mở một file HTML, nhấn chuột phải và chọn "Open with Live Server".

Khi mở bằng Live Server, bất cứ thay đổi nào trong mã HTML, CSS, JavaScript sẽ tự động cập nhật mà không cần tải lại trang.

Chrome DevTools - Công cụ kiểm tra và debug JavaScript
Chrome DevTools là một bộ công cụ mạnh mẽ giúp lập trình viên kiểm tra và debug JavaScript trực tiếp trên trình duyệt Google Chrome.

Cách mở Chrome DevTools

• Nhấn F12 hoặc Ctrl + Shift + I để mở DevTools.
• Chọn tab Console để nhập và kiểm tra JavaScript.
• Chọn tab Elements để chỉnh sửa giao diện trang web.
• Chọn tab Network để theo dõi các yêu cầu API.

Ví dụ thử nghiệm JavaScript trên Console
Mở Chrome DevTools, vào tab Console và nhập:

console.log("Chào mừng bạn đến với JavaScript!");
alert("Xin chào!");
document.body.style.backgroundColor = "lightblue";

Lệnh này sẽ:

• Hiển thị dòng "Chào mừng bạn đến với JavaScript!" trên Console.
• Mở một hộp thoại alert().
• Thay đổi màu nền trang web thành xanh nhạt.

Kết luận

Chúng ta đã cài đặt và thiết lập môi trường lập trình JavaScript chuyên nghiệp với:

• VS Code để viết code hiệu quả hơn.
• Node.js để chạy JavaScript bên ngoài trình duyệt.
• Live Server để xem thay đổi ngay lập tức.
• Chrome DevTools để debug và kiểm tra JavaScript.