MacBook setup for web development

Updated: October 30, 2022
Tags:config

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

Homebrew

Install Homebrew as a package manager for macOS:

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

Update everything in Homebrew to the latest version:

Terminal
brew update

Install GUI applications (Homebrew formulae):

Terminal
brew install --cask \
  google-chrome  \
  firefox \
  hyper \
  visual-studio-code \
  figma \
  mjml \
  deepl \
  vlc

Install terminal applications:

Terminal
brew install \
  git \
  nvm

GUI applications

Google Chrome (web dev browser): login with personal Gmail account and import preferences.

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:

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

Update everything in Oh My Zsh to the latest version:

Terminal
omz update

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

Terminal
source ~/.zshrc

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

Terminal
brew install af-magic

Make it the default theme for Oh My Zsh:

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

Terminal
brew tap homebrew/cask-fonts

Then, install the desired font:

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

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

Configure Git to use VS Code as default editor:

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

Print global git configuration:

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

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

Restart Zsh config:

Terminal
source ~/.zshrc

Now install the latest Node LTS version:

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

Terminal
node -v && npm -v

Update npm to its latest version:

Terminal
npm install -g npm@latest

And set name and email for npm:

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

Terminal
nvm list

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

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