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.
|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|
|Markdown Preview Github Styling||Monokai Pro||npm|
|npm Intellisense||Path Intellisense||Python|
Without having to explain every extension I’m going to pick a few of what I would consider essentials.
Saves time having to scroll through code looking for closing tags. Works just as you would expect.
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.
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
You can probably tell by now that I use lots of extensions that enhance code navigation, Guides merely creates faint vertical indentation lines.
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", ]
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
Adds icon prefixes to files in the explorer for just about any file extension. Great for quickly finding specific files.
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)
|Bartender 3||CloudApp||Firefox Developer Edition|
|MongoDB Compass||Postman||Reflector 3|
|Transmit||Typora||Visual Studio Code|
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.