Hướng Dẫn Cài Đặt và Cấu Hình Các Công Cụ Phát Triển Front-End trên Mac

Giới Thiệu

Hướng dẫn này sẽ dẫn dắt bạn từng bước vào thế giới các công cụ phát triển front-end trên cả hệ điều hành Windows và Mac. Chúng ta sẽ cùng nhau khám phá cách cài đặt và cấu hình các công cụ phát triển phổ biến, giúp bạn dễ dàng bước vào lĩnh vực phát triển front-end. Dù bạn là người mới học hay đã có kinh nghiệm, hướng dẫn này sẽ giúp bạn giải quyết nhiều vấn đề trong quá trình cài đặt các công cụ phát triển, từ đó cho phép bạn tập trung vào việc viết mã. Hãy cùng bắt đầu nhé!

Cài Đặt Visual Studio Code (VSCode)

Click vào đây để tải về: https://code.visualstudio.com/Download

Xác định Loại Chip: Để biết bạn đang sử dụng loại chip nào trên Mac, có hai phương pháp:
- Phương pháp 1: Nhấp vào biểu tượng Apple ở góc trái trên cùng, chọn About This Mac và kiểm tra loại chip.
- Phương pháp 2: Mở terminal và nhập lệnh uname -m. Kết quả sẽ trả về x86_64 (dựa trên Intel) hoặc arm64 (dựa trên Apple silicon).
- Lựa chọn: Chip Intel hoặc Apple silicon (chip dòng M).
Cài Đặt: Sau khi tải xong, bạn cần nhấp chuột vào tệp đã tải xuống, thường có định dạng .dmg. Kéo tệp vào thư mục Applications để hoàn tất cài đặt. Nếu bạn tải xuống định dạng zip, nó đã chứa ứng dụng sẵn có trong thư mục.
Khởi Chạy: Khi mở ứng dụng lần đầu tiên, một hộp thoại sẽ xuất hiện yêu cầu bạn có muốn mở ứng dụng không. Nhấp vào Open để vào giao diện VSCode, và giờ bạn có thể bắt đầu sử dụng.

Giới Thiệu Về ServBay (Công Cụ Quản Lý Môi Trường Phát Triển)

Trước khi cài đặt Node.js, tôi muốn giới thiệu một công cụ hữu ích mang tên ServBay. ServBay là công cụ quản lý môi trường phát triển tích hợp, giúp lập trình viên bắt đầu viết mã nhanh chóng mà không cần tốn thời gian vào việc cài đặt và sửa lỗi môi trường.

Trang web chính thức: ServBay

ServBay hỗ trợ nhiều phiên bản của Node.js, cho phép bạn chọn phiên bản phù hợp với yêu cầu dự án. Dưới đây là cách cài đặt Node.js qua GUI của ServBay:

Mở bảng điều khiển GUI của ServBay.
Tìm đến phần Services.
Chọn phiên bản Node.js bạn cần.
Nhấp vào nút Install màu xanh và chờ cho quá trình cài đặt hoàn tất.

Các Module Được Bao Gói trong ServBay

ServBay tích hợp nhiều trình quản lý gói cho Node.js:

npm (Node Package Manager): Trình quản lý gói mặc định, rất phổ biến.
pnpm: Trình quản lý gói hiệu quả, tiết kiệm dung lượng và nhanh chóng.
yarn: Trình quản lý gói được phát triển bởi Facebook, cung cấp khả năng quản lý phụ thuộc ổn định.

Lợi Ích của ServBay

ServBay rất hữu ích cho các dự án phức tạp, nơi nhiều ứng dụng cần chạy đồng thời với các phiên bản Node.js khác nhau. Bạn không cần phải gỡ cài đặt và cài đặt các phiên bản khác nhau mỗi lần nữa, điều này giúp tiết kiệm thời gian và công sức.

Cài Đặt Git Trên Mac

Mac đã được cài sẵn Git. Bạn chỉ cần mở terminal và nhập git -v. Nếu thấy phiên bản, thì Git đã được cài đặt xong. Nếu không, bạn có thể tải trình cài đặt từ trang web chính thức tại git-scm.com.

Các Plugin Hữu Ích cho VSCode

Để nâng cao trải nghiệm lập trình, dưới đây là một số plugin được khuyên dùng:

Ayu: Chủ đề dễ nhìn với chế độ tối và sáng.
ESLint: Giúp phát hiện và sửa lỗi trong mã.
Prettier: Định dạng mã để giữ phong cách nhất quán.
GitLens: Cung cấp thông tin chi tiết về lịch sử mã.
Guides: Hỗ trợ xác định vị trí các dấu ngoặc trong mã lồng nhau.
Image Preview: Xem trước hình ảnh.
Material Icon Theme: Hệ thống biểu tượng hấp dẫn.
Path Intellisense: Tự động hoàn thành đường dẫn tệp.
Todo Tree: Quản lý nhanh các bình luận TODO trong mã.
Volar: Cần thiết cho các nhà phát triển Vue, hỗ trợ đánh dấu mã.

Hy vọng hướng dẫn này sẽ giúp bạn dễ dàng cài đặt và cấu hình các công cụ phát triển front-end trên Mac. Chúc bạn lập trình vui vẻ!
source: viblo