My 2024 Macbook setup

Published on Apr 5, 2024

12 min read

TOOLS

Updated on June 11, 2024.

A guide on setting up Apple Macbook for daily development work.

A brief history of this guide

🔗

I documented my entire setup when I first switched to a MacBook Pro with Apple Silicon in 2020. Since then, I have upgraded to two different Macbooks and made some changes and adjustments to my personal setup by adopting new tools and leaving the old ones behind.

After recently revisiting my old setup guide while reconfiguring a previous laptop, I noticed significant changes and decided an update was in order. This post reflects my current setup strategy.

Initial setup

🔗

In this section, set up or configure the system and install essential tools required for development or configuring other tools.

Updating macOS

🔗

After logging in, ensure the macOS is on the latest release version. If not, navigate to System Settings and update the macOS software.

Disable annoying

🔗

Once the macOS version is up to date, I turn off some annoying settings. They might not annoy you, so feel free to skip this section.

  • Go to System Settings > Battery > Options > Disable Slightly dim the display on battery.
  • Go to Lock Screen and
    • Set Start the screen save when in active for 1 hour.
    • Set the turn display off on the battery when it is inactive for 3 hours.
    • Set the display off on power adapter when inactive for 3 hours.

Tip: Verify that the user account on the MacBook has Admin privileges. To verify, go to Settings > Users & Groups and see if the user account has Admin role. All Mac users with an Admin role can use sudo to run command-line utilities with administrative (root) privileges.

Secure data with FileVault

🔗

FileVault offers full-disk encryption to safeguard your data from unauthorized physical access. Activating it adds an essential layer of security. To enable it:

  • Go to System Settings > FileVault > Enable Turn On.

Install Xcode and Command Line Tools

🔗

The following tools must be installed before proceeding with the rest of the guide:

  • Xcode: Open App Store, install Xcode. It's a large download and will take a while.
  • Terminal: iTerm2 primary terminal app

After the Xcode installation finishes, install Command Line Tools. Open the terminal app (iTerm) and run:

xcode-select --install && sudo xcodebuild -license

Let's verify that Command Line Tools have been installed properly and install iOS simulators (only required if you are into mobile app development):

  • Verify Command Line Tools installation: Open Xcode from the menu bar, go to Xcode > Preferences > Location, and make sure that Command Line Tools point towards the current Xcode app.
  • When opening Xcode for the first time, you'll be prompted to select platforms for development. Select iOS 17 and click Download and install to download iOS simulators. This behavior changed with macOS Sonoma.

The initial setup is complete! You've now reached a point where you can proceed further.

Other macOS system settings tweaks

🔗

Let's update some System Settings to navigate through the macOS with ease and familiar (habitual) settings.

Note: These are some custom settings that I use on my MacBook. Feel free to skip this section or take time to apply yours.

Click Apple Icon from the menu bar and open System Settings to change or apply the settings below:

  • Siri: Disable it (if not already)
  • Spotlight:
    • Under Search results, disable search except for Applications, Calculator, Conversion, Definition, Developer, Events & Reminders, and System Settings
  • Desktop & Dock:
    • Enable: Automatically hide and show the Dock
    • Disable: Show suggested and recent apps in Dock
    • Size: 30%
    • Magnification: 45%-50%
    • Click wallpaper to reveal Desktop: Only in Stage Manager
    • Widgets > Show Widgets: Disable
    • Mission Control: Disable Automatically rearrange Spaces
    • Hot Corners: Disable all
  • Trackpad:
    • Point & Click
      • Enable secondary click with the bottom right corner
      • Enable Tap to click with one finger
      • Tracking speed: 90%
      • Click: Medium
      • Force click and haptic feedback: Disable
      • Look up & data detectors: Disable
    • Scroll & Zoom
      • Natural scrolling: Disable
    • More Gestures
      • Swipe between pages: Off
  • Keyboard
    • Key repeat rate: Fast
    • Delay until repeat: Short
  • Finder settings:
    • General > Enable Hard disks, disable CDs, DVDs, and iPods
      • Set New Finder windows show to Downloads
    • Tags: Switch off all
    • Advanced > Show filename extensions
    • Enable showing hidden files (hold Cmd + Shift dot(.) in a Finder window)
    • Enable: View > Show Path Bar, Show Status Bar
  • Change Launchpad icon grid layout:
# Specify the number of columns to be used.
defaults write com.apple.dock springboard-columns -int 12
# Specify the number of rows to be used.
defaults write com.apple.dock springboard-rows -int 10
# Restart the Dock to apply the changes.
killall Dock

Install Homebrew - macOS package manager

🔗

An important step in installing development-related tools is using Homebrew, a package manager I've trusted for nearly eight years.

To install Homebrew, open iTerm and run the command:

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

After installing, add the Homebrew to the PATH:

echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/amanhimself/.zshrc
eval "$(/opt/homebrew/bin/brew shellenv)"

Note: If you don't have a .zshrc, create one at /Users/user-name/.

Then, add the following to .zshrc:

export PATH=/opt/homebrew/bin:$PATH

Install Git

🔗

Git is already installed as part of Xcode Command Line Tools. However, I prefer to install the latest version from brew and avoid using the outdated version installed by Apple.

brew install git

Tip: After installing git, run git --version in a new terminal window. If you run this command in the same terminal window, it will show the Apple Git version.

Git global configurations

🔗

After installing Git, apply the following global configurations:

  • Set up the default branch for any new project to main (This was introduced in Git version 2.28):
git config --global init.defaultBranch main
  • Enable colors in command output:
git config --global color.uni auto
  • Set up real name and email:
git config --global user.name "Real name"
git config --global user.email email@domain.com

To check or verify the global git config, run:

git config -l --global

Install Oh My Zsh

🔗

To manage ZSH configuration and plugins, install Oh My Zsh:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

After the installation, ensure the .zshrc file exports the path below at the top. To view, run nano .zshrc in the terminal.

# Path to your oh-my-zsh installation
export ZSH="$HOME/.oh-my-zsh"

The $HOME is /Users/your-macOS-username. To verify this, you can run:

echo $HOME

Install zsh-syntax-highlighting. It provides syntax highlighting for the ZSH shell. Run the following commands:

# Depending on the /plugins folder in your local setup
cd $HOME/.oh-my-zsh/plugins
# Then clone the git repository
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git
echo "source ${(q-)PWD}/zsh-syntax-highlighting/zsh-syntax-highlighting.zsh" >> ${ZDOTDIR:-$HOME}/.zshrc

After installing the syntax highlight plugin on iterm2, restart it or open a new instance for it to start recognizing the commands.

Install Starship prompt

🔗

"I have been using Spaceship as my command line prompt for a long time, but it has been having some problems lately. I learned about Starship a few months ago and decided to try it out. It meets all my requirements, so I continued using it."

To install Starship:

brew install starship

Then, add the following at the end of ~/.zshrc:

eval "$(starship init zsh)"

Install a primary web browser

🔗

By now, you will need a primary web browser to set up and do some things further.

  • Download Arc for personal and primary browser
    • Log in to the primary email
    • Install 1-Password (another side-quest)
  • Download Chrome for work
    • Log in to work email

Shared extensions to install for both browsers

🔗

Shared configuration or steps required in both browsers

🔗
  • Create a Google meet, and share and record the screen. This will get all required permissions to be working, and you don't have to restart the browser in an actual meeting.
  • Log in to GitHub, Gmail, and Calendar.

GitHub setup and configuration

🔗

To configure an account on GitHub.com and use an SSH key, follow the steps from GitHub documentation:

Note: After configuring SSH key with GitHub, download GitHub desktop app and clone dotfiles repository because you will need the configuration files from it in the next few steps.

Configure iTerm

🔗
  • Download Jet Brains Mono and JetBrainsMono Nerd Font, and install them.
  • Open iTerm > Preferences > Profiles and Import iterm-default.json from dotfiles repo.
  • Profiles> Colors > Import Dracula.itermcolors from dotfiles repo for Color Presets and apply it.
  • Text > Font and Non-ASCII Font, select JetBrainsMono Nerd Font.
  • Appearance > General > Theme > set to Minimal.
  • Terminal > Show mark indicators > Disable.

Configure starship

🔗

To use the pre-defined configuration, copy starship.toml from the dotfiles repo to Users/user-name/config/. The file is organized in such a way that it should work without any additional configuration.

Configure .zshrc

🔗

Copy and paste the .zshrc from dotfiles to Users/user-name/.zshrc. The file is organized in such a way that it should work without any additional configuration.

Setup environments and apps with homebrew

🔗

To install Node.js and npm, use Node Version Manager (NVM). Read the entire blog post on how to install Node.js using NVM.

Run the following script to install other packages from homebrew:

