Computer >> Hướng Dẫn Máy Tính >  >> Hệ Thống >> Mac

Làm chủ phát triển Web trên Mac: Hướng dẫn thiết lập cần thiết

Mặc dù có thể xây dựng website cơ bản chỉ với text editor và trình duyệt, bạn có thể muốn nâng cao bằng JavaScript framework như React hoặc Vue và công cụ hữu ích như Git.

Nhưng đừng vội! Mac chưa sẵn sàng. Trước khi đi sâu, cần cài vài thứ để tránh lỗi khó hiểu sau. ?

Bài viết hướng dẫn thiết lập tối thiểu cần cho phát triển web dựa trên JavaScript trên Mac.

Bắt đầu!

Cập nhật Mac

Trước khi cài phần mềm mới, làm theo hướng dẫn Apple để nâng cấp macOS và phần mềm hiện tại lên phiên bản mới nhất.

Chọn ứng dụng Terminal

Vì sẽ tương tác Mac qua command line, cần app Terminal.

Các lựa chọn tốt:

  • Hyper
  • iTerm2
  • Terminal tích hợp Visual Studio Code
  • Terminal (mặc định macOS)

Nếu không chắc chọn gì, chọn Hyper.

Command Line Developer Tools

Điều đầu tiên cài từ command line là command line developer tools của Mac. Cài ngay tránh lỗi lạ sau.

Kiểm tra đã cài chưa, gõ lệnh sau trong terminal app, Enter:

xcode-select --version

Nếu kết quả không phải số phiên bản, cài với lệnh:

xcode-select --install

Hộp thoại hỏi có cài không. Click Install, gói sẽ tải và tự cài.

Khi xong, xác nhận đã cài bằng cách chạy lại lệnh đầu:

xcode-select --version

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

Homebrew

Thay vì cài các công cụ tiếp theo bằng cách vào từng trang web, tìm trang tải, click tải, giải nén, chạy installer thủ công — ta dùng Homebrew.

Homebrew là công cụ cài, cập nhật, gỡ phần mềm trên Mac từ command line. Nhanh và an toàn hơn cách thủ công, làm đời dev dễ dàng hơn.

Kiểm tra Homebrew đã cài chưa:

brew --version

Nếu không thấy phiên bản, cài Homebrew:

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

Cam đoan đó là lệnh kỳ quặc nhất bài này! ? Nhờ Homebrew, các lệnh sau đơn giản.

Xác nhận Homebrew đã cài:

brew --version

Node và npm

Node.js cho phép Mac chạy code JavaScript ngoài trình duyệt web. Muốn chạy React/Vue trên Mac, cần Node.

Node cũng bao gồm npm (Node Package Manager), cho truy cập thư viện khổng lồ code miễn phí cho dự án.

Kiểm tra Node đã cài chưa:

node --version

Nếu chưa, cài qua Homebrew:

brew install node

Xác nhận Node và npm đã cài:

node --version
npm --version

Kiểm soát phiên bản với Git

Git giúp theo dõi thay đổi code và cộng tác với dev khác trên dự án chung.

Dùng Git mọi dự án là thói quen tốt, chuẩn bị cho dự án sau cần Git. Một số tool (như GatsbyJS) cũng phụ thuộc Git cài trên Mac, nên cần dù không định dùng Git.

Kiểm tra Git đã cài chưa:

git --version

Nếu chưa, cài:

brew install git

Xác nhận cài thành công:

git --version

Thỉnh thoảng chạy lệnh sau, mọi thứ cài qua Homebrew tự cập nhật:

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

Một lệnh duy nhất giữ hệ thống cập nhật. ?

Tôi thường chạy khi bắt đầu dự án mới, nhưng tùy bạn. (Khi chạy lệnh này, nếu Homebrew gợi ý lệnh thêm, hãy chạy. Nếu lệnh bắt đầu bằng sudo và hỏi mật khẩu, dùng mật khẩu admin Mac.)

Xong phần command line!

Code Editor (Trình soạn thảo code)

Mặc dù viết code trong bất kỳ text editor nào, dùng cái highlight và validate code sẽ dễ đời hơn.

Lựa chọn tốt:

  • Visual Studio Code
  • Atom
  • Sublime Text

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

Trình duyệt (Browser)

Khi code, xem app/website đang xây trong trình duyệt để kiểm tra hoạt động. Mặc dù dùng trình duyệt nào cũng được, một số có dev tools thêm hiển thị chi tiết code và cách cải thiện.

Lựa chọn tốt:

  • Chrome
  • Firefox

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

Finder

Mẹo nhanh: muốn hiển thị file Mac ẩn mặc định. (Ví dụ file git tự ẩn, nhưng đôi khi muốn sửa).

Cách dễ nhất hiển thị file ẩn: phím tắt ⌘⇧. (Command + Shift + Dấu chấm). Chuyển đổi giữa hiển thị/ẩn để truy cập khi cần.

Kết luận

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

Đó là tất cả cần để bắt đầu phát triển front-end JavaScript trên Mac.

Để tránh nhầm lẫn, tôi bỏ qua món không bắt buộc. Muốn tùy chỉnh sâu hơn Mac cho web dev, xem link dưới.

Đọc thêm

  • Setting up a Brand New Mac for Development - Tania Rascia
  • Setting up a MacBook for Front-End Development - Ben Honeywill
  • Leaving Homestead: Finding the Best All-Around Local Development Environment - WebDevStudios (nếu cần setup PHP)

Thảo luận trên Twitter

Xuất bản gốc tại michaeluloth.com.