Guide on setting up a new MacBook for development (2022)

And get your JavaScript projects up and running

Photo by Joshua Woroniecki on Unsplash

In my experience, setting up a new MacBook — whether because of swapping jobs or upgrading a personal laptop — takes a lot of time if I’m trying to remember everything that needs to be installed and how to configure them.

This article is meant to gather all the information in one place to speed up the setup process so you can get started on your project as soon as possible. I wrote it for JavaScript developers but most of it is not language-specific.

0. Exports from old laptop

If you are upgrading your laptop, you might want to save some of its setups.

Code editor config (VSCode)

For VSCode, you can export your configs using:

• Sync: back up your VSCode settings on GitHub using the Settings Sync VSCode extension. It will contain your Settings File, VSCode Extensions & Extensions Configurations, etc...
• Manual copy of your settings and extensions: To copy your settings, open the command palette(Ctrl+Shift+P), run “Open Settings (JSON)” and save a copy of its content.
  To save the list of installed extensions in a file, run:

$ code — list-extensions > extensions.md

API requests collection

If you are using apps such as Postman or Insomnia, make sure you export your data so they don’t get lost. More info on how to export Postman data here.

Installed applications

If you have Homebrew installed, list all your application by running:

brew list — cask

Save the output for step 2

Ok, now let’s get started on the new laptop!

1. Install homebrew

One of the quickest ways to install stuff on your Mac is by using Homebrew. Grab the curl script on the official Homebrew website and run it in your terminal.

To verify that the command ran successfully, run:

$ brew help

It should return some instructions on how to use brew.

(Optional) You can add some other common tools such as wget, an alternative to curl to download files from the Internet.

$ brew install wget

2. Install apps

Most apps can be installed directly from your terminal using Homebrew which is much quicker than searching for every single app in a browser and downloading it from there.

$ brew install --cask APP_NAME_HERE

Here is a list of apps I always need on my laptop:

brew install --cask 1password
brew install --cask google-chrome
brew install --cask firefox
brew install --cask iterm2
brew install --cask slack
brew install --cask zoom
brew install --cask visual-studio-code
brew install --cask spotify

3. Setup Iterms2

If you are a fan of Iterms2 and Oh My Zhs! or you are just curious about them, here is a guide on how to set them up.

If you follow the guide, your terminal should look like this:

Nice right?

4. Set up GitHub SSH key

To be able to clone, commit or push to your GitHub repositories, you need to get GitHub access on your machine by using an SSH key.

Generate a new SSH and add it to your ssh-agent by following these instructions. Make sure you check for existing keys before creating a new one.

Now that you have an SSH key on your machine, add it to your GitHub account.

5. Set your Identity on Git

Git is one of the main VCS (Version Control System), used for tracking changes in any set of files. It works hand in hand with Github which helps you manage the changes tracked by Git.

Set your identity with the following commands:

$ git config --global user.name "John Doe"
$ git config --global user.email johndoe@example.com

It’s best to use the email associated with your GitHub account so commits can be mapped to your GitHub account.

6. Set up your Code Editor (VSCode)

Visual Studio Code is one of the easiest code editors to use when you’re getting started in programming. It works best with JavaScript but can also be used for other languages with the help of extensions.

Import existing configs

To import an existing settings.json, open the command palette (Ctrl+Shift+P), run “Open Settings (JSON)”, and replace the content with your existing settings.json, then save.

If you have an extension.md to import, make sure you are in the directory the md file is saved in and run the following in your terminal

xargs -n1 code --install-extension < extensions.md

Launching from the command line

To run VSCode from your Terminal:

• open VSCode
• Open the Command Palette (Cmd+Shift+P) and type ‘shell command’ to find the Shell Command: Install ‘code’ command in PATH command. (Full instructions)

Restart your terminal. Now cd into a project and run code . . It will open the project in VSCode.

7. Install Node (for JavaScript developers)

Node has its own installer but I recommend using nvminstead to manage, upgrade or switch Node versions easily

Install nvm

Copy the install script from the nvm GitHub page and run it in your terminal.

If you get an error requesting to install Xcode, go ahead and install it from the prompt. Otherwise, you can find it in the App Store and install it from there.

You might need to restart your terminal after installing Xcode, then rerun the nvm installer script.

Install node LTS version

Once nvm is installed, list all the node versions:

$ nvm ls-remote

Find the latest LTS (current version on Long Term Support). At the time of writing, the latest LTS is v16.14.2

Install the LTS and set it as the default version:

$ nvm install v16.14.2 #Replace v16.14.2 with current LTS version
$ nvm alias default node

Here is more info on Node versions and when to use which. Note that Production applications should only use Active LTS or Maintenance LTS releases.

Install npm/yarn

Finally, install your package manager

$ npm install -g npm

If you want to use yarn, also run

$ npm install --global yarn

Wrapping up

Hopefully, this wasn’t too painful and you should now be ready to code! Feel free to share in the comments any setup recommendations, tips, or just feedback on how setting up your new MacBook went.

This article was inspired by E. Elliott’s article Setting Up a New MacBook for JavaScript Development.