Visual Studio Code

This guide will help you download, install, configure & customise VSCode.

Download and Install

• Go to https://code.visualstudio.com/download (opens in a new tab) to download VSCode.
• Follow the instructions to install and set it up.

Enable VS Code from the Terminal

To make it easier to open VS Code from your terminal, run:

code .

If this doesn't work, you can enable the code command by opening VS Code, opening the Command Pallete by pressing Cmd+Shift+P, then typing:

WSL

You should see an option that says "WSL: Connect..." and clicking this setting will allow you to launch VSCode with the code . command in the Ubuntu terminal.

VSCode Extensions

Once you have downloaded and installed VSCode, please install the following extensions.

• ESLint (opens in a new tab)
• Live Server (opens in a new tab)
• Live Share (opens in a new tab)
• Prettier - Code formatter (opens in a new tab)
• Tailwind CSS Intellisense (opens in a new tab)
• WSL (opens in a new tab) (Windows users only!)
• Error Lens (opens in a new tab)
• Better Comments (opens in a new tab)
• Indent Rainbow (opens in a new tab)

For help with how to install extensions check out the docs https://code.visualstudio.com/docs/editor/extension-marketplace (opens in a new tab)

Configuring VSCode & Extensions

General settings

These are optional changes however they may make your life a little more comfortable so do consider them.

Press either CMD + , on mac or Ctrl + , on Windows and Linux to open settings.

Once open, go to the search bar at the top to find and edit settings.

• Search for ‘wrap’ and change the setting ’Editor: Word Wrap’ to ’On’ This will prevent you from having to scroll the page to see all of your code.
• Search for ‘tree indent’ and increase the value for the ’Workbench: Tree Indent’ setting to create bigger indents on the file tree. We recommend setting it to 16.
• Search for ‘compact folder’ and uncheck the box for the ’Explorer: Compact Folders’ setting. This enables a more legible view of empty folders inside empty folders.

Configuring VSCode for the Prettier extension

Prettier is already well configured to automatically format your code, however we need to update a couple of settings to make Prettier work with ease. We will be editing settings again so press either CMD + , on mac or Ctrl + , on Windows & Linux to open settings. Once open, go to the search bar at the top to find and edit settings.

• Search ‘Default Formatter’ and change it to ‘Prettier - Code formatter’.
• Search ‘Format On Save’ and ensure ’Editor: Format on Save’ is ticked.

Once you have done this, your code will be automatically formatted for you when you manually save your document (this won’t kick in with autosave but we STRONGLY recommend that you do not enable autosave).

Customising VSCode with Themes & Icons

Now who doesn’t like customising something with the theme of their choice? VSCode has a very large number of themes and many opinions on which theme is best, the truth is that the best theme is the one that you like the most.

That said, here are some of our favourites

• Dark+ (this is what most of the Tech Ed team use, it's one of the default themes, nothing to install)
• Shades of Purple (opens in a new tab)
• Synthwave (opens in a new tab)
• Dracula Official (opens in a new tab)

As for icons, well there aren’t a huge number of icon packs but the two most popular are vscode-icons (opens in a new tab) and Material Icon Theme (opens in a new tab)

But by all means, checkout the extension marketplace (opens in a new tab) and pick your favourite.