Introduction to VSCode

Visual Studio Code (VSCode) is a robust code editor used by developers to create and edit code. Similar to many code editors, it comes with some great features out of the box, such as support for most major coding languages (like PHP, JavaScript, CSS, and HTML), access to custom theming, custom hard tabbed versus spaced indenting, multiple tab code file views, and a full tree list view of all files within project folders. Just with those starter features, I could get a lot of code done in VSCode seamlessly.

VSCode Extensions

However, a lot of VSCode’s true power lies in the amazing extensions it provides to developers that allow us to customize even further. An extension is an additive feature that you can aggregate to the default out-of-the-box install of VSCode. These are extensions that make development workflows even faster and more advantageous to your specific development needs and styles. I use quite a few in my daily development workflows, and I certainly would say that I wouldn’t go back to developing with out them. Here’s some of my favorite VSCode extensions.

Color Highlight

Since the bulk of my development work lands in the front-end development and CSS styling realm, any extension that makes my CSS or SCSS workflows faster is always going to be a favorite of mine. Color Highlight is an awesome extension that highlights any hex codes or RGB values, so that you can preview the color in the browser. Now there’s no more need to waste time opening up design software in another window, loading up the file, finding the color picker, and inserting the hex value to view the actual color variable. Instead, you can now see it directly in your code editor without any extra effort. The extension also gives options for viewing the colors, such as background highlights, dots before and/or after color values, and squares before and/or after color values so that views are customizable for your preference.

Project Manager

This extension was one that was suggested to me by Designzillas’ senior developer, Jordan Pakrosnis. As developers in an agency environment, we worked with dozens of client projects at a time, and having to load up different client projects throughout the day took up a lot of our time. The time is takes to open up Mac’s Finder window, navigating deep through local project folders, and loading them up in the editor took way too much precious time of our day. The Project Manager extension allows you to save your project development environments so that the next time you need to open the project, all you have to do is choose the name of the project you’d like to open up from the left sidebar, and that environment magically reopens up for you. It even loads the last files you had open in tab view and remembers which files and folders where open or collapsed in your project’s file tree. This extension is an absolute must for multi-project development workflows.

Remote SSH

The Remote SSH extension allows you to save SSH connection login credentials directly in your code editor, and access them from a quick access menu in the editor’s toolbar. This means that after you set up your initial connections, every repeated time you have to connect to a live server via SSH, all you have to do is click on a single button – the name of the SSH connection you set up. Running commands in the server is also done in the built-in terminal window VSCode features, so there’s no need to have multiple applications open to handle your code and the server’s files. This saves me so much time when pushing and pulling remote repositories up to live servers via SSH. It’s such a time saver, and I highly recommend it!

Trailing Spaces

I pride myself in writing clean, dry, and reusable code. I also really focus on writing the least amount of code to make my projects perform better, faster, and have smaller file sizes. One of the easiest ways of doing that is to remove those extra trailing spaces at the end of your lines of code. The Trailing Spaces extension helps you do just that. You may not see extra spaces (or space versus tab issues in your code) if you don’t have ‘Render Whitespace’ turned on in your settings, but with this extension, it highlights them in bright red. You can’t miss them. It’s a fool-proof visual add-on to ensure those trailing spaces are gone in your code!

Beautify

Beautify is an extension that is already available in most modern code editors like Sublime Text, Atom, and Brackets, but I just couldn’t pass up the opportunity to mention its time-saving prowess. Are you copying code a fellow developer suggested you try from Slack or Stack Overflow, and when pasted into your editor, the formatting is just, off? Run the Beautify extension to auto tab and space any external copy-and-pasted code blocks you add into your files. Based on the extension settings you choose, it may even auto-format the code block to match your current file’s settings (such as choosing to auto-format based on the file’s four-tab hard space indentations versus four single space indents). You won’t have to worry about manually matching source and external code block formatting anymore with this extension.

Custom Themes

As a designer, I can’t talk about extensions and not talk about the beauty of custom themes. Themes are user interface skins that can be applied to your code editor and program interface. Themes are installed from the extensions view, and there’s tons of websites that help you preview themes before you install them, such as vscodethemes.com. Personally, I tend to favor dark themes so that the strain of an hours-long binge of coding is much less strenuous on my eyes. My two favorite custom editor themes are City Lights and Dracula.

Conclusion + Bonus Extensions

If you are interested in more of what VSCode has to offer, check out VSCode’s full directory of extensions and find some more awesome extensions for your development workflows.