Centigrade Angular Essentials

This extension not only adds Visual Studio Code extensions that are essential for all Centigrade colleagues developing Angular applications. It also provides a set of default configurations in order to auto-format your TypeScript, HTML, and (S)CSS code while adhering to common standards like the official Angular Styleguide.

Essential VS Code Extensions

The following essential VS code extensions will be installed. Each of this extensions plays a particular role in our development process.

• Angular Language Service: Intellisense for Angular templates
• Angular Schematics: Angular CLI Schematics integrated into files explorer
• Debugger for Chrome: Debugging Angular applications with Chrome
• EditorConfig: Set default format configurations for any editor
• json2ts: Paste json into TypeScript classes
• Path Intellisense: Intellisense for TypeScript imports
• Prettier: Auto-format TypeScript
• Sass: Improved syntax highlighting for (S)CSS and SASS
• SCSS Intellisense: Intellisense for (S)CSS
• TSLint: Lint TypeScript
• Version Lens: Inspect and update versions in package.json

Default Configurations Snippets

This extension comes with a set of default configurations for the essential extensions listed above. They can be added via the explorer's context menu to your workspace.

Add to project root:

• EditorConfig (.editorconfig)
• Prettier (.prettierrc, .prettierignore)
• Karma (karma.conf.js)

Add to sub-folder .vscode/*:

• VS Code Settings (settings.json)

Install the following dev dependencies:

• npm install --save-dev karma-spec-reporter

Recommended VS Code Extensions

You can install some of the following Visual Studio Code extensions that we really like and recommend. These are not essential but could be helpful:

• Angular Console: Comfortable UI for the Angular CLI
• Angular Snippets: Generic Angular snippets for typical coding patterns
• Rainbow Brackets: Highlight corresponding brackets in the same color
• Docker: Docker syntax highlighting
• GitLab-CI templates generator: Templates and syntax highlighting for gitlab configuration files
• Goto last edit location: Go to the last edit location (even across files)
• Mardown Paste: Handy tool to quickly insert screencaptures into markdown
• Markdown TOC: Table of content for Markdown
• Material Icon Theme: Nice icon set for VS Code (doesn't force VS code restart, in contrast to vs-code-icons)
• Material Theme: Nice theme with a lot configurations
• ngrx for Angular 2 Snippets: NgRx snippets to reduce boiler plate writing
• Night Owl Theme: Nice dark theme that works well with Dank Mono font
• Polacode: Handy tool to create code snippet shots for presentation purposes
• Project Manager: Switch between projects in VS Code
• Swagger Viewer: Swagger Backeend API documentation preview
• TODO Highlight: Highlight TODO and FIXME comments
• VS Live Share: Live share feature for collaborative code editing
• Peacock: Change the coloring of VS code depending of your workspace.

FAQ

Update Karma dependencies

Q: Using the given karma.conf.js does report an error.

A: You have to update the current Karma dependencies by running npm install --save-dev karma-spec-reporter and npm uninstall --save-dev karma-junit-reporter