Skip to content
| Marketplace
Sign in
Visual Studio Code>Extension Packs>Angular Toolbox - Extension PackNew to Visual Studio Code? Get it now.
Angular Toolbox - Extension Pack

Angular Toolbox - Extension Pack

Alfredo Perez

|
2,726 installs
| (1) | Free
Toolbox full of extensions to develop awesome Angular applications.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

Angular Toolbox

Marketplace Installs GitHub issues GitHub pull requests License

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

  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft