MacBook setup for web development

Updated: January 29, 2023

My MacBook setup for web development includes tools like: Homebrew, Brave, Visual Studio Code, Hyper with Oh My Zsh, Git, Node/npm and ESLint.

Homebrew

Install Homebrew as a package manager for macOS:

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

Update everything in Homebrew to the latest version:

brew update

Install GUI applications (Homebrew formulae):

brew install --cask \
  brave-browser  \
  hyper \
  visual-studio-code \
  deepl

Install terminal applications:

brew install \
  git \
  nvm

GUI applications

Brave (web dev browser): when I need to test something on Chromium.

Visual Studio Code (web dev IDE): login with personal GitHub account and import preferences (vscode.json and my-vs-code-extensions).

Hyper (terminal): config for .hyper.js.

Oh My Zsh

Install Oh My Zsh for a better terminal experience:

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

Update everything in Oh My Zsh to the latest version:

omz update

Important: If you change something in your Zsh configuration (.zshrc), you have to restart it:

source ~/.zshrc

Install af-magic as a new theme for your terminal:

brew install af-magic

Make it the default theme for Oh My Zsh:

echo 'eval "$(af-magic init zsh)"' >> ~/.zshrc

As a font we will be using Inconsolata for Powerline in Hyper and VS Code.

First install the Casks fonts for the Homebrew Cask project:

brew tap homebrew/cask-fonts

Then, install the desired font:

brew install --cask font-inconsolata-for-powerline

Use the new font in Hyper by adding to the config object in .hyper.js: fontFamily: 'Inconsolata for Powerline'.

If the theme and font changes do not apply, reload your Zsh configuration (.zshrc) or close/open Hyper.

Use the new font in Visual Studio Code:

  • open settings.json in VS Code by pressing ⌘ + ,
  • look to the right for a button to Open Settings (JSON)
  • paste these key/value pairs:
"terminal.external.osxExec": "Hyper.app",
"terminal.integrated.defaultProfile.osx": "zsh",
"terminal.integrated.fontFamily": "Inconsolata for Powerline",

Zsh configuration file (.zshrc): copy and paste from the local file.

GIT

From the terminal, set the global name and email:

git config --global user.name "Your Name"
git config --global email "you@your-domain.com"

Configure Git to use VS Code as default editor:

git config --global core.editor "code --wait"

Print global git configuration:

git config --list

NVM for Node/npm

The Node Version Manager (NVM) is used to install and manage multiple versions of Node. After installing it via Homebrew in a previous step, type the following commands to complete the installation:

echo "source $(brew --prefix nvm)/nvm.sh" >> ~/.zshrc

Restart Zsh config:

source ~/.zshrc

Now install the latest Node LTS version:

nvm install <latest LTS version from https://nodejs.org/en/>

Next, check if the installation was successful and if the node package manager (npm) was installed along the way:

node -v && npm -v

Update npm to its latest version:

npm install -g npm@latest

And set name and email for npm:

npm set init.author.name "your name"
npm set init.author.email "you@example.com"

If you want to list all your installations of Node.js, type the following:

nvm list

If you want to install a newer version of Node.js:

nvm install <version> --reinstall-packages-from=$(nvm current)
nvm use <version>
nvm alias default <version>

ESLint

My ESLint rules are included in my dotfiles repo and the config package is installed via npm.