back to all posts

Visual Studio Code Quickstart

by jonathan barrios / September 16th, 2019

What is Visual Studio Code?

In this short tutorial, I will show you how to set up a local development environment using my favorite VS Code extensions for HTML, CSS, and, JavaScript. Let's begin!


Survey Says


Stack Overflow’s 2019 Developer Survey shows us that VS Code is, by far, the most popular code editor in 2019.

stack overflow 2019 survey

Download


First, download and install Visual Studio Code from code.visualstudio.com. Next, let's review the user interface. In the top-left we have the main navigation icons which are, from top to bottom:

  • Explorer ⇧ ⌘ E or Shift + Command + E
  • Search ⇧ ⌘ F or Shift + Command + F
  • Source Control ⌃ ⇧ G or Control + Shift + G
  • Debug ⇧ ⌘ D or Shift + Command + D
  • Extensions ⇧ ⌘ X or Shift + Command + X

If you are on Windows, hover your mouse over each icon to display the shortcut.


Extensions

I love Visual Studio Code and the extensions available within the development environment are brilliant. First, I recommend installing a theme from the extensions tab. To install extensions, navigate to the Extensions tab using (⇧ ⌘ X) and type the name of the theme you would like to install in the search bar. Next, select and install the desired extension. Finally, navigate to the command palette to active the theme using the following shortcut:

⇧ ⌘ P or Shift + Command + P

Once installed, navigate to the command palette and type the name of the theme in the search bar. Select the newly installed theme to activate it. Your UI should look cool, if not keep searching for a theme that you like.

Top Three Themes

I like to use a lot of themes, but here are my top three choices for 2019. I recommend installing them all and activating each one as needed. If you spend a lot of time in your code editor might as well make it feel good, right? My go-to theme is the VS Code Icons theme, but I also like Night Owl and Cobalt2. Night Owl is by Sarah Drasner who is very popular in the developer community and posts excellent stuff on Twitter regularly. Wes Bos is also super famous in the community and continually posts great tutorials like JavaScript 30.

  • VS Code Icons Theme by VS Code Icons Team
  • Night Owl by Sara Drasner @sarah_edo
  • Cobalt2 by Wes Bos @wesbos

Favorite Extensions

Here are the extensions we will cover in this tutorial:

  • Prettier by Felix Becker
  • Live Server by Ritwik Dey
  • Bracket Pair Colorizer by CoenraadS
  • Auto Rename Tag by Jun Han
  • Live Sass Compiler by Ritwik Dey
  • REST Client by Huachao Mao
  • ES6 Code Snippets by Charalamos Karypidis


Live Server


The first extension is Liver Server by Ritwik Dey, which creates a live server to view your code changes on each save. I find Live Server speeds up my web development workflow and has been very reliable so far. I can open the file I'm working on with a live server in a browser with one click, it's cool.

Prettier


Prettier by Felix Becker is an amazing extension that allows you to code with fewer distractions and virtually no formatting mistakes! I also feel like I learn quite a bit about formatting best practices by watching the changes on each save. Try it out and see what I mean. Once you install Prettier, head to the command palette (Shift + Command + P). Type Settings and select Open Settings (JSON) then verify or modify this setting:

"editor.formatOnSave": true,

When this setting is set to true, you will format your code each time you save. ✨

Bracket Pair Colorizer

This extension is handy for beginners and developers working on dense code. I like it because it helps me keep a brisk development pace. Primarily, this extension allows you to identify matching brackets with color, and it looks cool.

Auto Rename Tag

This extension allows you to rename paired HTML.XML tags on the fly. It saves time and frankly, I think this should be standard on all code editors since we all use IntelliSense extensions already; why not.

Live Sass Compiler

This excellent extension always seems to work, and I can integrate it into Visual Studio Code for seamless development workflows. To change your settings, go to the command palette(⇧ ⌘ P):

Then type, Settings, select Open Settings (JSON) then verify, add or modify this setting:

  "liveSassCompile.settings.formats": [
    {
      "format": "compressed",
      "extensionName": ".min.css",
      "savePath": "/scss/css"
    }
  ],
  "liveSassCompile.settings.generateMap": false,

The above settings are straight forward: format means that the output will be compressed and the extension will be min.css which will be saved in the /scss/css/ folder. If your project folder is different, you can make that change here. The liveSassCompile.settings.generateMap is set to false because I don't need a map, but if you do, set this setting to true.

REST Client

The REST Client by Huachao Mao is also one of my favorite extensions because it's very intuitive and easy to use within Visual Studio Code UI. This extension works and has excellent documentation that should accommodate many development workflows you may encounter.

ES6 Code Snippets

This extention has super charged my JavaScript development with the use of super power triggers like fre + TAB to create forEach loops in ES6 syntax like: array.forEach(currentItem => { }). How aabout a console log like this: clg + TAB returns console.log(object);.

IMG

That's it for this short tutorial, and I hope you liked it as much as I enjoyed making it. Thanks for reading and happy coding! 🙌


Treehouse Techdegree

If you're interested in learning more about web development, check out one of the Treehouse Memberships or Techdegrees for free with a 7-day trial:

back to all posts