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:
Update everything in Homebrew to the latest version:
Install GUI applications (Homebrew formulae):
Install terminal applications:
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:
Update everything in Oh My Zsh
to the latest version:
Important: If you change something in your Zsh configuration (.zshrc
), you have to restart it:
Install af-magic
as a new theme for your terminal:
Make it the default theme for Oh My Zsh
:
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:
Then, install the desired font:
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:
Zsh configuration file (.zshrc
): copy and paste from the local file.
GIT
From the terminal, set the global name
and email
:
Configure Git to use VS Code as default editor:
Print global git configuration:
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:
Restart Zsh config:
Now install the latest Node LTS version
:
Next, check if the installation was successful and if the node package manager (npm) was installed along the way:
Update npm to its latest version:
And set name
and email
for npm:
If you want to list all your installations of Node.js
, type the following:
If you want to install a newer version of Node.js
:
ESLint
My ESLint rules are included in my dotfiles repo and the config package is installed via npm.