Setting Up a New MacBook for JavaScript Development

I just got a new MacBook Pro 16" , and I need to prep it for JavaScript software development. This happens all the time when you get hired for a new job, or when you just need to upgrade your personal machine for side projects.

Note:Last updated: Feb, 2020

1. Install Brave and/or Chrome .

2. Install nvm, Node, and XCode Developer Tools

There is an official mac installer for Node, but you’ll want to be able to easily upgrade or switch Node versions, so use nvm , instead.

Run the following command to set up your .zshrc :

touch ~/.zshrc

Visit the nvm GitHub page and copy/paste the curl version of the install/update script into the Terminal.

To find Terminal, click the Launchpad icon, type “Terminal” into the search bar, and then drag Terminal into your dock. You’re going to use it a lot. MacBooks running Catalina (10.15.x+) use zsh by default, but zsh works fine with most Bash scripts.

NVM Installer Script

Launch the terminal and paste that curl script into it. It should look something like this (but use the version from GitHub because it might be newer):

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash

The first time you run this on a new MacBook, you’ll get an error like this:

xcode-select: note: no developer tools were found at '/Applications/Xcode.app', requesting install. Choose an option in the dialog to download the command line developer tools.

But that’s good, because it should automatically ask you if you want to install the XCode Developer Tools to get Git. Go ahead and do that, now.

Then run that curl command again, then close and restart your terminal.

To install the latest LTS version (Long Term Stable):

nvm ls-remote

That will list all the available versions. You want the one labeled “Latest LTS: <name>”:

Then:

nvm install v12.16.1 # Replace v12.16.1 with your latest LTS

Note: You might be tempted to install the latest version of Node, but lots of packages don’t work with it, yet. Be careful on the bleeding edge.

Node comes with npm, but it’s unlikely to be the latest version. Let’s grab that while we’re at it:

npm install -g npm

Now you can install JavaScript modules.

Set Up Your GitHub Keys

Generate a new SSH key for GitHub access . SSH is a more secure and more convenient alternative to HTTPS access for cloning, pushing, and pulling from and to GitHub.

Set Up Your Prompt

Typically, if I’m using the terminal, it’s because I’m coding, so I like to use a command prompt that tells me about the current git status at a glance.

You can start by installing Oh My Zsh . Follow the instructions on the linked website. This is going to wipe out your nvm settings, but don’t worry. Scroll up and run that nvm installer script again, and you’re back in business.

Install a theme. There are precisely 179,769,313,486,231,570 themes listed indiscriminately. Let me save you some time. PowerLevel10k seems pretty good . It looks like this:

When you install it, it will ask you some questions. You may want to install the Power Level font, but it’s optional for this theme. I skipped it this time around, and check it out! No puppies were harmed. :dog::tada:

Install and Configure VS Code

Download VS Code from the official website. After you open the zip file, drag VS Code to your dock, though you’ll probably frequently open it by typing code . in your project directory from the terminal (at least, that’s what I do).

Enable the terminal code command: open VS Code and type CMD+SHIFT+P and type “shell command” and select “Install ‘code’ command in PATH”.

Install the ESLint extension:Click the extension icon in the sidebar and click the green “Install” button next to ESLint.

Now you’ll want to set up VS Code to automatically fix anything it can automatically fix on file save.

Add this to your settings (Preferences -> Settings):

"editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
}

I wrote another article about configuring ESLint and Prettier to work together on your projects. That needs to be configured for each project.

Install Homebrew

Time to install Homebrew . Once that’s done, grab some nice tools:

brew install graphviz
brew install wget

What’s that graphviz thing? It lets you generate graphics, of course! Check this out:

npm i -g dependency-cruiser

Now you can do stuff like this:

depcruise --exclude "^node_modules" --output-type dot src | dot -T svg > dependencygraph.svg

That will use graphviz to build a dependency graph of your project.

That’s probably too much detail for your project though. Here’s a command that will generate the dependency graph for just one view. I’m running it on the source for EricElliottJS.com :

depcruise --max-depth 2 --exclude "^(node_modules)" --output-type dot src/Components | dot -T svg > dependencygraph.svg

Which produces:

That’s it for now. You should be ready to rock!

Next Steps

Now that you’ve got your development environment all set up, head over to EricElliottJS.com and learn how to use it to make some magic.