Visual Studio Code has become a very popular code editor for Angular developers, particularly those running the Angular CLI. Features such as Syntax highlighting and autocomplete, provision to debug code right in the editor, built-in Git commands and, support for extensions make VSCode among the most popular code editors around.
Image Source: TRIPLEBYTE
In this post, I am going to look at 5 VSCode extensions that are useful for Angular developers.
#1 angular2-shortcuts
If you have an Angular CLI application running on your local host, in the app folder, you have the app component that is dynamically generated by the Angular CLI.
As an Angular developer, you will be working on this component and quite often switching between the html, css, and the ts file.
When the application grows, you’ll be switching between these three files from the individual components a lot more. For that, you have a useful extension called angular2-switcher. If you install this extension, you will get access to keyboard shortcuts to quickly navigate the individual files.
| File | Shortcut |
| app.component.html | Shift+Alt+u |
| app.component.css | Shift+Alt+i |
| app.component.ts | Shift+Alt+o |
| app.component.spec.ts | Shift+Alt+p |
The table above lists four keyboard-shortcuts to switch between CSS, HTML, the TS file for testing and the TS file of the component itself. The letters—u, i, o and p—are very close together to make it fast to switch between the individual files.
#2 Angular Language Service
In Angular, if you add a name to the app component and try to render it inside of the HTML template, VSCode won’t render the name to auto-completion out of the box and needs an extension for added functionality. As an Angular developer, you want access to the inside of a template. You can use the Angular Language Service extension, which will add auto-completion.
If you enable it and go back to the HTML file, you’ll see if the name will populate in autocomplete list as soon as you start typing.
The same would happen for the title and, for that matter, anything that is created inside of the app component; you have access to the inside of the template.
If you create a simple function that returns a string, then you’ll have access to it as well thanks to Angular Language Service extension.
#3 json2ts
The other things you will work very often in Angular are endpoints that return JSON data. For the JSON data, you will need to create a user interface. You can do it manually but if you have a massive object, then it would take you some time.
Luckily, a VSCode extension can automate this for you. json2ts isn’t Angular specific and works whenever you’re working with TypeScript. Json2ts comes handy when you have to create a TypeScript interface from a JSON object.
#4 Bookmarks
Bookmark comes handy when you’re working with long files. If you want to work on a little block of code, then you need to check something at the top and then go back to the place you were before. With Bookmark, you can easily put a little marker by pressing Alt+Ctrl+K, you’ll see a blue marker at the place. If you go to the top of the code where all your variables are stored, you can do the same thing—Alt+Ctrl+K.
You can use Alt+Ctrl+J and Alt+Ctrl+L to jump between these two markers. When you’re working on a longer file and want to quickly jump to a specific section, you can put as many of these markers as you like.
| Action | Shortcut |
| Set bookmark/ Remove | Alt+Ctrl+K |
| Go to previous bookmark | Alt+Ctrl+J |
| Go to next bookmark | Alt+Ctrl+L |
There are more shortcuts to this. You can go to the menu, type in bookmarks, and you’ll see all the other keyboard shortcuts related to this extension. Setting, removing and going to the next and previous bookmark are the most useful shortcuts.
#5 Guides
I’m sure you came across the issue when you’re looking at long codes of HTML and you’re wondering, where does this tag start and end? Which div is it disclosing? Wouldn’t it be nice to have some connection between the opening and closing tags? You need some sort of rules and that’s exactly what Guides does.
After installing the Guides extension, vertical lines connect the opening and closing divs and help you to visualize correct indentation as shown below.
Guides has many settings as well. You can change the colors or the thickness of the lines for example.
These VSCode extensions improve Angular Development Workflow and I believe you will find them useful too. I know there are many more useful extensions, which you use every day. I would love to hear about them.
Author Bio
Aditya Modi is the CEO of TOPS Infosolutions, a Mobile and Web development company. With the right allocation of resources and emerging technology, he provides innovative solutions to businesses worldwide to solve their business and engineering problems. An avid reader, he values great books and calls them his source of motivation. You may reach out to him on LinkedIn.
Read Next
The January 2019 release of Visual Studio code v1.31 is out
React Native Vs Ionic : Which one is the better mobile app development framework?
Code completion suggestions via IntelliCode comes to C++ in Visual Studio 2019
