VSCode Installation

Installation Steps for Both Windows and Mac

What is Visual Studio Code?

VS Code is the same editor used by stackblitz so it should look familiar. VS Code is the preferred editor for angular / ionic because both vs-code and typescript were developed by Microsoft. VS-code provides amazing intellisense, autocompletion of our code out the box, along with a host of other plugins that improve and customize the editor.‌

Installation

We will begin by setting up a coding environment on your local machine, we will be using VS Code for the remainder of the Ionic Course and the following group project. Download VS Code Here.

VS Code is supported by Windows, Mac OS, and Linux. Be sure to download the appropriate installer for your system.VS Code Installer Options, Choose your OS.‌

VS Code Up and Running

VSCODE

Success! VS Code Install Complete

Windows Users Change Default Shell

In this step we will change VS Code to use the proper shell, bash instead of the default Powershell Windows uses.

While in VS Code you can open a new terminal with the following keyboard shortcut. The ` is a tilde, the button to the left of the 1 key.

ctrl + `

Notice the $ in the above prompt. That is a bash shell you are good to go and can skip to the next step otherwise continue on.‌

Below Images show Shells now using bash, notice it is missing the $ in the prompt.Windows terminal and powershell‌

WIndows Power Shell Promp Examples

Setting VS Code's Default Shell

Now we want to use BASH as your default shell in VSCODE. To do this You can also select the dropdown in the terminal. If your terminal is not open press CTRL + ` to open it.

Selecting Default Shell

Now exit VS Code and restart the application and open a new terminal‌

You should see $ in the prompt and the terminal says bash the top center. Your prompt might display more information and look a little different that is okay. BASH Shell

VSCODE Terminal with bash shell

Success! If you have bash setup with VS Code

VS Code Extensions

Installing these extensions is optional, but may improve your experience while using VS Code

Bracket Pair Colorizer

This extension allows matching brackets to be identified with colors. The user can define which characters to match, and which colors to use.

Indent Rainbow

A simple extension to make indentation more readable.

Beautify

Helps with formatting and indentation.

• Press F1 and type "Beautify file" or "Beautify selection"

• Set a keyboard shortcut by going to Code > Preferences > Keyboard Shortcuts