Cách thiết lập máy Mac để phát triển web

Mặc dù bạn có thể xây dựng các trang web cơ bản mà không có gì khác ngoài trình soạn thảo văn bản và trình duyệt, bạn có thể muốn nâng cấp trò chơi của mình bằng cách thêm một khung JavaScript như React hoặc Vue và các công cụ hữu ích như Git vào quy trình làm việc của bạn.

Nhưng đợi đã! Máy Mac của bạn chưa sẵn sàng. Trước khi đi sâu vào, bạn sẽ cần cài đặt một số mục để giúp bạn tránh các lỗi khó hiểu sau này. ?

Bài viết này sẽ hướng dẫn bạn cách thiết lập tối thiểu mà bạn cần để bắt đầu và chạy với phát triển web dựa trên JavaScript trên máy Mac của mình.

Bắt đầu!

Cập nhật máy Mac của bạn

Trước khi cài đặt bất kỳ phần mềm mới nào, hãy làm theo các hướng dẫn sau của Apple để nâng cấp macOS và phần mềm hiện tại của bạn lên phiên bản mới nhất.

Chọn ứng dụng Terminal

Vì bạn sẽ tương tác với máy Mac của mình bằng dòng lệnh trong bài viết này, bạn sẽ cần một ứng dụng đầu cuối.

Bất kỳ tùy chọn nào sau đây đều là lựa chọn tốt:

• Hyper
• iTerm2
• Thiết bị đầu cuối tích hợp của Visual Studio Code
• Terminal (ứng dụng mặc định đi kèm với máy Mac của bạn)

Nếu bạn không chắc nên chọn cái nào, hãy chọn Hyper.

Công cụ dành cho nhà phát triển dòng lệnh

Điều đầu tiên bạn cần cài đặt từ dòng lệnh là công cụ dành cho nhà phát triển dòng lệnh trên máy Mac của bạn . Việc cài đặt những thứ này ngay bây giờ sẽ tránh được các lỗi lạ sau này.

Để kiểm tra xem các công cụ đã được cài đặt chưa, hãy nhập lệnh sau vào ứng dụng đầu cuối của bạn và nhấn quay lại:

xcode-select --version

Nếu kết quả không phải là số phiên bản, hãy cài đặt công cụ bằng lệnh này:

xcode-select --install

Một hộp thoại sẽ xuất hiện hỏi bạn có muốn cài đặt các công cụ hay không. Nhấp vào Cài đặt và gói sẽ tự tải xuống và cài đặt.

Khi quá trình cài đặt kết thúc, hãy xác nhận rằng các công cụ hiện đã được cài đặt bằng cách chạy lại lệnh đầu tiên:

xcode-select --version

Kết quả bây giờ phải là số phiên bản.

Homebrew

Thay vì cài đặt một số công cụ tiếp theo bằng cách truy cập trang web của từng công cụ, tìm trang tải xuống, nhấp vào liên kết tải xuống, giải nén tệp và chạy trình cài đặt theo cách thủ công, chúng tôi sẽ sử dụng Homebrew.

Homebrew là một công cụ cho phép bạn cài đặt, cập nhật và gỡ cài đặt phần mềm trên máy Mac từ dòng lệnh. Cách này nhanh hơn và an toàn hơn so với cách tiếp cận thủ công và thường giúp cuộc sống phát triển của bạn dễ dàng hơn.

Trước tiên, hãy kiểm tra xem Homebrew đã được cài đặt chưa:

brew --version

Nếu bạn không thấy số phiên bản, hãy cài đặt Homebrew bằng lệnh sau:

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Tôi hứa rằng đó là lệnh kỳ lạ nhất mà bạn sẽ thấy trong bài viết này! ? Nhờ Homebrew, phần còn lại rất đơn giản.

Trước khi tiếp tục, hãy xác nhận Homebrew hiện đã được cài đặt:

brew --version

Nút và npm

Node.js là một công cụ cho phép máy Mac của bạn chạy mã JavaScript bên ngoài trình duyệt web. Nếu bạn muốn chạy một khung JavaScript như React hoặc Vue trên máy Mac của mình, bạn cần phải cài đặt Node.

Node cũng bao gồm npm (Node Package Manager), cho phép bạn truy cập vào một thư viện mã miễn phí khổng lồ mà bạn có thể tải xuống và sử dụng trong các dự án của mình.

Trước tiên, hãy kiểm tra xem Node đã được cài đặt chưa:

node --version

Nếu không, hãy cài đặt nó bằng Homebrew:

brew install node

Cuối cùng, xác nhận Node và npm hiện đã được cài đặt:

node --version

npm --version

