/ #JavaScript #meta 

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

Change edit mode to natural text

  • iTerm Preferences → Profiles → select your profile → Keys tab → Load Preset… → Natural Text Editing (See this StackOverflow answer)

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

Quit on tab close

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

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)

Enable infinite history

  • iTerm Preferences → Profiles → select your profile → Terminal tab → Unlimited scrollback

Shell setup

zsh

With oh-my-zsh manager. Sets you up with auto-completion.

snazzy colour theme

Using 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; promptinit prompt pure

Browsers and testing

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

  • Google Chrome: still a goto due to its solid and extensive dev tools. Usually I install the React or Vue dev tools.
  • Postman for Mac: to manually test APIs
  • Firefox: number 2 browser
  • Brave: 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, 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

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

Nice to have extensions

Productivity

Not many productivity apps, just Alfred, which I use as a better Spotlight Search and Clipy which is a clipboard manager.

Clipy

Bump up the number of “inline items” (Clipy → Preferences → Menu → Number of items place inline).

Set your screenshots to save to clipboard + enable the option to paste as plain text (Clipy → Preferences → Beta → Paste as PlainText + Save screenshots in history).

Tooling

Update Xcode using xcode-select --install.

Install Homebrew 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 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: “Type git open to open the GitHub page or website for a repository in your browser.” using npm install --global git-open
  • git-standup: “Recall what you did on the last working day.” using git standup, there are multiple install options (see git-standup#install), I usually go with: brew install git-standup
  • git-lg: 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:

  • Generate a new key: ssh-keygen -t rsa -b 4096 -C "*[email protected]*"
  • 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. VirtualBox allows you to run Virtual Machines on Mac, install it at VirtualBox downloads.

unsplash-logoOskar Yildiz

Author

Hugo Di Francesco

A developer, working out of London writing CSS, JavaScript and Python.

Subscribe to the Code with Hugo newsletter

Get the latest articles in your inbox every 2 weeks