Danny Foster

Environment

April 10, 2018

I admittedly spend way too much time tweaking with Visual Studio Code extensions and theming. Not to mention Firefox extensions, macOS adjustments and productivity apps, iPhone apps, and aesthetic changes . Undoubtly a combination of all the tools I readily use has saved me both time and headaches. I guess the better question is if the time saved with the tools outweighs the time spent tinkering. Nonetheless, here’s a list of the macOS modifications and programs I currently use for 2018.

Visual Studio Code


Environment

Extensions

Auto Close Tag Auto Rename Tag Bracket Pair Colorizer
Code Runner Colorize Debugger for Chrome
Document This React/Redux/GraphQL/React-Native snippets ESLint
Git Blame Guides HTML CSS Support
IntelliSense for CSS class names in HTML JavaScript (ES6) code snippets Live Server
Markdown Preview Github Styling Monokai Pro npm
npm Intellisense Path Intellisense Python
Quokka.js Sass Settings Sync
vscode-icons

Without having to explain every extension I’m going to pick a few of what I would consider essentials.

Auto Rename Tag

Saves time having to scroll through code looking for closing tags. Works just as you would expect.

Bracket Pair Colorizer

On the same note of Auto Rename Tag, I use this extension in a similar way. The picuture above demonstrates the difference. No longer do you have to click on an opening parentheses or bracket to see the closing one. Colored bracket pairs adds a much needed contrast between lines of codes and creates definitive visual cues as to where you are inside your code.

Code Runner

While repl.it is excellent for saving past code playgrounds or algorithms, there’s times where you just want to quickly type code and see the output. After you configure the paths of your code executors in your VS Code User Settings you can run the code with ⌃ ⌥ N

ESLint

ESLint has been a major help in identify past bad coding practices and especially creating a consistent guideline on style. Recommended to anyone that writes JavaScript or TypeScript

Guides

You can probably tell by now that I use lots of extensions that enhance code navigation, Guides merely creates faint vertical indentation lines.

HTML CSS Support

img

Insane help for any front end work that you’re doing. For one, this extension will add completion for any classes/ID’s inside CSS or SCSS files in your workspace with the default hotkey of Control + Space. Secondly you can add external stylesheets inside your VS Code User Settings with the following adjustment,

"css.remoteStyleSheets": [
        "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css",
]

Did I forget to mention that this is also supported in JavaScript, Pug, Handlebars, and just about any templating engine files?

JavaScript (ES6) code snippets

I barely scratched the surface on the depth of the snippets but as I progress further as a developer I’ll fully recognize the power of this extension. For those that are a bit more advanced this contains many tedious code snippets that are triggered by logical keywords ; such as clg for

console.log(object)

vscode-icons

Adds icon prefixes to files in the explorer for just about any file extension. Great for quickly finding specific files.

Settings / Fonts

I owe most of my User Settings to Wes Bos who along with creating some of the most helpful online courses I’ve taken has made his dotfiles availible on GitHub. My font of choice is Operator Mono with a font weight of 400 and my theme is Monokai Pro (Filter Spectrum)

Programs


Alfred 3 Backblaze Balsamiq
Bartender 3 CloudApp Firefox Developer Edition
Keybase LastPass Magnet
MongoDB Compass Postman Reflector 3
Synergy TextExpander Things
Transmit Typora Visual Studio Code

Alfred 3

Alfred replaces the Apple Spotlight search with a fully customizable and programmable equvilent (Apple kind of stole Alfred) that has a large library of custom workflows on Packal. Listed below are my personal Workflows that I’ve imported. My most used one as of now is devdocs. The devdocs Workflow allows instant documentation search for most languages and frameworks which is a lifesaver for quick reference. Alfred 3 was the only application listed I wanted to elaborate on further, the websites for the rest do a great job on explaining them.

https://d3vv6lp55qjaqc.cloudfront.net/items/0O2i1R0U0B2Q0R2T0a3w/Image%202018-02-20%20at%202.17.03%20PM.png?X-CloudApp-Visitor-Id=2883933&v=5169d464


Danny Foster

Hi, I'm Danny Foster. I'm a front end developer living in Chicago with a love for JavaScript.
Contact | GitHub | Twitter