My JS Dev Setup

I’ve been asked a few times recently what tools I use for JavaScript development, so I thought I’d share my basic setup in a quick blog post along with some setup instructions. Just like the JS landscape itself, tools and setups go out of date very quickly. So if you’re reading this in 2017 on your quantum powered mindtop (it’s like a laptop, but it’s in your mind), please bear that in mind.

Atom

There are lots of great code editors out there for you to choose from. I’m currently using Atom for React and Meteor work and loving it. It’s free, open source and has a strong community behind it.

Built by the GitHub team and taking obvious notes from Sublime Text (my previous editor of choice), Atom has a great package control system built right into the editor. Just like Atmosphere and npm, thousands of people are building and maintaining great packages for Atom. Chances are that if you feel like you’re missing something in your workflow, then someone’s already built a package to take care of it.

https://github.com/atom/atom

Eslint

Linting is the extremely useful process of analyzing your code for potential errors.

It’s super simple to get per-project code linting set up with Atom. If you’re not already using Eslint or similar when you write your JavaScript, start today. Seriously, start right now. You will start writing better, more sustainable, easier to read code almost immediately. And better still, the Eslint package in Atom runs automatically while you’re coding and can take care of common mistakes like missing commas automatically for you on save (if you want it to).

Eslint is fully customizable to your coding style and at OK GROW! we use a slightly modified version of the official AirBnb eslint config, which has quickly become an industry standard.

Although you can have a global Eslint file on your computer that Atom will use for for every single project, at OK GROW! we advocate the use of a per-project config file for a couple of reasons:

1. All developers on the project will be writing code to the same set of rules.
2. As the project ages and standards progress, updating the project is as simple as updating the Eslint file, but is also a completely optional process.

Eslint setup in Atom

Install the Atom packages

Open Atom > Preferences > Install and make sure the following packages are installed:

Install npm modules

Install the eslint, airbnb and meteor specific modules to the project itself (not global):

npm install --save-dev eslint-config-airbnb eslint-plugin-import eslint-plugin-react eslint-plugin-jsx-a11y eslint eslint-import-resolver-meteor

Create a project .eslintrc file

You can create your own, or just copy the one we use to your root:

curl -O https://raw.githubusercontent.com/okgrow/guides/master/code_style/.eslintrc

Atom Plugins

There are a whole host of Atom plugins that make your life easier and your work quicker. I’ll do a separate blog post to share some of the favorites from the OK GROW! team.

Snippets

There are a couple of patterns of code that you’ll use over and over again. Atom makes it easy to add custom snippets for anything you find yourself re-using. I like keeping these as snippets as opposed to in a package so I can quickly tweak them as I “level up”. You can take a peak at a few of the ES6 react snippets that I use in atom.

You can copy and paste these intoAtom > Snippets if you want to try them out.

Shortcuts

This applies to pretty much every program you’ll ever use, but learn your keyboard shortcuts. Just like with snippets, anything you find yourself doing repeatedly should be optimized. For example, in Atom’s tree-view, you can click anywhere in your folder structure and use the a key to create a new file.

Git commit messages

I use Atom to write my commit messages, especially for bigger commits. It encourages me to write nice, verbose descriptions. To set up Atom as the default simply paste the following in to Terminal:

git config --global core.editor "atom --wait"

Now when you type git commit it’ll automatically open up Atom for you to type your commit message. Save the file and close the window (not just the tab) and your commit will continue.

Zsh

Zsh is an alternative for the default Bash shell that comes with Terminal in OS X. It’s highly customizable and that’s where oh-my-xsh comes in — a community driven framework for managing your zsh configuration.

It’s really simple to install. Just open terminal and paste in:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

Zsh and Git

Oh-my-zsh has a git plugin installed by default. The most visible benefit of this plugin is the ability to see which branch you are currently on at a glance.

This alone is worth using Zsh for!

Zsh Aliases

Zsh, just like Bash, has aliases for tasks you find yourself repeating (notice a theme here?). For example, have a folder you go to a lot? Simply open the config file in Atom:

atom ~/.oh-my-zsh/lib/directories.zsh`

And add an alias:

alias shortcut='cd /popular/folder/path/'

Restart terminal and now every time you time you type shortcut you’ll be taken to the folder. This can be applied to any command you like.

Readline shortcuts

Even if you don’t choose to use Zsh you can use the readline shortcuts. For example, instead of furiously tapping that up arrow key in an attempt to find the line you’re looking for, try using ctrl+r and searching instead!

Flycut

This amazing little tool for OS X remembers your clipboard history. Copy multiple items in a row and then access them all from a handy status bar dropdown.

Shiftit

My favorite tool for managing window size and position through keyboard shortcuts. For example, command+option+right throws the current window to to the right half of my screen.

Originally published at www.okgrow.com.