Text Editor: Microsoft Visual Studio Code

Visual Studio Code is the Integrated Development Environment (IDE) we use. It's software that helps you write the code. IDEs can do a lot of amazing things, such as:

  • highlight the code so it's easier to identify expressions
  • suggest completions to what you type
  • help you navigate easily through the files in your project
  • and a lot more...

After downloading we will configure it with extra tools called extensions that will make your coding life easier.

You'll often hear Visual Studio Code referred as VS Code.

This section will help guide you through the following steps:

Download and install Visual Studio Code

Navigate to Visual Studio Code download site and click the download button for your Operating System. This will start downloading the VS Code installer. Run through the installation process.

When the installation is complete, launch Visual Studio Code if it didn't open automatically. You will see a welcome screen that looks something like this.

Configuring Visual Studio Code

Next, to get the most out of Visual Studio Code, we need to install extensions.

If you have ever downloaded and installed a custom font to use in your word processing program, installing extensions is similar. They are features that can be individually installed to enhance your experience.

We will install required extension and list optional extensions you can install at the end of the page to add a little pizzazz to your coding experience.

Required Extensions

Install the following required extensions:

  • HTMLHint- Provides HTML hints and helps identify potential mistakes
  • Guides- Adds indention guide lines making it easier for you to match tags in HTML, class style definitions in CSS, and nested JavaScript code
  • Live Server- Opens a tab in your default browser to view static webpages and automatically refreshes the webpage whenever you save changes in VS Code
  • Bracket Pair Colorizer 2- Changes colors of opening and closing pairs of brackets to make it easier to identify nested JavaScript code

To start installing extensions

  1. Select the Extensions icon on the left toolbar.
  2. Type the name of the extension in the input, in this case, type "HTMLHint".
  3. Find "HTMLHint" by Mike Kaufman and press the Install button to the install the extension. You can press the Install button directly in the search results or in the extension's information page.

Visual Studio Code Extensions Menu

Repeat the 3 steps to install the other required extensions.

Visual Studio Code may prompt you to reload after installing an extension. Make sure you press the Reload button when prompted or restart Visual Studio Code after installing all the required extensions if you didn't restart for each extension.

Optional - Review tips for using Visual Studio Code

Uninstall or Disable an Extension

To uninstall or disable an extension, open the Extensions menu like we did above. VS Code displays your enabled extensions. Select the extension you want to uninstall or disable to view the extensions information page. Press the Uninstall or Disable button.

Splitting the Screen

Right click on the tab you want to view in split mode and select an option to Split Up, Split Down, Split Left, or Split Right. Once you split your view, you can drag tabs over to the other columns or rows.

Optional - Customize Visual Studio Code

There are optional plugins and themes you can install to help customize your IDE and make it your own. Open the Extensions menu, search for the extension name, and click install.

Additional Plugins

  • Material Icon Theme- Adds icons to files in the Explorer view to make it easier to find files
  • Code Spell Checker- Calls attention to misspellings in your code. This is particularly helpful to ensure variable names are spelled correctly.

Themes

Make it look pretty with themes. You will install themes the same way you install extensions.

Visual Studio Code comes with a couple of themes built in, but you can find colors that speak to your personality by searching for themes in the Extension input. Type "@category:themes" to limit the extension search results to only show theme extensions.

Click on the theme in the search results to view an example of the theme colors.

Some popular themes include

Select the color theme you want to use in the Color Theme selector. To open the Color Theme selector, follow the instructions for your OS:

For Windows & Linux users, navigate to File Preferences Color Theme

For Mac users, navigate to Code Preferences Color Theme

In the Color Theme selector, select the theme you like out of the list.

Keyboard Shortcuts

Open VS Code in a folder from command line: code .

Too many keyboard shortcuts?

You can type what you're looking for in the Command Palette. Open the Command Palette by selecting View Command Palette... and type the action you want to do.

To open the Command Palette quickly, use the keyboard shortcut ctrl + shift + p.

Helpful Keyboard Shortcuts

Command Mac Key Combination Windows Key Combination
Open Command Palette ctrl + shift + p ctrl + shift + p
Select all cmd + a ctrl + a
Cut cmd + x ctrl + x
Copy cmd + c ctrl + c
Paste cmd + v ctrl + v
Undo cmd + z ctrl + z
Save cmd + s ctrl + s
Toggle comment cmd + f ctrl + f
Go to file cmd + p ctrl + p
Open terminal pane ctrl + ` ctrl + `
Create new terminal ctrl + shift + ` ctrl + shift + `
Auto-format file shift + option + f shift + alt + f
Auto-format selection cmd+ k cmd + f ctrl+ k ctrl + f
Indent cmd + ] ctrl + ]
Outdent line cmd + [ ctrl + [

Need more info? Refer to VS Code's Documentation.

results matching ""

    No results matching ""