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

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