My 2024 Macbook setup

Updated:

10 min read

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.

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:

Install Xcode and Command Line Tools

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

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

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:

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

git config --global init.defaultBranch main

git config --global color.uni auto

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.

Shared extensions to install for both browsers

Shared configuration or steps required in both browsers

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

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

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:

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:

{
  "security.workspace.trust.untrustedFiles": "open",
  "editor.tabSize": 2,
  "workbench.editor.tabSizing": "shrink",
  "editor.cursorBlinking": "phase",
  "editor.fontLigatures": false,
  "editor.wordWrap": "on",
  "editor.cursorSmoothCaretAnimation": "on",
  "editor.tabCompletion": "on",
  "editor.formatOnPaste": true,
  "editor.formatOnSave": true,
  "git.openRepositoryInParentFolders": "always",
  "editor.semanticHighlighting.enabled": true,
  "editor.guides.bracketPairs": true,
  "editor.bracketPairColorization.enabled": true,
  "files.trimTrailingWhitespace": true,
  "readTime.enabled": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "cSpell.language": "en,en-US",
  "cSpell.enableFiletypes": ["markdown", "mdx"],
  "editor.inlineSuggest.enabled": true,
  "editor.minimap.enabled": false,
  "editor.fontSize": 12.5,
  "workbench.iconTheme": "catppuccin-latte",
  "terminal.integrated.fontFamily": "JetBrainsMono Nerd Font",
  "workbench.colorTheme": "Expo Light",
  "workbench.activityBar.location": "top",
  "editor.fontFamily": "JetBrains Mono ",
  "editor.fontWeight": "normal",
  // Markdown
  "[markdown]": {
    "editor.quickSuggestions": {
      "comments": "on",
      "strings": "on",
      "other": "on"
    }
  },
  // JSON
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // JavaScript
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // JavaScript + React
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // TypeScript
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // TypeScript + React
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // JSON with Comments
  "[jsonc]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  // HTML
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // ----------------------------------
  // ESLINT
  "eslint.validate": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  // CODE::STATS EXTENSION
  "codestats.apikey": "add-your-api-key",
  "files.associations": {
    ".env*": "dotenv"
  },
  "editor.accessibilitySupport": "off",
  "vale.doNotShowWarningForFileToBeSavedBeforeLinting": true,
  "react-native-tools.showUserTips": false,
  "mdx.validate.validateFileLinks": "ignore",
  "workbench.editor.enablePreview": false,
  "explorer.confirmDelete": false
}

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.

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.

Aman Mittal author
Buy me coffee GitHub X

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 a documentation lead at  Expo.