My JS Dev Setup
My JS Dev Setup
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.
Linting is the extremely useful process of analyzing your code for potential errors.
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:
- All developers on the project will be writing code to the same set of rules.
- 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
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
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.
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 into
Snippets if you want to try them out.
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 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, 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:
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.
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!
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.
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.