Khóa học CI/CD Deploy React, Node, Next mới ra mắt

Cách mình setup Macbook để code

Châm ngôn của mình là học để kiếm tiền.

Vì thế mình build các khóa học của mình để giúp anh em tiến bộ nhanh hơn x10 lần , để kiếm được nhiều tiền hơn

  • 🏆 React.js Super: Trở thành React.js Developer trong 7 ngày với mức thu nhập 20 triệu/tháng
  • 🏆 Node.js Super: Giúp bạn học cách phân tích, thiết kế, deploy 1 API Backend bằng Node.js
  • 🏆 Next.js Super: Mình sẽ chia sẻ từ A-Z kiến thức về Next.js, thứ giúp mình kiếm hơn 1 tỉ/năm
  • 🏆 Deploy Super: CI/CD Deploy tự động React, Node, Next lên VPS qua Github Actions kết hợp Telegram Bot

Trước đây thì mình dùng Windows, mình chủ yếu code Front-End nên với mình Windows là đủ, cân bằng làm việc và giải trí. Dạo gần đây mình mới mua con Macbook Pro 13 M2 vì mục đích công việc nên cũng loay hoay setup các kiểu.

Mình có thói quen hay ghi chú lại những gì mình làm nên hy vọng bài viết này sẽ giúp ích cho những bạn mới chuyển sang dùng Mac như mình. Nếu các bạn có những mẹo nào hay ho thì có thể comment bên dưới góp ý nhé.

🥇Một số điểm khác biệt khi chuyển từ Windows sang Mac

Nếu các bạn biết rồi thì có thể next qua phần Setup cơ bản, còn nếu chưa biết thì hãy cùng mình đi qua một số điểm khác biệt giữa Windows và Mac.

Mình tin là nhiều bạn cũng bỡ ngỡ khi mới chuyển sang Mac như mình.

🥈Thư mục, ổ đĩa

Ở Windows thì chúng ta thường được chia thành các ổ đĩa (phân vùng) như C, D, E; hệ điều hành, ứng dụng thì lưu ở C, media, giải trí các kiểu thì lưu ở các ổ còn lại.

Còn bên Mac thì không có phân vùng như vậy, tất cả sẽ được lưu ở Macintosh HD.

  • Macintosh HD/Applications: Thư mục ứng dụng
  • Macintosh HD/Users: Thư mục người dùng
  • Macintosh HD/Users/username/Downloads: Thư mục tải về
  • Macintosh HD/Users/username/Documents: Thư mục tài liệu (mình lưu hầu hết project trong này)

Đặc biệt dấu ~ thì nó sẽ đại diện cho thư mục Macintosh HD/Users/username.

🥈Cài đặt ứng dụng

Với Mac thì thường có 3 cách cài đặt ứng dụng:

  • Cài đặt từ App Store (ưu tiên cái này nhất)
  • Cài đặt từ file .dmg (khi bạn click vào file .dmg thì nó sẽ tự động mở ra 1 cửa sổ, bạn chỉ cần kéo ứng dụng vào thư mục Applications, sau đó ứng dụng sẽ tự động được cài đặt, bạn có thể xóa file .dmg đi cho đỡ chật)
  • Cài đặt thông qua package (khá giống windows, nhưng ít khi sài)

Còn đối với việc xóa ứng dụng thì bạn chỉ cần mở Finder -> Go -> Applications -> Chọn ứng dụng cần xóa -> Nhấn Command + delete

🥈Các phím tắt

