My 2024 Macbook setup

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

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.

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

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

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.

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.

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:

Copy
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.

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

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

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:

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

After installing, add the Homebrew to the PATH:

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

Then, add the following to .zshrc:

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

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.

Copy
brew install git

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):

Copy
git config --global init.defaultBranch main

• Enable colors in command output:

Copy
git config --global color.uni auto

• Set up real name and email:

Copy
git config --global user.name "Real name"
git config --global user.email email@domain.com

To check or verify the global git config, run:

Copy
git config -l --global

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

Copy
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.

Copy
# 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:

Copy
echo $HOME

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

Copy
# 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.

"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:

Copy
brew install starship

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

Copy
eval "$(starship init zsh)"

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

• Grammarly login and extension install
• Install Detailed SEO extension
• Install JSON Viewer
• 1Password

• 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.

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

• Generate a new SSH key

• Add SSH key to ssh-agent

• Add new SSH key to GitHub account

• 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.

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.

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.

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:

Copy
brew tap homebrew/cask-versions
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.
• 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](https://github.com/ImageMagick/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.

To install Java17, run:

Copy
brew install --cask zulu17

Add the JAVA_HOME environment variable in  ~/.zshrc:

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

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

Copy
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

Copy
npm i -g eas-cli

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

Copy
npx npm-check -gu

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

Copy
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  "grammarly.files.include": [
67    "**/README.md",
68    "**/readme.md",
69    "**/*.txt",
70    "**/*.md",
71    "**/*.mdx"
72  ],
73  // ----------------------------------
74  // ESLINT
75  "eslint.validate": [
76    "javascript",
77    "javascriptreact",
78    "typescript",
79    "typescriptreact"
80  ],
81  // CODE::STATS EXTENSION
82  "codestats.apikey": "add-your-api-key",
83  "files.associations": {
84    ".env*": "dotenv"
85  },
86  "editor.accessibilitySupport": "off",
87  "vale.doNotShowWarningForFileToBeSavedBeforeLinting": true,
88  "react-native-tools.showUserTips": false,
89  "mdx.validate.validateFileLinks": "ignore",
90  "workbench.editor.enablePreview": false,
91  "explorer.confirmDelete": false
92}

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.

I usually switch between the following themes:

• Quiet Light (built-in)
• Expo Light (based on Expo Docs)

• Auto Close tag
• Auto Complete Tag
• Auto Rename Tag
• Babel JavaScript
• VSCode supports colored bracket pairs natively. See How to configure VSCode Bracket Pair Colors Natively
• Code Spell Checker
• Code::Stats
• Color Highlight
• Catppuccin for VS Code
• ESLint
• Even Better Toml
• Expo Tools
• GitHub Copilot
• GitHub Pull Requests and Issues
• Git Lens
• Grammarly
• Highlight Matching Tag
• Indent rainbow
• iOS common files
• Material Icon Theme
• MDX - For syntax highlighting of .mdx files
• npm IntelliSense
• Prettier
• Paste JSON as code
• React Native Tools
• Read Time
• TODO Highlight
• Version Lens
• WakaTime
• Word Count

• Sync settings and switch "Developer Mode" on.
• Extensions that I use:
  • Redefined GitHub
  • Twemex: Sidebar for Twitter
  • Minimal Twitter
  • Medium Enhanced Stats
  • Toby to organize tabs
  • DF Tube (Distraction Free for YouTube™)

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