Dev Tools (Revisited)

I wrote this article earlier about my development setup. I thought I would write my current setup process, in greater detail, with new tools and config. I'm just now setting up everything from scratch, so I'll try to put it all in here. If you are on Windows, check out this article.

I am on OSX 10.12.5 (Sierra) on a hackintosh.

For work, I primarily do backend dev in node & python, and web frontend with React, Angular, etc. Your mileage may vary. I mostly just wanted to take notes on what I did. My work has changed quite a bit since the original article, so this represents a different set of tools.

I used to use Sublime, and still love it, but I am trying to switch over to Atom, as I like that it's open-source, and free for others.

I am dyslexic, so syntax-highlighting and the look of things is often more important than it might seem like it should be. I also try to minimize cognitive-load when I am doing daily tasks, as much as possible. A little work on these things, up-front, generally can really pay off big.

fresh box

We'll start with a fresh box. I just got my hackintosh setup with the only modifications being what I had to do to get it booting and working with the hardware.

These things should be the same for a fresh Mac, and pretty similar for a fresh linux box.

I setup general Home/End working the way I expect (beginning and end of line) with this

In installed Chrome and set it as default browser. There are tons of useful plugins. Search for "react" and "development" in the store. I especially like "uBlock Origin", "React Developer Tools", "Redux DevTools", and "Angular Inspector".

dock

  • I unpin everything from the dock except Terminal, Finder, Chrome, Atom, Downloads, and the Trash. I add an Application menu.
  • Once you run a thing you want, pin it to the dock with right-click/Ctrl-click then Options, then "Keep in Dock". You can drag it wherever you like in the dock.
  • To add Applications menu, open finder and drag Applications folder to your dock.

console stuff

terminal

First, I setup my terminal. iTerm2 is cool, but I just setup the built-in terminal. You can find it under Applications/Utilities/Terminal, pin it to dock once you run it.

  • I use "Pro" as default theme. It just works better for my brain.
  • I enabled "Antialias text", which improves rendering.
  • I setup keys
  • I add System Preferences > Keyboard > Shortcuts > Services > New Terminal Tab at Folder for Finder.

homebrew

Homebrew makes installing console stuff much better.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

I install node & friends with:

brew install node

At this point I installed Xcode from the app store, so I can compile anything I need to in brew.

colors

I add this to my ~/.bash_profile to get colors by default:

# colors
export CLICOLOR=1
export LSCOLORS=GxFxCxDxBxegedabagaced
export GREP_OPTIONS='--color=auto'
alias ls='ls -GFh'

powerline

Powerline gives awesome git/dir status, and looks cool. I followed these instructions to get it installed:

brew install python coreutils
pip install powerline-status

Next I grabbed some fonts for it installed them on my system, then set the terminal use "Roboto Mono Lightfor Powerline, 14pt" font, in the Pro theme settings. Feel free to use any of the powerline fonts. I will probably try out a few until I settle on one that looks good.

Then, I add this to my ~/.bash_profile:

. /usr/local/lib/python2.7/site-packages/powerline/bindings/bash/powerline.sh

Then I followed the instructions to install powerline-gitstatus. I made ~/.config/powerline/themes/shell/default.json look like this

All together, you have a pretty sweet looking terminal:

terminal_colors

CLI editors

Sometimes I am ssh'd in to my box, or just want a quick look at something. In these cases I use vim/nano, and I want them to syntax-highlight.

git clone https://github.com/serialhex/nano-highlight ~/.nano
brew install nano
ln -s /usr/local/bin/nano /usr/local/bin/pico
nano ~/.nanorc

make it look like this:

include /usr/local/share/nano/asm.nanorc
include /usr/local/share/nano/awk.nanorc
include /usr/local/share/nano/c.nanorc
include /usr/local/share/nano/cmake.nanorc
include /usr/local/share/nano/css.nanorc
include /usr/local/share/nano/debian.nanorc
include /usr/local/share/nano/fortran.nanorc
include /usr/local/share/nano/gentoo.nanorc
include /usr/local/share/nano/groff.nanorc
include /usr/local/share/nano/html.nanorc
include /usr/local/share/nano/java.nanorc
include /usr/local/share/nano/makefile.nanorc
include /usr/local/share/nano/man.nanorc
include /usr/local/share/nano/mgp.nanorc
include /usr/local/share/nano/mutt.nanorc
include /usr/local/share/nano/nanorc.nanorc
include /usr/local/share/nano/objc.nanorc
include /usr/local/share/nano/ocaml.nanorc
include /usr/local/share/nano/patch.nanorc
include /usr/local/share/nano/perl.nanorc
include /usr/local/share/nano/php.nanorc
include /usr/local/share/nano/pov.nanorc
include /usr/local/share/nano/python.nanorc
include /usr/local/share/nano/ruby.nanorc
include /usr/local/share/nano/sh.nanorc
include /usr/local/share/nano/tcl.nanorc
include /usr/local/share/nano/tex.nanorc
include /usr/local/share/nano/xml.nanorc
include "~/.nano/Dockerfile.nanorc"
include "~/.nano/apache2.nanorc"
include "~/.nano/apacheconf.nanorc"
include "~/.nano/aptsrclist.nanorc"
include "~/.nano/asm.nanorc"
include "~/.nano/bash.nanorc"
include "~/.nano/c-file.nanorc"
include "~/.nano/c.nanorc"
include "~/.nano/changelog.nanorc"
include "~/.nano/changelogs.nanorc"
include "~/.nano/clike.nanorc"
include "~/.nano/coffee.nanorc"
include "~/.nano/conf.nanorc"
include "~/.nano/config.nanorc"
include "~/.nano/config2.nanorc"
include "~/.nano/config3.nanorc"
include "~/.nano/configfiles.nanorc"
include "~/.nano/conky.nanorc"
include "~/.nano/css.nanorc"
include "~/.nano/cython.nanorc"
include "~/.nano/default.nanorc"
include "~/.nano/delphi.nanorc"
include "~/.nano/desc.nanorc"
include "~/.nano/dotemacs.nanorc"
include "~/.nano/dotenv.nanorc"
include "~/.nano/dummy.nanorc"
include "~/.nano/ebuild.nanorc"
include "~/.nano/editorconfig.nanorc"
include "~/.nano/ekghistory.nanorc"
include "~/.nano/emailquote.nanorc"
include "~/.nano/etc-stuff.nanorc"
include "~/.nano/etcportage.nanorc"
include "~/.nano/etcxml.nanorc"
include "~/.nano/fortran.nanorc"
include "~/.nano/gentoo.nanorc"
include "~/.nano/groff.nanorc"
include "~/.nano/haskell.nanorc"
include "~/.nano/havp.nanorc"
include "~/.nano/html.nanorc"
include "~/.nano/httpstatuscodes.nanorc"
include "~/.nano/info.nanorc"
include "~/.nano/ini.nanorc"
include "~/.nano/initng.nanorc"
include "~/.nano/initscript.nanorc"
include "~/.nano/java.nanorc"
include "~/.nano/js.nanorc"
include "~/.nano/lex.nanorc"
include "~/.nano/lisp.nanorc"
include "~/.nano/log-stuff.nanorc"
include "~/.nano/lua.nanorc"
include "~/.nano/maincf.nanorc"
include "~/.nano/makefile.nanorc"
include "~/.nano/man.nanorc"
include "~/.nano/markdown.nanorc"
include "~/.nano/mimetype.nanorc"
include "~/.nano/mutt.nanorc"
include "~/.nano/named.nanorc"
include "~/.nano/nanorc.nanorc"
include "~/.nano/nscd.nanorc"
include "~/.nano/others.nanorc"
include "~/.nano/paludis.nanorc"
include "~/.nano/passwd.nanorc"
include "~/.nano/patch.nanorc"
include "~/.nano/perl.nanorc"
include "~/.nano/php.nanorc"
include "~/.nano/php2.nanorc"
include "~/.nano/plaudis.nanorc"
include "~/.nano/po.nanorc"
include "~/.nano/postgresql.nanorc"
include "~/.nano/pov.nanorc"
include "~/.nano/privoxy.nanorc"
include "~/.nano/python.nanorc"
include "~/.nano/rcfiles-new.nanorc"
include "~/.nano/reST.nanorc"
include "~/.nano/rsync.nanorc"
include "~/.nano/ruby.nanorc"
include "~/.nano/scheme.nanorc"
include "~/.nano/sh.nanorc"
include "~/.nano/shlike.nanorc"
include "~/.nano/softcam.nanorc"
include "~/.nano/sourceslist.nanorc"
include "~/.nano/tab.nanorc"
include "~/.nano/tcl.nanorc"
include "~/.nano/tex.nanorc"
include "~/.nano/todo.nanorc"
include "~/.nano/txt2tags.nanorc"
include "~/.nano/urls.nanorc"
include "~/.nano/xdefaults.nanorc"
include "~/.nano/xml.nanorc"
include "~/.nano/xorg.nanorc"
include "~/.nano/yacc.nanorc"

And I want vim to be reasonable for my brain, so I made ~/.vimrc look like this:

set term=builtin_ansi

filetype plugin indent on
syntax on

" set number
nmap <C-N><C-N> :set invnumber<CR>

I comment set number for copy/paste, but you can un-comment if you want that for default. I also added Ctrl-N (twice) to toggle line-numbers.

Atom

As I said, this is not my usual editor, but I'm trying to make a switch. I am by no means an expert on Atom, but this is what I did to get it setup. I will probably be adding more packages, trying them out, and removing dumb ones as I go.

SHIFT-⌘-P is the "do something" key combo, just like Sublime.

Window: Install Shell Commands - this gives you atom and apm (Atom Package Manager) in your terminal.

Then, I installed these packages:

atom-beautify
atom-lupa
atom-prettydiff
busy-signal
emmet
emmet-jsx-css-modules
emmet-jsx-props
extract-component
intentions
iso8601-timestamp
jsx-comment
language-babel
linter
linter-bootlint
linter-csslint
linter-gcc
linter-js-standard
linter-json-lint
linter-scss-lint
linter-ui-default
markdown-preview-plus
markdown-toc
markdown-writer
standard-formatter
standard-react-snippets
standardjs-snippets

apm makes it faster to manage these, but you can also use the GUI, if you like.

For some reason the Welcome screen kept showing, so I added this to ~/.atom/init.coffee:

atom.config.set 'welcome.showOnStartup', false

emmet

Emmet speeds up development with HTML, PHP, and JSX. it's like tab-completion on steroids. Be sure to check out the demo on their site.

To get it working well with atom, first I setup my global system config for emmet: atom ~/emmet/syntaxProfiles.json ~/emmet/profiles.json:

~/emmet/syntaxProfiles.json:

{
  "js": "js",
  "jsx": "js"
}

~/emmet/profiles.json:

{
  "html": {
    "attr_quotes": "double"
  },
  "js": {
    "attr_quotes": "single",
    "self_closing_tag": true
  }
}

This gives me single-quotes in JS/JSX (to follow standardjs.)

Next, in the menu I used Atom/Keymap and added this:

'atom-text-editor:not([mini])':
  'tab': 'emmet:expand-abbreviation-with-tab'

Which improves tab-completion.