Chuyển sang Mac thì phím Ctrl sẽ được thay thế bằng phím Command (⌘) (mặc dù Mac vẫn có phím Ctrl nhưng nó khác bên Windows nhé)

  • ⌘ + Q: Thoát ứng dụng (thoát luôn các cửa sổ mà ứng dụng này đang chạy)
  • ⌘ + W: Đóng cửa sổ hiện tại (nếu ứng dụng chỉ có 1 cửa sổ thì ⌘ + Q và ⌘ + W đều có tác dụng giống nhau)
  • ⌘ + C: Copy
  • ⌘ + V: Paste
  • ⌘ + option + V: Paste và xóa file cũ (cut)
  • ⌘ + A: Chọn tất cả
  • ⌘ + Z: Undo
  • ⌘ + Shift + Z: Redo
  • ⌘ + space: Mở Spotlight, cái này rất hay nhé, giúp mở nhanh các ứng dụng, folder, tìm kiếm file, tìm kiếm trên web, tính toán, ...
  • ⌘ + Tab: Chuyển qua lại giữa các ứng dụng
  • ⌘ + Delete: Xóa file
  • ⌘ + Shift + Delete: Xóa file vĩnh viễn (không vào thùng rác)
  • ⌘ + O: Mở file (bên Windows là Enter)
  • ⌘ + shift + 3: Chụp toàn màn hình
  • ⌘ + shift + 4: Chụp màn hình theo khu vực
  • ⌘ + shift + 5: Chụp / Quay video màn hình
  • ⌘ + command + esc: Force quit ứng dụng (để khi ứng dụng bị treo, bạn không thể thoát ra được thì dùng phím này)
  • Ctrl + ⌘ + space: Hiển thị emoji

Lưu ý về thư mục chụp màn hình (hoặc quay video màn hình) thì mặc định nó sẽ được lưu ở thư mục Macintosh HD/Users/username/Desktop. Chúng ta có thể thay đổi bằng cách gõ ⌘ + shift + 5 -> Chọn Options -> Chọn Save to -> Chọn thư mục muốn lưu (nó sẽ auto dùng luôn cho các lần kế tiếp)

Để tiện dùng thì mình sẽ tạo một thư mục tên là Screenshots ở thư mục Macintosh HD/Users/username/Screenshots. Sau đó mình sẽ thay đổi thư mục lưu chụp màn hình thành thư mục Screenshots.

🥈Mở terminal tại một folder nào đó

Ở bên Windows khi bạn vào một folder nào đó, hoặc click chuột phải vào một folder nào đó, bạn sẽ thấy có một lựa chọn là Open command window here (hay đại loại là mở bằng terminal)

Còn bên Mac, bạn muốn mở terminal tại một folder nào đó thì bạn click chuột phải vào folder đó -> Chọn New Terminal at Folder.

Nếu bạn muốn mở terminal tại thư mục hiện tại thì bạn click chuột phải vào tên thư mục tại Path Bar rồi chọn New Terminal at Folder.

🥇Setup cơ bản

Phần này cũng không liên quan gì đến lập trình cả, chỉ là setup để cho việc dùng Mac trở nên dễ dàng hơn thôi.

🥈Hướng cuộn trackpad

Mặc định thì trackpad của Macbook sẽ có hướng cuộn ngược với hướng cuộn của Windows, nên mình sẽ thay đổi hướng cuộn trackpad thành hướng cuộn của Windows. Để làm điều này, mở System Preferences -> Trackpad -> Scroll & Zoom -> Tắt cái Natural scrolling đi.

🥈Gõ tiếng Việt

Mặc định thì Macbook không hỗ trợ gõ tiếng Việt, nên mình sẽ cài thêm bộ gõ tiếng Việt. Mình dùng EVkey và thấy ổn định, tuy lâu lâu (có thể là hiếm) vẫn gặp tình trạng không gõ được tiếng Việt mặc dù đã chỉnh sang tiếng Việt, nhưng tình trạng này rất ít khí xảy ra.

Chả bù cho cái bàn phím trên Iphone, gõ tiếng Việt như shit!

🥈Setup Finder

Hiển thị Tab Bar, Status BarPath Bar, để làm được điều này thì các bạn mở Finder lên, vào View -> chọn Show Tab Bar, Show Status BarShow Path Bar

Tiếp theo mình muốn khi mở Finder lên thì nó sẽ mở thư mục username của mình, vậy nên mình sẽ vào Finder -> Settings -> General -> New Finder windows show chọn thư mục username của mình.

Tiếp theo mình có thói quen luôn muốn hiển thị đuôi mở rộng của file, vì thế mình sẽ vào Finder -> Settings -> Advanced -> chọn Show all file name extensions

Ngoài ra thì các bạn cũng nên thêm các folder mà các bạn hay dùng vào mục Favorites bên sidebar bằng cách kéo thư mục đó vào thanh sidebar là được.

