A sneak peek into Angular Language Service

Hi friends. I hope that we come out of this pandemic soon and some vaccine becomes mainstream. In my last post, we got a sneak peek into the new features in C# 8.0. In this post I am going to introduce you to the Angular Language Service which can be added to Visual Studio Code as an extension but before that, let’s see what it actually is.

What is Angular Language Service?

As you might be knowing, we developers use a wide variety of cool code editors for coding. Hence code completion, navigation, hints and help on errors are just some of the things that we look forward to in a code editor. And this is where the Angular Language Service comes into picture. It provides code editors with all the above features.

How does Angular Language Service work?

When the Angular Language Service is used as an extension with the available editors, it triggers a language-service process. The entire communication is on RPC (Remote Procedure Call). As and when you enter text into the editor it supplies data to the language-service process. So the end result is that you will get info on keyword completion, hints and navigation help.

What are the features of Angular Language Service?

As per the official Angular website below are the core features available

  • Go to definition
  • Completion Lists
  • Diagnosis info
  • Quick Info

Angular Language Service comes to Visual Studio

According to Microsoft, the Visual Studio team got a lot of customer calls and based on feedback they found that a lot of developers are using Angular for the UI part. Hence there was a strong need for Visual Studio to provide context sensitive help for Angular related projects. Hence this feature comes as an extension for Visual Studio.

How to get and install the extension

From Microsoft Marketplace

You can download the extension from this link.

Click the Download button

After downloading you can open the .vsix (extension) file to include it in Visual Studio.

From Visual Studio

Open Visual Studio -> Extensions -> Manage Extensions -> Search Bar (search for Angular Language Extension) -> Download

Testing the extension from Visual Studio

Open any Angular project in Visual Studio and build the solution.

Now open any html / .ts file. Open the Output window, and in the drop down there should be 2 options related to the Angular Language Service extension installation.

You can check it out by hovering over the html elements or by using the autocomplete feature which is supplied by the extension thereby verifying that it is working correctly.

Support for other editors

As per the official Angular website the editors supported as of now are Visual Studio Code, Sublime and Web Storm.

Summary

Do check out this new extension which is a welcome addition to the Visual Studio family of extensions. Developers who are working more on Angular projects for the UI part will definitely like this feature. Let’s discuss on how you found this new feature and how much it helps in the comments section below.

Till we try and find a vaccine for this pandemic, stay safe and keep learning.

Hitesh Boricha

I have a little over a decade experience in the IT industry. Having worked in various roles in this industry, I am passionate about technology.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.