brew install yarn
brew install scrcpy
brew install watchman
brew install imageoptim
brew install rbenv
brew install imagemagick
brew install git-crypt
brew install git-lfs
brew install expo-orbit
brew install typos-cli
brew install vale
brew install --cask notunes
  • Watchman to watch changes in the filesystem. Used for React Native app development.
  • scrcpy control Android devices connect via USB on Mac.
  • imageoptim for compressing image files. See [ImageOptim Settings for instructions on how to set it up. expo-orbit to open development builds and updates quickly.
  • rbenv is similar to NVM but allows managing Ruby versions.
  • imagemagick: required sometimes to append two images.
  • vale required for work.
  • typos-cli is a nice, fast tool based on Rust to detect typos in markdown or mdx files.
  • notunes to avoid accidentally opening Apple Music app.

Install Java

🔗

To install Java17, run:

brew install --cask zulu@17

Add the JAVA_HOME environment variable in  ~/.zshrc:

export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home

Note: Already configured in .zshrc if copied dotfiles were setup correctly.

After installing Node.js and npm

🔗

Node.js comes with the default package manager npm. Set defaults for it:

npm config set init-author-name "your name"
npm config set init-author-url "example.com"
npm config set init-license MIT

Install the following global npm packages:

  • eas-cli: For work and personal use.
npm i -g eas-cli

Also, I use the following command to update global packages:

npx npm-check -gu

VS Code

🔗

VS Code has supported ARM chips since March 13, 2021. Download the installer for VS Code. I am using the following VS Code configuration:

1{
2 "security.workspace.trust.untrustedFiles": "open",
3 "editor.tabSize": 2,
4 "workbench.editor.tabSizing": "shrink",
5 "editor.cursorBlinking": "phase",
6 "editor.fontLigatures": false,
7 "editor.wordWrap": "on",
8 "editor.cursorSmoothCaretAnimation": "on",
9 "editor.tabCompletion": "on",
10 "editor.formatOnPaste": true,
11 "editor.formatOnSave": true,
12 "git.openRepositoryInParentFolders": "always",
13 "editor.semanticHighlighting.enabled": true,
14 "editor.guides.bracketPairs": true,
15 "editor.bracketPairColorization.enabled": true,
16 "files.trimTrailingWhitespace": true,
17 "readTime.enabled": true,
18 "editor.defaultFormatter": "esbenp.prettier-vscode",
19 "cSpell.language": "en,en-US",
20 "cSpell.enableFiletypes": ["markdown", "mdx"],
21 "editor.inlineSuggest.enabled": true,
22 "editor.minimap.enabled": false,
23 "editor.fontSize": 12.5,
24 "workbench.iconTheme": "catppuccin-latte",
25 "terminal.integrated.fontFamily": "JetBrainsMono Nerd Font",
26 "workbench.colorTheme": "Expo Light",
27 "workbench.activityBar.location": "top",
28 "editor.fontFamily": "JetBrains Mono ",
29 "editor.fontWeight": "normal",
30 // Markdown
31 "[markdown]": {
32 "editor.quickSuggestions": {
33 "comments": "on",
34 "strings": "on",
35 "other": "on"
36 }
37 },
38 // JSON
39 "[json]": {
40 "editor.defaultFormatter": "esbenp.prettier-vscode"
41 },
42 // JavaScript
43 "[javascript]": {
44 "editor.defaultFormatter": "esbenp.prettier-vscode"
45 },
46 // JavaScript + React
47 "[javascriptreact]": {
48 "editor.defaultFormatter": "esbenp.prettier-vscode"
49 },
50 // TypeScript
51 "[typescript]": {
52 "editor.defaultFormatter": "esbenp.prettier-vscode"
53 },
54 // TypeScript + React
55 "[typescriptreact]": {
56 "editor.defaultFormatter": "esbenp.prettier-vscode"
57 },
58 // JSON with Comments
59 "[jsonc]": {
60 "editor.defaultFormatter": "vscode.json-language-features"
61 },
62 // HTML
63 "[html]": {
64 "editor.defaultFormatter": "esbenp.prettier-vscode"
65 },
66 // ----------------------------------
67 // ESLINT
68 "eslint.validate": [
69 "javascript",
70 "javascriptreact",
71 "typescript",
72 "typescriptreact"
73 ],
74 // CODE::STATS EXTENSION
75 "codestats.apikey": "add-your-api-key",
76 "files.associations": {
77 ".env*": "dotenv"
78 },
79 "editor.accessibilitySupport": "off",
80 "vale.doNotShowWarningForFileToBeSavedBeforeLinting": true,
81 "react-native-tools.showUserTips": false,
82 "mdx.validate.validateFileLinks": "ignore",
83 "workbench.editor.enablePreview": false,
84 "explorer.confirmDelete": false
85}

Setup VS Code as the default editor

🔗

To set up VS Code as the default editor, use code . to open a directory directly from the command line to the editor, you need to install code command in the PATH.

  • Open VS Code, and open the command palette.
  • Type Shell and select Shell Command: Install 'code' command in PATH.

Installing code command in Path in VS Code

VS Code themes

🔗

I usually switch between the following themes:

VS Code extensions

🔗

Other Chrome extensions

🔗

Conclusion

🔗

That’s the setup I now use for my JavaScript, Node.js, React, React Native, Expo, and documentation work.


More Posts

Browse all posts

Aman Mittal author

I'm a software developer and a technical writer. On this blog, I write about my learnings in software development and technical writing.

Currently, working as the documentation lead at 𝝠 Expo. Read more about me on the About page.


Copyright ©  2019-2024 Aman Mittal · All Rights Reserved.