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

VSCode Angular TypeScript & Html Snippets Visual Studio Code TypeScript and Html snippets and code examples for Angular 2,4,5 & 6. 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
Bracket Pair Colorizer 2 This extension allows matching brackets to be identified with colours. The user can define which characters to match, and which colours to use.
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.
Arrr A tool to refactor components from HTML templates.

NPM

Node npm This extension validates the installed modules against the dependencies defined in the package.json.
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

Debugger for Chrome Debug your JavaScript code in the Chrome browser, or any other target that supports the Chrome Debugger protocol.
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.

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.

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

Makes the corresponding js and source map files invisible:

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

obenjiro / awesome-angular-pack