Angular journey – Visual Studio configuration

In order to develop faster, better and easier, it’s a good practice to take a moment to setup your dev environment. Her I am talking about how I configured my Windows 10 environment for Angular.

Visual Studio Code

Here we are cheap, meaning we won’t go with a non free solution like Angular-IDE, but using Visual Studio Code, you can do great things too!

To install VSCode using chocolatey:

choco install vscode

Now we can add extensions to VSCode in order to make things easier:

• Angular Snippets (Version 12)
  • Helps creating block of HTML or Typescript
  • https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2
• Angular Language Service
  • This extension provides a rich editing experience for Angular templates, both inline and external templates
  • https://marketplace.visualstudio.com/items?itemName=Angular.ng-template
• TSLint
  • TSLint helps by showing directly in your code linters errors
  • https://marketplace.visualstudio.com/items?itemName=ms-vscode.vscode-typescript-tslint-plugin
• Auto Import
  • This helps importing librairies for you, automatically adding those imports at the proper place
  • https://marketplace.visualstudio.com/items?itemName=steoates.autoimport
• Angular Files
  • With this one, when you create a new file, it will scaffold the basic content based on file extension.
  • https://marketplace.visualstudio.com/items?itemName=alexiv.vscode-angular2-files
• Angular2-switcher
  • Allow you to switch from each files of a component using a shortcut (alt+ p | o | u | i)
  • https://marketplace.visualstudio.com/items?itemName=infinity1207.angular2-switcher
• Material Icon Theme
  • This helps by showing icons for files and folders, not mandatory though
  • https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme

To install those extensions quickly, let’s open VSCode then hit ctrl+shift+` to open a terminal

Type the following command to install our extensions (unfortunately you can’t put all in one line):

code --install-extension johnpapa.Angular2
code --install-extension Angular.ng-template 
code --install-extension eg2.tslint 
code --install-extension steoates.autoimport 
code --install-extension alexiv.vscode-angular2-files 
code --install-extension infinity1207.angular2-switcher 
code --install-extension PKief.material-icon-theme