Awesome Angular Pack

A collection of useful, stable and best rated angular/typescript extensions, which build a productive IDE. If you are also a dotnetcore developer check out the Awesome Dotnetcore Pack, which reuses packages that offer support for both environments.

Angular

• Angular Snippets This extension for Visual Studio Code adds snippets for Angular for TypeScript and HTML. All code snippets are based on and follow the Angular style guide.

• Angular Schematics Angular schematics (CLI commands) from files Explorer or Command Palette.

• Angular2 Switcher Easily navigate to typescript(.ts)|template(.html)|style(.scss/.sass/.less/.css) in angular2 project.

• Angular Support Very lightweight language support for angular definitions.

• Material Icon Theme The Material Icon Theme provides lots of icons based on Material Design for Visual Studio Code. It include seperate icon for example Angular-Services, Angular-Components, Angular-Directives,....

Typescript

• ESLint Integrates ESLint into VS Code. TSLint is deprecated. Migration

• Move TS README Supports moving typescript files and updating relative imports within the workspace.

• Paste JSON as Code

• Todo Tree Show TODO, FIXME, etc. comment tags in a tree view

• Comment TS "Comment TS" generates a template for JSDoc comments. It is adapted for TypeScript files. Typescript comes with a lot of language annotations, which should not be duplicated in the comments. Most likely this would lead to inconsistencies. If you like a todo in your generated comments:

"comment-ts.todoComments": true,

HTML

• IntelliSense for CSS class names in HTML CSS class name completion for the HTML class attribute based on the definitions found in your workspace.

• Auto Rename Tag Automatically rename paired HTML/XML tag, same as Visual Studio IDE does.

NPM

• Version Lens Shows package version information for npm, jspm, bower, dub and dotnet core in the Visual Studio Code editor.

Code formatting

• Prettier formatter for Visual Studio Code VS Code package to format your JavaScript / TypeScript / CSS using Prettier. Configure your preferences in a ".prettierrc" file:

{
   "printWidth": 150,
   "singleQuote": true,
   "arrowParens": "always"
}

• EditorConfig This plugin attempts to override user/workspace settings with settings found in .editorconfig files. No additional or vscode-specific files are required. As with any EditorConfig plugin, if root=true is not specified, EditorConfig will continue to look for an .editorconfig file outside of the project.

Dev Tools

• GitLens GitLens supercharges the Git capabilities built into Visual Studio Code. It helps you to visualize code authorship at a glance via Git blame annotations and code lens, seamlessly navigate and explore Git repositories, gain valuable insights via powerful comparison commands, and so much more. If you don't like the gitlens on the current line set:

"gitlens.currentLine.enabled": false

• Path Intellisense Visual Studio Code plugin that autocompletes filenames.

• Copy text Offers more copy options: Copies text without syntax highlighting, optionally adds metainfo like document name and date.

• Online help Offers context sensitive online help.

Recommended Tools (not included)

• Import cost Display import/require package size in the editor

• Better Comments With this extension, you will be able to categorise your annotations into: Alerts, Queries, TODOs, Highlights,... Commented out code can also be styled to make it clear the code shouldn't be there.

• Compodoc Generate your Angular project documentation in seconds.

• TypeDoc A documentation generator for TypeScript projects.

• Karma Test Explorer (for Angular, Jasmine, and Mocha) View and run your Karma or Angular tests in the VS Code Testing side bar

Settings Tipps

• If you do not like vs code telemetry set:

"telemetry.enableTelemetry": false

• All NPM scripts to start in the explorer view:

"npm.enableScriptExplorer": true

• Organize imports on file save:

"[typescript]": {
    "editor.codeActionsOnSave": {
        "source.organizeImports": true
    }
}

• If you do not need 'open editors' and like to use the space for your project files:

"explorer.openEditors.visible": 0

• Auto save on leaving the editor:

"files.autoSave": "onFocusChange"

• Enhanced minimap performance by disabling render characters in minimap:

"editor.minimap.renderCharacters": false

• Bracket colorization

    "editor.bracketPairColorization.enabled": true,
    "editor.guides.bracketPairs":"active"

• Makes the corresponding js and source map files invisible:

"files.exclude": {
    "**/*.js": {
        "when": "$(basename).ts"
    },
    "**/*.js.map": true
}