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.

Chrome offers great developer tools, but isn’t the best at protecting your privacy. Brave is a more privacy-preserving alternative which also shares Chrome’s awesome developer tools:

“Used ‘out of the box’ with its default settings Brave is by far the most private of the browsers studied. We did not find any use of identifiers allowing tracking of IP address over time, and no sharing of the details of web pages visited with backend servers.” — “Web Browser Privacy: What Do Browsers Say When They Phone Home?” (Douglas J. Leith, 2020)

2. Install nvm, Node, and XCode Developer Tools

Node is an integral part of a JavaScript developer’s workflow. You’ll need it along with npm (included) to install packages, run many scripts, run test suites, etc. nvm is a version manager for Node. XCode Developer Tools is required for commonly needed developer tools on Mac OS (including Git).

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 (nvm installer won’t be able to complete if you skip this):

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. It’s a framework for managing zsh configurations. The next step depends on it. 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. 🐶🎉

Install and Configure VS Code

Download VS Code from the official website. VS Code is the most popular JavaScript IDE by a large margin for good reason. Its integrated type inference (powered by the TypeScript inference engine) is the best in its class, and works on standard JavaScript files.

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

Extension Icon

Install the ESLint extension:

ESLint automatically checks your source code for common errors and style issues, helping you reduce bugs and stay on the same page with your development team.

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.

Navigate to settings (Preferences -> Settings):

If you get a “friendly” UI with a bunch of preferences, make sure the “user” tab is selected, and then switch to the code view using the “Open Settings (JSON)” icon in the upper right hand corner of the screen (hover for a couple of seconds to see the labels).

Add this to your settings JSON:

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

Set Your Tab Size

JavaScript convention is to use spaces, not tabs, and to use two spaces instead of four spaces for the tab size. Set those preferences in your editor settings:

"editor.tabSize": 2

Install Homebrew

Time to install Homebrew. Homebrew is a package manager for common Unix tools. Once it’s installed, grab some nice tools:

brew install wget
brew install graphviz

wget is a common alternative to curl. Some installer instructions ask you to use wget and don’t provide an alternate curl command. Some scripts implicitly assume that wget will be available, and fail if it isn’t. It’s primary advantage/disadvantage vs curl is that it saves the requested file in the local directory by default.

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:

Dependency Graph for the Lesson Module for EricElliottJS.com

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.

Eric Elliott is the author of the books, “Composing Software” and “Programming JavaScript Applications”. As co-founder of EricElliottJS.com and DevAnywhere.io, he teaches developers essential software development skills. He builds and advises development teams for crypto projects, and has contributed to software experiences for Adobe Systems, Zumba Fitness, The Wall Street Journal, ESPN, BBC, and top recording artists including Usher, Frank Ocean, Metallica, and many more.

He enjoys a remote lifestyle with the most beautiful woman in the world.