The Ideal JS Developer Environment
This past week I've taken some time to look at my current developer environment and invest a few hours (okay, more like 10) into some better tooling. After spending all that time, I'm relieved and see the benefit already. I think many developers put off looking up good tooling because they're too busy and tell themselves they'll do it later.
That's a bad idea.
The amount of time you will save with the correct environment is worth putting off a new feature for one day.
My setup includes Atom and iTerm 2. I'll be covering the various plugins I use for each. Just a quick note, I have three different macs I have set this up on, and yes I'll go over syncing the config across computers. As a lead developer, you may want to easily share this setup with future employees so their time on-boarding can be as smooth as possible.
Atom
I'll start with the setup I have for atom. Anyone who's used it a while knows it has a fair share of issues. Keeping your plugin count to a minimum keeps it speedy. I only have the plugins listed below (plus the default ones) and the app is super fast most of the time.
This is a must-have for doing any sort of JSX stuff. Although the readme claims it is not longer supported, it is still being updated. I have yet to find a better highlighter for ES-next features.
This is the base linter package needed for just about every linter out there. Provides a nice api for doing linting.
This provides on-the-fly flow linting. Compared to flow ide it is much faster, but does not show flow definitions upon hovering over variables. I do wish I could hover over objects to see what properties they have. Either way, accessing a key that isn't in a type definition throws a linter error immediately which cannot be said for other flow plugins.
Lints your JS files using standard. No more running linter tools inside of webpack or before committing. This along with flow has been the best two plugins I've ever installed.
atom-material (ui/syntax)
It's my favorite theme at the moment!
If you work on multiple projects in multiple languages, this is a must. Without it you will commit incorrect tab sizes and all kinds of things that will annoy the people in charge of your projects.
Too many packages? Too many computers? No problem. Install this and sync your config through github as a gist!
Since my flow linter doesn't show type definitions on hover, I use this when I'm unsure of what an object contains. CMD+click on my mac and I'm inside the types file. This will take you to where any imported function is defined.
iTerm 2
If you haven't heard of zshell, you haven't been living life to the fullest. It's better than bash in so many ways... Install this and gain access to so many useful plugins. My favorite being the git shortcuts. I can perform any git action in a fraction of the time.
This is the zsh theme I use currently. It's minimal and pretty. I like seeing what branch I'm on if I'm in a folder controlled by git. It's even async. So you can change branches in another tab, or edit a file, and it will update without you running a command!
Changes colors as you type commands in, it just looks cool, okay!
Solarized dark
I set my color scheme in iTerm2 to solarized dark. It's installed by default, but is not set by default.
I use Fira Mono as my default font in iTerm.
Command aliases
In my ~/.zshrc I source ~/.zsh-addons with a whole bunch of aliases for things I always do. For instance, I ssh to a lot of servers. So I have many lines like this: alias cj='ssh user@server.com -p 5592.
One more thing...
Adding this:
function chpwd() {
emulate -L zsh
ls -a
}
To your ~/.zshrc will perform an ls any time you change directories.
Conclusion
This is currently my setup, I'll update this when I change things. Let me know if there's something else I should be using below! I hope this spared at least one person out there from doing all the same research I've done over countless hours.
Subscribe to zach.codes
Get the latest posts delivered right to your inbox