Kiểm soát phiên bản bằng Git

Git là một công cụ giúp bạn theo dõi các thay đổi đối với mã của mình và làm việc với các nhà phát triển khác trên các dự án được chia sẻ.

Sử dụng Git trong mọi dự án là một thói quen tuyệt vời để phát triển và sẽ giúp bạn chuẩn bị cho các dự án trong tương lai mà Git có thể được yêu cầu. Một số công cụ (như GatsbyJS) cũng phụ thuộc vào việc Git được cài đặt trên máy Mac của bạn, vì vậy bạn sẽ cần nó ngay cả khi bạn không định thêm nó vào quy trình làm việc của mình.

Một lần nữa, hãy bắt đầu bằng cách kiểm tra xem Git đã được cài đặt chưa:

git --version

Nếu không, hãy cài đặt nó:

brew install git

Và xác nhận cài đặt đã hoạt động:

git --version

Thỉnh thoảng, hãy chạy lệnh sau và mọi thứ bạn đã cài đặt với Homebrew sẽ tự động cập nhật:

brew update && brew upgrade && brew cleanup && brew doctor

Một lệnh đó là tất cả những gì bạn cần để giữ cho hệ thống của mình được cập nhật. ?

Tôi thường chạy nó khi bắt đầu một dự án mới, nhưng cứ thoải mái làm điều đó bất cứ khi nào bạn muốn. (Khi bạn chạy lệnh này, nếu Homebrew đề xuất các lệnh bổ sung để bạn chạy, hãy tiếp tục và chạy chúng. Nếu lệnh bắt đầu bằng sudo và bạn được nhắc nhập mật khẩu, hãy sử dụng mật khẩu quản trị Mac của bạn.)

Đó là nó cho dòng lệnh!

Trình chỉnh sửa mã

Mặc dù bạn có thể viết mã trong bất kỳ trình soạn thảo văn bản nào, nhưng việc sử dụng một trình soạn thảo đánh dấu và xác thực mã của bạn sẽ giúp cuộc sống của bạn dễ dàng hơn nhiều.

Bất kỳ tùy chọn nào sau đây đều là lựa chọn tốt:

• Mã Visual Studio
• Atom
• Văn bản tuyệt vời

Nếu bạn mới bắt đầu, hãy chọn Visual Studio Code.

Trình duyệt

Khi bạn viết mã, nó sẽ giúp bạn xem ứng dụng hoặc trang web mà bạn đang xây dựng trong trình duyệt để xác nhận rằng ứng dụng hoặc trang web đó hoạt động. Mặc dù bạn có thể sử dụng bất kỳ trình duyệt nào cho việc này, nhưng một số bao gồm các công cụ dành cho nhà phát triển bổ sung để hiển thị cho bạn thông tin chi tiết về mã của bạn và cách cải thiện mã.

Một trong những lựa chọn sau là lựa chọn tốt:

• Chrome
• Firefox

Nếu bạn mới bắt đầu, hãy chọn Chrome.

Trình tìm kiếm

Mẹo nhanh ở đây:bạn sẽ muốn hiển thị các tệp mà máy Mac của bạn ẩn theo mặc định. (Ví dụ:các tệp git tự động bị ẩn, nhưng đôi khi bạn sẽ muốn chỉnh sửa chúng.)

Cách dễ nhất để hiển thị các tệp ẩn trên máy Mac của bạn là sử dụng phím tắt ⌘⇧. (Lệnh + Shift + Dấu chấm). Thao tác này sẽ luân phiên giữa hiển thị và ẩn các tệp này để bạn có thể truy cập khi cần.

Kết luận

Bạn đã sẵn sàng! ?

Đó là tất cả những gì bạn cần để bắt đầu và chạy với phát triển giao diện người dùng dựa trên JavaScript trên máy Mac của mình.

Để tránh nhầm lẫn, tôi đã bỏ đi bất kỳ mục nào không được yêu cầu nghiêm ngặt. Nếu bạn muốn tìm hiểu sâu hơn về các cách tùy chọn, bạn có thể tùy chỉnh thêm máy Mac của mình để phát triển web, hãy xem các liên kết bên dưới.

Đọc thêm

• Thiết lập một máy Mac hoàn toàn mới để phát triển bởi Tania Rascia
• Thiết lập MacBook để phát triển Front-End bởi Ben Honeywill
• Rời khỏi nhà:Tìm môi trường phát triển cục bộ toàn diện tốt nhất của WebDevStudios (trong trường hợp bạn cũng cần thiết lập PHP)

Thảo luận trên Twitter

Được xuất bản ban đầu tại michaeluloth.com.