Visual Studio Code Editor has lots of extensions which can be used for faster angular app development and reduce the errors.
Best Visual Studio Code Extensions makes application development faster.
Here is the list of 10 Best VSCode Extensions for angular development.
This VSCode extension adds different Angular 6 snippets for TypeScript (Snippets like Component, Module, Service) and Template Snippets.
It is very useful for generating Typescript Snippets like Components, Modules, Services, Directives, Pipes, Router Paths, Events and much more.
also provides useful Template Snippets like [ngClass], [(ngModal)], *ngFor, *ngSwitch, *ngIf and much more.
So instead of writing each code manually, you can use this extension to generate a code snippet
This extension provides a rich editing experience for Angular templates, both inline and external templates including:
- Completions lists
- AOT Diagnostic messages
- Quick info
- Go to definition
This extension uses @angular/[email protected]and [email protected].
During the code development probably the difficult task is to remember quotes, brackets, semicolons, and syntax.
This extension helps to reduce the development time errors and formatting the code. By showing the error messages at a specific line, in addition to this, it also provides the solution to remove that error.
It is a very boring task to remember the path of any file. Path Intellisense helps you in finding the path of any file.
You can use it in the TypeScript file for templateUrl, styleUrl etc, also in the HTML file for the src path of image.
This VSCode extension adds Bootstrap and Font awesome snippets. Due to this, you can make your Bootstrap UI Development faster. You just need to write the command and it will generate whole code with specific bootstrap classes.
Different components snippets generated using this extention are : Alert, Badge, Breadcrumb, Button, Card, Carousel, Collapse, Dropdown, Form Components, Jumbotron, List, Nav, Pagination and much more.
In addition to this, You can also generate Font Awesome Icon Snipptet using this extension.
In Angular One Component have related .html, .css and .ts file. During the development, you need move between this files many times.
This extension can be really very helpful for this purpose. You just need to press 2 keys, like
alt+o(Windows) shift+alt+o(macOS)
if on ts: go to html
if on css: go to html
if on html: go to previous (ts or css)
This extension helps you to debug your javascript and typescript code in chrome browser at runtime.
Features :
- Setting breakpoints, including in source files when source maps are enabled
- Stepping, including with the buttons on the Chrome page
- The Locals pane
- Debugging eval scripts, script tags, and scripts that are added dynamically
- Watches
- Console
This extension provides different icons for different files, which can be very helpful in identifying the files
If you are using GIT as a remote repository then this extension can be really very helpful.
Features :
- Git History with graph and details (latest feature)
- You can see the details of a commit, such as author name, email, date, committer name, email, date and comments.
- View a previous copy of the file or compare it against the local workspace version or a previous version.
- You can also see the changes to the active line in the editor (Git Blame).
- Configure the information displayed in the list
- Use keyboard shortcuts to view history of a file or line
- Compare commits/branches
- View commit information in a treeview (snapshot of all changes)
GitLens is powerful, feature rich, and also highly customizable to meet your specific needs to manage Git Repository. It provides more advanced features than Git History extension.
Some of the features that GitLens provides :
- a GitLens explorer to navigate and explore repositories
- a GitLens History explorer to navigate and explore file histories
- an on-demand GitLens Results explorer to navigate and explore commit searches, visualize comparisons between branches, tags, commits, and more
- authorship code lens showing the most recent commit and # of authors to the top of files and/or on code blocks
- an unobtrusive current line blame annotation at the end of the line
- on-demand gutter blame annotations, including a heatmap, for the whole file
detailed blame information accessible via hovers - on-demand recent changes annotations to highlight lines changed by the most recent commit
- a status bar blame annotation showing author and date for the current line
- commit search — by message, author, filename, commit id, or code changes
- many powerful commands for exploring commits and histories, comparing and navigating revisions, stash access, repository status, etc
Other Beneficial Extension.
This extension can be helpful for inline css and html of component.
Features provided by this extension :
- Syntax highlighting of inline html and css.
- Code completion, highlighting, and hover information for inline html.
