I recently spent time setting up my developer environment for Hack Reactor bootcamp. Using the right tools can massively increase your productivity!
- Sublime Text
- SublimeLinter + JSHint
- HTML/CSS/JS Prettify
- Sublime JS Build Console
- 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.
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.
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.
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:
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:
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’
I never “got” dark mode UNTIL I started spending long days staring at text.
Here are some dark mode tweaks I recommend: