Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Introducing the VS Code Text Editor

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Visual Studio Code Extensions

2:35 with Treasure Porth

Learn how to look for and install VS Code Extensions: extra features that can help you manage, write, and organize code!

Update regarding Bracket Pair Colorizer

Recently the functionality to colorize bracket pairs has been added to VS code natively and therefor the extension is now deprecated.

The native alternative isn't activated by default. To activate it you'll want to go to settings in VS code (cmd + , on Mac or Ctrl + , on Windows) and check the checkbox for Bracket Pair Colorization.

Alternatively you can add this line to your settings.json file: 

"editor.bracketPairColorization.enabled": true

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Most text editors, including Visual Studio Code, provide a feature for 0:00
    installing additional tools. 0:04
    VS Code calls these additional features extensions, but if you're using Atom, for 0:07
    example, they're called packages. 0:11
    Extensions let you add all sorts of useful functionality to VS Code. 0:14
    For example, jshint, which is a code-hinting tool that lets you know if 0:18
    you've properly formatted your code or introduced any syntax errors. 0:23
    Or you might want an extension that provides additional syntax code 0:28
    highlighting and auto-completing for Sass. 0:33
    You can browse and search Visual Studio Code extensions by clicking 0:38
    this squarish icon at the bottom of the list in the sidebar. 0:41
    Let's download a simple extension that colorizes different brackets. 0:46
    Really helpful for when you're writing JavaScript, 0:50
    as it makes it much easier to see where sets of curly braces begin and end. 0:52
    In the search bar, search for bracket pair colorizer. 0:57
    Click on it for more information. 1:04
    And when choosing an extension, 1:08
    it's good to note the number of downloads as well as the star rating. 1:09
    We can see that this has been installed over a million times, and 1:14
    has 112 ratings, for an average of around 4.5 stars. 1:18
    So there's a good chance that this will work as expected for us. 1:22
    I'll go back to VS Code and click install. 1:26
    Let's go back to a CSS file and 1:31
    you can see that all of the curly braces are a different color. 1:35
    If you're not seeing it, you may need to close and re-open VS Code. 1:39
    Lets look at a JavaScript file. 1:43
    Now, each set of parenthesis and curly braces are a different color. 1:47
    Say I had a function inside of an existing function. 1:53
    My new inner function's curly braces are a different color than the outer function. 2:03
    So it's extra clear when one function begins and another ends. 2:09
    You can find other popular and recommended extensions in this pane on the left. 2:14
    Or you can visit Visual Studio Code's Extension Marketplace to find 2:19
    other useful packages. 2:24
    See the teacher's notes for a link. 2:25
    Now that you're familiar with how to use a text editor, go create something awesome. 2:28
    Until next time, have fun and happy coding. 2:32

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up