In this section, let's install the VS Code together.

Note that we will only cover the installation in Windows and Linux, as we don't own a Mac. Don't worry, though, the procedure is quite similar on macOS.

Let us assume that you have administrator privileges on your machine, but if you don't, note that you can also download a portable version, as shown in the following steps:

1. Go to the official website of VS Code and download the installer: https://code.visualstudio.com:

2. Click on Download for Windows:

3. Once the installer has been downloaded, click on Run to start it:

4. Click on Next >.
5. Make sure to read the license agreement and get it reviewed by your favorite lawyer. Once you're fully aware of what it all means, click on the Next > button:

6. Change the target location if needed, then click on Next >:

7. Click on Next >.
8. On the next screen, make sure to check the Add to PATH (available after restart) option. This is for ease of use only. Then, click on Next > and Install in the next screen.
9. Once completed, click on Finish:

Congratulations, you're now officially among the cool kids with the code command on their machine.

On Windows, you can also easily install VS Code directly from the command line, for example using Chocolatey (https://chocolatey.org).

For Linux, if you're using Ubuntu, you can really easily install VS Code using the native package manager of Ubuntu called Ubuntu Software:

Let's perform the steps as follows:

1. Open Ubuntu Software.
2. Then, search for Visual Studio Code and install it:

3. Once you have found it, click on Install:

Installation should be pretty quick:

4. Once completed, you should be able to start it:

The following screenshot shows that you are all ready to go:

Let's see how to do the same on Linux.

Now, if you're anything like us, at this point you are probably feeling nauseous already. You might not like installing software using a GUI.

Indeed, things have changed, it seems. However, rejoice because if you prefer the command line, then you can still do it (phew!). Microsoft loves open source, so they have great documentation: https://code.visualstudio.com/docs/setup/linux.

For Debian/Ubuntu-based distributions, follow these steps:

1. Open the Terminal.
2. Download the latest .deb package from the official website: https://code.visualstudio.com/docs/?dv=linux64_deb.
3. Execute the following commands:
   • sudo dpkg -i <file>.deb
   • sudo apt-get install -f

In order to install extensions for VS Code, you have two options:

1. First, you can visit the Visual Studio Marketplace and install extensions from there through the Install links, which will open up in VS Code (that is, vscode:// links):

2. Once you're on an extension's page, click on Install:

And if all goes well, VS Code should be opened and it should ask whether you would like to install the extension:

This approach is nice because it allows you to easily browse the catalog of extensions. As an alternative, you can use Ctrl + Shift + X (Windows and Linux) in order to install extensions directly from within VS Code:

Here's a small list of nice-to-have extensions (in no particular order). You will not need to have any of these for the purposes of this book, but they'll probably help you, should you decide to install them:

• Latest TypeScript and JavaScript Grammar: https://marketplace.visualstudio.com/items?itemName=ms-vscode.typescript-javascript-grammar
• Auto close tag: https://marketplace.visualstudio.com/items?itemName=formulahendry.auto-close-tag
• Code Runner: https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner
• Debugger for Chrome: https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
• TSLint: https://marketplace.visualstudio.com/items?itemName=eg2.tslint
• vs-code icons: https://marketplace.visualstudio.com/items?itemName=robertohuertasm.vscode-icons
• GitLens: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens
• Prettier: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode
• npm: https://marketplace.visualstudio.com/items?itemName=eg2.vscode-npm-script
• npm intellisense: https://marketplace.visualstudio.com/items?itemName=christian-kohler.npm-intellisense
• TS hero: https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero
• Import Cost: https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost
• TS Auto Import: https://marketplace.visualstudio.com/items?itemName=steoates.autoimport
• TypeScript Importer: https://marketplace.visualstudio.com/items?itemName=pmneo.tsimporter
• Paste JSON as code: https://marketplace.visualstudio.com/items?itemName=quicktype.quicktype
• IntelliSense for CSS class names in HTML: https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
• TODO Highlight: https://marketplace.visualstudio.com/items?itemName=wayou.vscode-todo-highlight
• Open in Browser: https://marketplace.visualstudio.com/items?itemName=techer.open-in-browser
• Move TypeScript files and update relative imports: https://marketplace.visualstudio.com/items?itemName=stringham.move-ts
• EditorConfig for VS Code: https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig

You can find a ton more on the official Marketplace website: https://marketplace.visualstudio.com/vscode.