# Setup

Dependency checklist:

1. node (version 8 later)
2. Git
3. Angular CLI
4. Visual Studio Code
5. Visual Studio Code Extensions

The main dependency for being able to make an Angular application is node version 8+. The latest stable version of node is best to get if you do not have it already installed.

## 1. Install node

You can check your version of node by running the following command in the terminal.

```
node -v
```

If you do not have node installed or you are using a version lower than v4 then I you can get the latest stable version from [www.nodejs.org](https://github.com/duncanhunter/Enterprise-Angular-Applications-With-NgRx-and-Nx-Book/tree/d63a57a9f1ea36a7623cdf0746dd90b1406edaa2/www.nodejs.org).

## 2. Install Git

You can check your version of node by running the following command in the terminal.

```
git --version
```

If you would like to use source control and check out completed work then it is recommended to have git installed on your machine. You can download git from[ https://git-scm.com/downloads ](https://git-scm.com/downloads)

## 3. Install Angular CLI 

We need to have the Angular CLI installed globally. Run the following command.

```
npm install -g @angular/cli
```

## **4. Get Visual Studio Code**  

{% embed url="<https://code.visualstudio.com/>" %}

![](https://3531511677-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLqc06ABPywqowC_y8E%2F-LLrHC-yahe9iTbnAWc0%2F-LLrIiPdrPzf12-OXv_S%2Fimage.png?alt=media\&token=6f2c78a6-a6d0-46de-8145-8dd74d4a2996)

## 5. Get **Visual Studio Code** Extensions

![The VSCode extension button](https://3531511677-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLqc06ABPywqowC_y8E%2F-LLrHC-yahe9iTbnAWc0%2F-LLrICW0I-look5AjZXm%2Fimage.png?alt=media\&token=baa3532a-575b-417f-b7c7-999eaafa48d9)

* Angular Essentials: Everything you need for angular in an extension pack
* Rainbow Brackets: Handy for many brackets when inlining observables
* TSLint: Great linting in VS Code
* Wallaby.js for unit tests line

{% embed url="<https://marketplace.visualstudio.com/items?itemName=johnpapa.angular-essentials>" %}
Angular essentials extension
{% endembed %}

{% embed url="<https://marketplace.visualstudio.com/items?itemName=2gua.rainbow-brackets>" %}
Rainbow brackets extension
{% endembed %}

{% embed url="<https://marketplace.visualstudio.com/items?itemName=eg2.tslint>" %}
TSLint extention
{% endembed %}

![WallabyJS extension](https://3531511677-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLqc06ABPywqowC_y8E%2F-LLrHC-yahe9iTbnAWc0%2F-LLrHYcPrzUpHxNkCS8-%2Fimage.png?alt=media\&token=1f185b09-0b54-4439-9f21-99be39d7e971)

## 6. Optionally turn on **Visual Studio Code  auto save**

![VSCode auto save feature](https://3531511677-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLqc06ABPywqowC_y8E%2F-LLrHC-yahe9iTbnAWc0%2F-LLrIPOHQlG1KbI5nqbm%2Fimage.png?alt=media\&token=1baf879b-1822-43be-9429-4684e860b3c6)

## 7. Update VS Code user settings to use single quotes and warnings for lint rules

* Open the command palette by pressing Ctrl + Shift + P and search for 'Preferences: Open User Settings'.
* Click the ellipsis and select 'Open settings.json' as shown in the following image.

![Open User Settings (settings.json)](https://3531511677-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LLqc06ABPywqowC_y8E%2F-LMWQI_NhsEH78Rx5bMP%2F-LMWTaaWFacrND3kbFqt%2Fimage.png?alt=media\&token=7867da16-5300-49e7-a8b4-6749f2a46a76)

* Add to your user settings the below options.
* Note that many people like to hide the Open Editors explorer on the top right as it is just a list of open tabs which you can see on the tabs themselves.

```javascript
{
    "tslint.alwaysShowRuleFailuresAsWarnings": true,
    "explorer.openEditors.visible": 0,
    "prettier.singleQuote": true
}
```