Super JavaScript Developer Tools

I recently spent time setting up my developer environment for Hack Reactor bootcamp. Using the right tools can massively increase your productivity!

I recommend these Super JavaScript Development Tools…

  1. Sublime Text
  2. SublimeLinter + JSHint
  3. HTML/CSS/JS Prettify
  4. Sublime JS Build Console
  5. Slate
  6. Embrace Dark Mode!!!

(Note: I learned a lot trying out different software so I suggest playing around)

For iOS apps, I could write code, debug, and run an app within Xcode. Xcode has its flaws, but it is straightforward and it’s nice not having to switch applications often.

In comparison, JS devs write code in text editors (with helpful plug-ins), debug and test in the browser, run version control and file management in the terminal, and even more! You need to be smart about how you manage your developer environment.

1. Sublime Text

Sublime Text is my most used app and appears to be the most popular text editor for JS devs.

Why is Sublime Text popular? It has developer-friendly features like syntax highlighting and code completion. In addition, a huge library of plugins (a.k.a. packages) let you customize and add functionality!

SUPER TIP: Install Version 3. This beta is actually recommended for daily use by the Sublime Text team. It has worked great for me.

2. SublimeLinter + JSHint

SublimeLinter is a must-have for efficient coding!

A linter checks your code for stylistic or programming errors while you type. No more surprise errors for missing parenthesis/brackets!

SUPER TIP: Follow SublimeLinter + JSHint installation instructions here. It’s not as simple to install as other packages.

3. HTML/CSS/JS Prettify

Pretty code is readable code. Readable code improves developer productivity.

Install the HTML/CSS/JS Prettify in Sublime Text to prettify your code with a simple key press (Shift+CMD+H by default).

SUPER TIP: By default, prettified CSS code moves each HTML selector to a new line. This looks horrible. Therefore, I suggest you update the following code in Sublime Text > Preferences > Package Settings > HTML/CSS/JS Prettify > Set Prettify Preferences:

1
2
3
4
'css': {
...
'selector_separator_newline': false
}

4. Sublime JavaScript Console

Tired of switching to the browser to run every bit of code? That’s because you’re lazy…

JK…just install Sublime JS Build Console by following Method 2. Now you just press CMD+B to run your code in Sublime Text.

SUPER TIP: Step 3 in the installation instructions above gave code for ‘Node.sublime-build’ that did not work for me. It didn’t point to Node.JS correctly. Here is the code I used to get it to work:

1
2
3
4
{
'cmd': ['/usr/local/bin/node', '$file'],
'selector': 'source.js'
}

5. Slate

Switching between application windows can be very inefficient…if your doing it wrong.

The right way is by using smart window management software like Slate.

Slate lets use you use keyboard shortcuts to move, switch, and show/hide windows. A major plus is the high level of customization offered.

Here is a sample of they keyboard shortcuts I use:

  • CMD+1: Split-screen Google Chrome & Sublime Text
  • CMD+2: Split-screen Google Chrome & Terminal
  • CMD+Shift+Up/Down/Left/Right: Move window to half of screen width/height
  • CMD+Option+Up/Down/Left/Right: Focus window in direction

This is my Slate configuration file. Filepath should be ‘~/.slate’

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
config defaultToCurrentScreen true
config nudgePercentOf screenSize
config resizePercentOf screenSize
# Shows app icons and background apps, spreads icons in the same place.
config windowHintsShowIcons true
config windowHintsIgnoreHiddenWindows false
config windowHintsSpread true
config layoutFocusOnActivate true
# Relaunch slate
bind esc:cmd relaunch
# Alias
alias lefthalf push left bar-resize:screenSizeX/2
alias righthalf push right bar-resize:screenSizeX/2
alias tophalf push up bar-resize:screenSizeY/2
alias bottomhalf push down bar-resize:screenSizeY/2
alias fullscreen push up bar-resize:screenSizeY
# Push Bindings
bind right:ctrl;cmd ${righthalf}
bind left:ctrl;cmd ${lefthalf}
bind up:ctrl;cmd chain ${tophalf} | ${fullscreen}
bind down:ctrl;cmd ${bottomhalf}
# Focus Bindings
bind right:cmd,alt focus right
bind left:cmd,alt focus left
bind up:cmd,alt focus up
bind down:cmd,alt focus down
#bind up:cmd focus behind
#bind down:cmd focus behind
# Layout's directive - layout name 'app name':OPTIONS operations
layout javascriptLayout 'Google Chrome':REPEAT ${lefthalf}
layout javascriptLayout 'Sublime Text':REPEAT ${righthalf}
layout mailLayout 'Mail':REPEAT ${fullscreen}
layout spotifyLayout 'Spotify':REPEAT ${fullscreen}
layout iTermLayout 'Google Chrome':REPEAT ${lefthalf}
layout iTermLayout 'iTerm':REPEAT ${righthalf}
# Layout Bindings
bind 1:cmd layout javascriptLayout
bind 2:cmd layout iTermLayout
bind 3:cmd layout mailLayout
bind 4:cmd layout spotifyLayout

6. Embrace Dark Mode!!!

I never “got” dark mode UNTIL I started spending long days staring at text.

Here are some dark mode tweaks I recommend:

  • Sublime Text
    • Install Soda Dark theme. Note: this goes further than a normal dark color scheme.
  • Mac OS X
    • Select dark menu bar: Preferences > General > Use dark menu bar and Dock and then…
    • Choose matching dark wallpaper - Reddit Link
  • Google Chrome