Angular Toolbox

This extension pack contains a collection of extensions and configurations to ensure code quality and consistency.

It has configurations to follow Angular Style Guide and even the style lint configuration that the Angular Material team uses.

Linters

TS Lint

These rules are set to enforce a consistent code style for Angular development. This were copied from ng-seed/angular-tslint-rules

Make sure to add your selector to the directive-selector, component-selector and pipe-naming in the tslint.json file:

"directive-selector": [
  true,
  "attribute", [
  "ngx",
  "test"
  ],
  "camelCase"
],
"component-selector": [
  true,
  "element", [
    "ngx",
    "test"
    ],
  "kebab-case"
],

"pipe-naming": [
  true,
  "camelCase",
  "ngx"
],

Style Lint

These rules are the ones that the Angular Material team uses. This were copied from angular/material2.

To enable it:

• Install stylelint in your project:

  npm install --save-dev stylelint
  

• Copy the contents of resources/stylelint to the root of your project

• Also, you can set the following configuration for Visual Studio Code to enable autosave

  "tslint.autoFixOnSave": true,
  "tslint.enable": false
  

Beautify

This file has a set of rules to Beautify javascript, JSON, CSS, Sass, and HTML.

Angular

• Angular v4 TypeScript Snippets

• Angular 2+ Snippets - TypeScript, Html, ngRx, Angular Flex Layout & Testing

  Settings:

  editor.snippetSuggestions": "top"
  

• Angular Language Service

• SimonTest

It analyzes your code and creates the necessary stubs, configures the TestBed, and it even generates tests for you.

• Angular Files

TypeScript

• TypeScript Hero

• Document This

• Move TS

Extra

Install FiraCode: Monospaced font with programming ligatures

Settings:

"editor.fontLigatures": true
"editor.fontFamily": "Fira Code, Consolas, 'Courier New', monospace"

VS Code Settings

This file is an example of VS Code IDE Settings, that helps to enable and configure the extensions installed

Other Extensions

These extensions are not included with the toolbox but can help your development.

• Bracket Pair Colorizer

• Output Colorizer