
Move TS - this is a great extension to help you refactor and re-organize some files and components in the project. Path Intellisense - VSCode has a very good auto import capability, but sometime you still need to import some files manually, and this extension helps a lot in these cases. With this setting, you can continue using tabs if it is your preference
"prettier.tabWidth": 2 (angular lint uses 2 spaces as default indentation). "prettier.singleQuote": true (this helps when using auto import extension or the VSCode auto import functionality). Prettier - JavaScript formatter - format your Javascript / Typescript / CSS - specially for Angular, I recommend adding the following config in you users setting for VsCode. highlighted with squiggly lines, jumping to it with F8.Īngular Language Service - provides a rich editing experience for Angular templates, very useful when working on Angular HTML template.Īuto Rename Tag - Auto rename paired HTML/XML tag.Īuto Close Tag - Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text.Īuto Import - Automatically finds, parses and provides code actions and code completion for all available imports (altough VSCode has auto import funcionatlity, this plugin is a great complement). Karma Problem Matcher - Capture errors from Karma tests running in Visual Studio Code, so test failures will show up in 'Problems' pane (Ctrl+Shift+M on Windows/Linux, ⇧⌘M on Mac) and the failing test can also be made known to VS Code, eg. SimonTest - Analyzes your Angular code and generates unit tests for you (can overwrite spec files generated automatically with Angular CLI). When using this extension, I also recommend the following setting: ": false by default VSCode opens file not opened from file explorer in 'preview' mode. Extensions Included Angular + Angular Manterial + Bootstrap + NgRX + RxJS Code SnippetsĪngular Snippets - Angular with TypeScript snippets.Īngular Material 2, Flex layout 1, Covalent 1 & Material icon snippets - Angular Material and Angular FlexBox component snippets.Īngular File Changer (Supporting Touch Bar and NgRx) - Navigate between Angular component's relative files or NgRx files using your Mac Touch Bar or keyboard.Īngular2-switcher - Easily navigate to typescript(.ts)|template(.html)|style(.scss/.sass/.less/.css) in angular projects. This extension pack packages some of the most popular (and some I find very useful) VS Code Angular extensions. Visual Studio Code Angular Extension Pack