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.
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"
],
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
This file has a set of rules to Beautify javascript, JSON, CSS, Sass, and HTML.
-
Angular 2+ Snippets - TypeScript, Html, ngRx, Angular Flex Layout & Testing
Settings:
editor.snippetSuggestions": "top"
It analyzes your code and creates the necessary stubs, configures the TestBed, and it even generates tests for you.
Install FiraCode: Monospaced font with programming ligatures
Settings:
"editor.fontLigatures": true
"editor.fontFamily": "Fira Code, Consolas, 'Courier New', monospace"
This file is an example of VS Code IDE Settings, that helps to enable and configure the extensions installed
These extensions are not included with the toolbox but can help your development.