development-setup-js

Useful setup instructions forJavascript projects, whether client- or server-side.

These installation instructions assume you are using macOS. Instructions for other operating systems will vary.

Utilities

iTerm

The Terminal app is ok, but iTerm is better: download and install it.

Brew

There are lots of useful packages available for installation with brew.

Install it from here: brew.sh.

Then install some packages:

$ brew install tree
$ brew install yarn

yarn is a new package manager for JavaScript.

Git

Best use the brew version of git – makes it easier to update than the version shipped with xcode:

$ brew install git

Ensure you're not using the macOS version of git:

$ which git
/usr/local/bin/git      # should NOT be /usr/bin/git
$ git --version
git version 2.17.1

Configure your name and email address for commits (be sure to use the email address you have registered with GitHub):

$ git config --global user.name "Your Name"
$ git config --global user.email "your.name@example.com"

And here's a useful start for a .gitignore file: .gitignore.

Zsh

If you already like using bash, you'll appreciate using zsh.

• Type brew install zsh. Type 0 if the prompt ask you about .zshrc.
• Type which zsh to determine where your new shell has installed.
• Edit /etc/shells and add /usr/local/bin/zsh
• Type chsh -s /usr/local/bin/zsh, then open a new terminal tab – zsh will now be the shell running.

Oh My ZSH

oh-my-zsh makes zsh even better – check out the wiki page.

Scroll down on the page above for installation instructions.

Note: you may want to move the /usr/local/bin path to the beginning of your PATH definition in your .zshrc file:

export PATH=/usr/local/bin:$HOME/bin:$PATH

Then open a new tab in your terminal app to see the changes.

Nvm

nvm allows you to easily select which version of node to use.

Installation instructions are here:

github.com/creationix/nvm/blob/master/README.md

Once installed, select the version of node you want to use. For example, to use version 10.4.0:

$ nvm install 10.4.0
Downloading and installing node v10.4.0...
Downloading https://nodejs.org/dist/v10.4.0/node-v10.4.0-darwin-x64.tar.gz...
######################################################################## 100.0%
Computing checksum with shasum -a 256
Checksums matched!
Now using node v10.4.0 (npm v6.1.0)

And to verify that the above process completed correctly, the following command should show the node version you selected:

$ node --version
v10.4.0

You should also run this command to avoid updating the default alias along with node version updates later on:

$ nvm alias default node
default -> node (-> v10.4.0)

Linting

Javascript

On a large project, I usually prefer to use Airbnb's eslint configuration as a base, and modify a few of the rules.

However, a more simple approach is to extend the eslint:recommended set of rules: .eslintrc.

IDEs

There are quite a few different IDEs you can use; here are setup instructions for a couple I've used.

VS Code

1. Download Visual Studio Code, install it, and open it.

2. Open Extensions (Cmd-Shift-X), and add the following extensions:

• Debugger for Chrome
• EditorConfig for Visual Studio Code
• ESLint
  • then run npm install -g eslint from the terminal
  • and restart VS Code
• GitLens
  • suggestion: configure the Absolute date format setting: ddd D MMM YYYY
• npm support for VS Code
• Rainbow Brackets
• Sass Lint
• TSLint
  • then run npm install -g tslint typescript from the terminal
  • and restart VS Code
• vscode-icons
• GraphQL for VSCode
• Jest (orta.vscode-jest)

3. Open Settings (Cmd-,)

• customise User settings:
  • "terminal.integrated.shell.osx": "/bin/zsh"
  • "terminal.external.osxExec": "iTerm.app"

Atom

1. Download atom, and copy it into your Applications folder.

2. If there is no file called /usr/local/bin/atom, run this command in your terminal: sudo ln -s /Applications/Atom.app/Contents/Resources/app/atom.sh /usr/local/bin/atom

This will allow you to run atom from the terminal.

3. Open Atom, open Preferences (Cmd-,), click on the Install tab and install the following packages:

• atom-ternjs
• color-picker
• emmet
• file-icons
• linter
• linter-ui-default
• linter-eslint
• linter-tslint
• linter-htmlhint
• linter-js-yaml
• linter-sass-lint
• eslint-plugin-html
• open-in-browser

4. In the Editor panel, make the following changes:

• Invisibles > Scroll past end – check
• Show Indent Guide – check
• Show Line Numbers – check
• Soft Tabs – check
• Tab Type > soft – must do this – otherwise Atom will insert tab characters

Mongo

Install it with brew:

$ brew install mongodb

Run the following command to ensure you have a place for mongo to store the data for your databases:

$ [[ ! -d /data/db ]] && sudo mkdir -p /data/db && sudo chown -R $(whoami) /data/db || ls -la /data

If everything is fine, the above command should result in something like this:

total 0
drwxr-xr-x   3 root       wheel   102 Nov 11 13:06 .
drwxr-xr-x  38 root       wheel  1360 Nov 11 13:06 ..
drwxr-xr-x   8 yourusername  wheel   272 Nov 11 13:10 db

Sundry

One thing macOS does not handle well is keyboard management of application windows. There are a couple of apps that plug this hole:

• Spectacle app (free!) – https://www.spectacleapp.com/
• Magnet (cheap!) – https://itunes.apple.com/gb/app/magnet/id441258766

License

MIT