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
• Figma for VS Code: Figma for VS Code lets you navigate and inspect design files, collaborate with designers, track changes, and speed up implementation - all without leaving vscode.
• EditorConfig: Set default format configurations for any editor
• Path Intellisense: Intellisense for TypeScript imports
• Prettier: Auto-format TypeScript
• SCSS Intellisense: Intellisense for (S)CSS
• ESLint: Lint TypeScript
• Version Lens: Inspect and update versions in package.json
• VS Live Share: Live share feature for collaborative code editing
• Code Spell Checker: Spelling checker for source code

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)
• TSConfig (tsconfig.json)

Add to sub-folder .vscode/*:

• VS Code Settings (settings.json, extensions.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
• Code Spell Checker German: German Spell Checker extension
• Docker: Docker syntax highlighting
• Draw.io Integration: Unofficial extension integrates Draw.io into VS Code.
• GitLab-CI templates generator: Templates and syntax highlighting for gitlab configuration files
• GitLens: Supercharge Git within VS Code
• Mardown Paste: Handy tool to quickly insert screencaptures into 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
• Peacock: Change the coloring of VS code depending of your workspace.
• Polacode: Handy tool to create code snippet shots for presentation purposes
• Project Manager: Switch between projects in VS Code
• TODO Highlight: Highlight TODO and FIXME comments

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