A simple JavaScript/Node coding setup on Mac OS X
Tags: setup, javascript, node, productivity
Published: 2018-11-19 07:50:20

---
title: A simple JavaScript/Node coding setup on Mac OS X
published: true
tags: setup, JavaScript, node, productivity
canonical_url: https://codewithhugo.com/a-simple-javascript/node-coding-setup-on-mac-os-x/
---

Here’s how I get productive for JavaScript/Node on Mac OS.

# Terminal

## Setup iTerm2

- Install [iTerm2](https://www.iterm2.com/)

### Change edit mode to natural text

- iTerm Preferences → Profiles → select your profile → Keys tab → Load Preset… → Natural Text Editing (See [this StackOverflow answer](https://apple.stackexchange.com/a/218639))

![](https://d2mxuefqeaa7sj.cloudfront.net/s_4D85104EB4612E36D39F1EDC98FBA3CCC5F99A3320C73070E613DFAB4FC5809A_1542554401407_image.png)

### New session should start where previous left off

- iTerm Preferences → Profiles → select your profile → General tab → Working Directory section → Reuse previous session’s directory option  

![](https://d2mxuefqeaa7sj.cloudfront.net/s_4D85104EB4612E36D39F1EDC98FBA3CCC5F99A3320C73070E613DFAB4FC5809A_1542554259914_image.png)

### Quit on tab close

- iTerm Preferences → General, “Closing” → “Quit when all windows are closed”  

![](https://d2mxuefqeaa7sj.cloudfront.net/s_4D85104EB4612E36D39F1EDC98FBA3CCC5F99A3320C73070E613DFAB4FC5809A_1542554318639_image.png)

### Increase font size

- iTerm Preferences → Profiles → select your profile → Text tab → Font section → Change font → Update font in the popup
- Fan of 16pt Monaco (12, 14 is just too small)

![](https://d2mxuefqeaa7sj.cloudfront.net/s_4D85104EB4612E36D39F1EDC98FBA3CCC5F99A3320C73070E613DFAB4FC5809A_1542554456878_image.png)

## Shell setup

### zsh

With [oh-my-zsh](https://ohmyz.sh/) manager. Sets you up with auto-completion.

### snazzy colour theme

Using [iterm-snazzy](https://github.com/samtgarson/iterm-snazzy), which is a case of downloading the `.itermcolors` file and choosing the theme from (iTerm Preferences → Profile > Colors > Color Presets…).

### Pure prompt

It’s simple, clean but gives you enough information to be productive.

_(see Setup and configuration for how to get Node/npm up and running)_

- Install using npm: `npm install --global pure-prompt`
- Initialise by adding the following to your `.zshrc`:autoload -U promptinit; promptinitprompt pure

# Browsers and testing

As a developer it’s always good to have a few browsers and tools handy:

- [Google Chrome](https://www.google.com/chrome/): still a goto due to its solid and extensive dev tools. Usually I install the React or Vue dev tools.
- [Postman for Mac](https://www.getpostman.com/apps): to manually test APIs
- [Firefox](https://www.mozilla.org/firefox/new/): number 2 browser
- [Brave](https://brave.com/): auto-blocks ads and tracking, sort of the “play” browser, its dev tools are a buggier/less ergonomic version of Chrome dev tools (this is because Brave uses Chromium under the hood)
- Safari - installed by default on Mac OSX, it’s a buggy browser, good to test using it since it surfaces weird SVG and cookies security policy quirks. Since it’s the default it’s also widely used by non-technical people.
  - Enable the dev tools: Safari → Preferences → Advanced → Show develop menu in menu bar.

# Editor

I use [Visual Studio Code](https://code.visualstudio.com/), it strikes the right balance between usable out of the box and customisable. The way I see it editors like vim or Atom need a bit of config before being productive, and others like Sublime or IDEs (WebStorm) don’t have the same plugin ecosystem.

## Install VSCode command line tools

Open the dialog using CMD + P.

Use: `Shell Command: Install 'code' command in PATH`

![](https://d2mxuefqeaa7sj.cloudfront.net/s_4D85104EB4612E36D39F1EDC98FBA3CCC5F99A3320C73070E613DFAB4FC5809A_1542556492194_image.png)

The VSCode command line tool usage examples:

- `code .` : open `.` directory in VSCode
- `code -r .` : replace directory opened in VSCode with the current directory
- `code -a .` : add current directory to VSCode, ie. initialises a workspace

## Must-have extensions

- Atom keymap: I’m not a fan of the default keybindings, this uses Atom-style ones, [get it from the Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=ms-vscode.atom-keybindings) or `ext install atom-keybindings` from `CMD + P` menu
- EditorConfig for VS Code: “EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs.” (see [editorconfig.org](https://editorconfig.org/)), ie. helps you deal with tab size, trimming spaces etc. across code editors, [get it here from the Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig) or `ext install EditorConfig` from `CMD + P` menu

## Nice to have extensions

- ESLint: “Integrates ESLint JavaScript into VS Code.”, [get it from the Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) or `ext install vscode-eslint` from `CMD + P` menu
- npm Intellisense: “autocomplete npm modules in import statements”, [get it from the Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense) or `ext install npm-intellisense` from `CMD + P` menu
- Snazzy theme: same colour theme (snazzy) as I’ve got setup for the terminal for VSCode, [get it from the Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=alexanderbast.vscode-snazzy) or `ext install snazzy theme`
- Import Cost: “Display import/require package size in the editor”, [get it from the Visual Studio Marketplace](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost), or `ext install import-cost`

# Productivity

Not many productivity apps, just [Alfred](https://www.alfredapp.com/), which I use as a better Spotlight Search and [Clipy](https://clipy-app.com/) which is a clipboard manager. For Clipy, bump up the number of “inline items” (Clipy → Preferences → Menu → Number of items place inline).

![](https://d2mxuefqeaa7sj.cloudfront.net/s_4D85104EB4612E36D39F1EDC98FBA3CCC5F99A3320C73070E613DFAB4FC5809A_1542557479751_image.png)

# Tooling

Update Xcode using `xcode-select` `--``install`.

Install [Homebrew](https://brew.sh/) for package managements (think apt or pkg for Mac):

```
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

Install [Node.js](https://nodejs.org/en/) either from source, using the Mac installer or using Homebrew:

```
brew install node
```

Install `n` – Interactively Manage Your Node.js Versions using npm (now that we have Node installed):`npm install -- global n`

Switch to latest Node version using `n`:`sudo n latest`

Install jq (format and deal with JSON nicely in the terminal) and watch (run a command repeatedly) using Homebrew

```
brew install jq watch
```

Add a few git extensions:

- [git-open](https://github.com/paulirish/git-open): “Type `git open` to open the GitHub page or website for a repository in your browser.” using `npm install --global git-open`
- [git-lg](https://coderwall.com/p/euwpig/a-better-git-log): simpler/prettier `git log`:

```
git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit"
```

# Setup and configuration

Add the following minimal `.vimrc`, which enables syntax highlighting, has basic tab/tabsize configuration and enables line numbers display:

```
syntax enable
set tabstop=2
set shiftwidth=2
set expandtab
set number
```

Set up SSH keys and add to VCS hosting, [see this GitHub help article](https://help.github.com/articles/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent/):

- Generate a new key: `ssh-keygen -t rsa -b 4096 -C "*your_email@example.com*"`
- Copy your public key to clipboard so you can paste it wherever your hosted Version Control system asks you to: `pbcopy < ~/.ssh/id_rsa.pub`

Put percentage on power level, right-click the battery indicator and select “Show Percentage”.

# Misc and extras

❤️ Spotify

## (Optional) Docker, VirtualBox

Docker is a containerisation technology, think VMs but smaller. I recommend [Docker for Mac](https://docs.docker.com/docker-for-mac/install/).VirtualBox allows you to run Virtual Machines on Mac, install it at [VirtualBox downloads](https://docs.docker.com/docker-for-mac/install/).

[<svg xmlns="http://www.w3.org/2000/svg" style="height:12px;width:auto;position:relative;vertical-align:middle;top:-1px;fill:white" viewbox="0 0 32 32"><title>unsplash-logo</title>
<path d="M20.8 18.1c0 2.7-2.2 4.8-4.8 4.8s-4.8-2.1-4.8-4.8c0-2.7 2.2-4.8 4.8-4.8 2.7.1 4.8 2.2 4.8 4.8zm11.2-7.4v14.9c0 2.3-1.9 4.3-4.3 4.3h-23.4c-2.4 0-4.3-1.9-4.3-4.3v-15c0-2.3 1.9-4.3 4.3-4.3h3.7l.8-2.3c.4-1.1 1.7-2 2.9-2h8.6c1.2 0 2.5.9 2.9 2l.8 2.4h3.7c2.4 0 4.3 1.9 4.3 4.3zm-8.6 7.5c0-4.1-3.3-7.5-7.5-7.5-4.1 0-7.5 3.4-7.5 7.5s3.3 7.5 7.5 7.5c4.2-.1 7.5-3.4 7.5-7.5z"></path></svg>Oskar Yildiz](https://unsplash.com/@oskaryil?utm_medium=referral&utm_campaign=photographer-credit&utm_content=creditBadge "Download free do whatever you want high-resolution photos from Oskar Yildiz")