MacBook setup for web development
Updated: January 29, 2023My 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.