ialexivy/angular-extension-pack

Angular Extension Pack for Visual Studio Code

Angular Extension Pack

This extension pack pakcages some of the most popular (and some of my favorite) Angular extensions. If you know any extension that is good for Angular development, just let me know by creating an issue.

Extensions Included

Angular Code Snippets

• Angular v4 TypeScript Snippets
• Angular 2+ Snippets - TypeScript, Html, ngRx, Angular Flex Layout & Testing
  • Settings: "editor.snippetSuggestions": "top"

TypeScript Productivity

• Path Intellisense
• TypeScript Importer
• TypeScript Toolbox
  • Settings: "genGetSet.spacedImportLine": true
• Latest TypeScript and Javascript Grammar
• JavaScript (ES6) code snippets
• refactorix
• Beautify
• JSON to TS
• Document This

Template Productivity

• Angular Language Service
• Auto Rename Tag
• Auto Close Tag
• CSS Peek

Code Analysis

• TSLint
  • Settings: "tslint.autoFixOnSave": true ( See also )

Code Navigation

• angular2-switcher

Collaboration

• EditorConfig for VS Code

Workbench

• VSCode simpler Icons with Angular
• Output Colorizer
• Angular-io-Code

Some other extensions you may need (Optional) (You need to install the following extensions manually.)

• AngularDoc for Visual Studio Code
  • Sometimes it's buggy. Many of our projects are unable to produce documentation.
• Git Lens
  • It's too informative for me. I turn it off all the time.
• Bracket Pair Colorizer
  • I don't need this extension usually, but maybe someone need it.
• angular2-inline
  • I don't use inline template at all. If you need it, you can install this extension. I don't like mix HTML with TypeScript anyway.

Other manual setup (Optional)

• Recommended Settings for Editor Fonts
  • English
    • "editor.fontLigatures": true
    • "editor.fontFamily": "Fira Code, Consolas, 'Courier New', monospace"
    • Install FiraCode: Monospaced font with programming ligatures
  • 繁體中文
    • "editor.fontLigatures": true
    • "editor.fontFamily": "Fira Code, 'Noto Sans CJK TC Medium', Consolas, 'Courier New', monospace"
    • Install Google Noto Fonts - Noto Sans CJK TC
    • Install FiraCode: Monospaced font with programming ligatures
  • 简体中文
    • "editor.fontLigatures": true
    • "editor.fontFamily": "Fira Code, 'Noto Sans CJK SC Medium', Consolas, 'Courier New', monospace"
    • Install Google Noto Fonts - Noto Sans CJK SC
    • Install FiraCode: Monospaced font with programming ligatures
• Recommended Settings
  • "editor.minimap.renderCharacters": false
    • Enhanced minimap performance by disabling render characters in minimap.
• Recommended Settings for Visual Studio Code v1.13 and later
  • "emmet.useNewEmmet": true
    • Use the new Emmet features in Visual Studio Code v1.13.

Enjoy!