Thêm một mẹo khi dùng Finder là các bạn muốn đi đến một thư mục bằng một đường dẫn thì các bạn mở Finder -> Go -> Go To Folder. Tại dây các bạn nhập đường dẫn vào là được, các bạn có thể dùng ~ để đại diện cho thư mục Users/username, nhấn tab để chọn.

🥇Setup cho code

🥈VS Code

Là dev mà, cần cài cái editor để code chứ 🤪, lên trang chủ của VS Code để tải về và cài đặt bình thường.

🥉code command

Chúng ta có thể mở 1 folder bằng VS Code trong terminal bằng câu lệnh code .. Trên Mac, để enable tính năng này thì các bạn mở VS Code lên, gõ Command + Shift + P -> Tìm Install 'code' command in PATH -> Nhấn Enter

🥈Git

Chúng ta sẽ cài đặt Xcode Command Line, nó sẽ cài đặt cả Git luôn. Để cài đặt thì các bạn mở Terminal lên, gõ

bash
xcode-select --install

Sau khi cài Git xong thì cũng nên config một số thứ như name, email, editor mặc định, ...

bash
git config --global user.name "Du Thanh Duoc"
git config --global user.email duthanhduoc@gmail.com
git config --global core.editor "code --wait"

Cũng như tạo SSH Key, tham khảo bài viết Tôi học lại Git từ đầu [Phần 1]

🥈Homebrew

Cái Homebrew này là một package manager cho Mac, nó giúp chúng ta cài đặt các package một cách dễ dàng hơn.

Để cài đặt thì các bạn mở Terminal lên, gõ

bash
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

🥈NVM

Code Front-End thì tất nhiên phải cài Node rồi. Mình dùng NVM để quản lý các phiên bản Node, để cài đặt thì các bạn mở Terminal lên, gõ

bash
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash

🥈Oh My Zsh

Mac dùng zsh làm terminal mặc định, cái Oh My Zsh này là một framework giúp zsh của bạn trông xịn xò hơn nhờ các plugin, theme, ... mà nó cung cấp.

Để cài thì đơn giản thôi, lên trang github của Oh My Zsh để xem hướng dẫn cài đặt hoặc các bạn chạy câu lệnh này

bash
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

🥈Các phần mềm khác

Tới đây là coi như gần xong rồi đó, mình sẽ cài thêm mấy cái phần mềm khác như Chrome, Telegram, Zalo, Messenger, Postman, Figma, TeamViewer, ... để phục vụ nhu cầu cá nhân của mình.

Hết rồi đó, chúc các bạn thành công 🥳


👉 Kiến thức trong khóa học Next.js này đã giúp mình kiếm hơn 1 tỉ đồng/năm

Phew! Cuối cùng bạn cũng đã đọc xong. Bài viết này có hơi dài một tí vì mình muốn nó đầy đủ nhất có thể 😅

Website bạn đang đọc được viết bằng Next.js TypeScript và tối ưu từng chi tiết nhỏ như SEO, hiệu suất, nội dung để đảm bảo bạn có trải nghiệm tốt nhất.

Với lượt view trung bình là 30k/tháng (dù website rất ít bài viết). Website này đem lại doanh thu 1 năm vừa qua là hơn 1 tỉ đồng

Đó chính là sức mạnh của SEO, sức mạnh của Next.js.

Mình luôn tin rằng kiến thức là chìa khóa giúp chúng ta đi nhanh nhất.

Mình đã dành hơn 6 tháng để phát triển khóa học Next.js Super | Dự án quản lý quán ăn & gọi món bằng QR Code. Trong khóa này các bạn sẽ được học mọi thứ về framework Next.js, các kiến thức từ cơ bản cho đến nâng cao nhất, mục đích của mình là giúp bạn chinh phục mức lương 25 - 30 triêu/tháng

Nếu bạn cảm thấy bài viết này của mình hữu ích, mình nghĩ bạn sẽ thích hợp với phong cách dạy của mình. Không như bài viết này, khóa học là sự kết hợp giữa các bài viết, video, bài tập nhỏ và dự án lớn có thể xin việc được ngay. Học xong mình đảm bảo bạn sẽ lên tay ngay. 💪🏻

Avatar Dư Thanh Được

Dư Thanh Được

Một developer thích nghiên cứu và chia sẻ kiến thức về lập trình, blockchain, marketing. Chuyên code và dạy lập trình website