In this post, we will be discussing How to Setup or Get the Best Visual Studio Code setup for Angular development. The last post which I wrote on How I get started with Angular is a good read if you would like to know how I have started Angular Development. In that post, I’ve mentioned some extensions that I use in my IDE.
- 1 VS Code for Angular Development
- 2 Setting Up VS Code for Angular Development
- 3 How to Install Extensions in Visual Studio Code
- 4 Best VS Code Extensions/Plugins for Angular
- 5 TSLint
- 6 Angular Language Service
- 7 Prettier - Code formatter
- 8 Angular 8 Snippets
- 9 Debugger for Chrome
- 10 Bracket Pair Colorizer
- 11 Indenticator
- 12 Path Intellisense
- 13 Dark The Shit Out
- 14 Final Thoughts
VS Code for Angular Development
Visual Studio Code is undoubtedly the best IDE that you can get for your Angular development. Angular is from Google and Visual Studio Code is from Microsoft.
But you might wonder, how these two came together. These two goes very well with each other, thanks to TypeScript.
Angular uses TypeScript and VS Code loves Typescript. So it is like a match made in heaven. There are many other IDEs available like Sublime Text, Atom, Brackets and many more.
But I would personally go with VS Code any time of the day. It is also hugely popular among the developer community.
Setting Up VS Code for Angular Development
Visual Studio Code a.k.a VS Code comes with tons and tons of features out of the box. These features are general features which are generic and applies to any code you write in the IDE. It also has some language-specific options and configurations which will give you even more options to mess around.
- VS Code comes with a good intellisense engine which is really good.
- There are shortcuts for almost everything.
- Code manipulation is a breeze with options to moves lines of code to top or bottom or duplicate them.
- Code snippets are so convenient and make life easier.
These are just some of the features of the IDE, there are lots of it.
Apart from these nifty features, Visual Studio Code also allows customizing the look and feel of the editor itself. There are tons of themes to choose from.
Icon Themes are also present which can be used to customize the icons that are shown for the file types by the editor.
How to Install Extensions in Visual Studio Code
Installing extensions is very easy in VSCode. It has a separate tab for extensions which enables you to search and install extensions with ease. All the extensions are available on Visual Studio Marketplace and its directly accessible within the IDE itself.
You can install extensions in two(simple) ways.
- Go to Extensions( Ctrl + Shift + X) and search for your desired extension. You can get the item and then click on the Install button to install the extension. It is as simple as that.
- Using the command palette( Ctrl + P) and enter the install command for the extension.
In the below section, I have added a feature box for each of these Best VS Code extensions that we are talking about. You can directly install the extension by clicking on the Install button which will open VS Code and take you to the extension page.
The Install button will only work if you have Visual Studio Code installed on your system.
Or you can simply copy the install script and paste it in the command palette in VS Code.
Best VS Code Extensions/Plugins for Angular
I have talked about some of the features of VS Code, it is now time to dive into the best extensions for Angular Development using Visual Studio Code. Even when it comes to extensions the number of extensions that are available for download is in tens and thousands.
VS Code allows developers to easily create new extensions for the IDE as it provides very extensive APIs. Even I took a shot at creating some extensions and themes as well. I will share them in this post if you would like to check them out.
For Angular Development, you can find so many extensions. Some of them are doing the same thing but out of them, one would stand out because of the ease of use or performance in general.
So I am not gonna go over all the extensions that you should be installed, but rather focus on some good extensions that can really boost your productivity.
All these extensions are used by me and many other devs around the world.
For those who doesn’t know what linting is, It is basically testing the code you write against some rules that are made in such a way that you follow the best practices while coding. This makes your code more efficient and will perform better.
Since Angular uses TS, all the functionalities will be written in TS and it is always good to have TSLint installed which will scan through your code and give you hints when you are writing bad code.
TSLint checks your code for readability, maintainability, and functionality errors.
I use TSLint along with Airbnb’s style guide. I personally find it is a great combination. If you would like to know how to setup TSLint and also integrate Airbnb style guide, let me know in the comments and I will create a separate post on this topic.
Angular Language Service
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
The extension is made by the folks behind Angular and it would definitely help you in writing Angular code in VS Code.
Prettier – Code Formatter
Formatting of Code is important as it will be easy for us to read the code and it will be aesthetically appealing. Maintaining code consistency is important.
If you are using 2 spaces for tab and in some other place if you are using 4 spaces for tab, then the code won’t look good and the readability will also be very low.
So in order to make sure the code is readable and neat, we can use some code formatting plugins or extensions. Prettier is such a great extension for formatting your code. Prettier supports multiple languages. This means you can have a single extension for all your code formatting.
Languages that Prettier supports out of the box are:
- CSS, Less, and SCSS
- Markdown, including GFM and MDX
Prettier for VSCode also comes with some configurations that you can have to make changes to the default behavior. The only change which i normally make is I prefer single quotes over double quotes, so i make this change in prettier config in settings.json file:
Angular 8 Snippets
Visual Studio Code contains code snippets which are like macros. We type some shortcut and the code snippet is added inside the editor. It can be very useful as it reduces the time you spend on writing a repeating piece of code. You can be more productive when you use snippets.
The Angular 8 Snippets is one of the most snippets pack for VS Code. It is a must-have if you are an Angular Developer. It contains 240+ snippets for TypeScript, Html, Angular Material, Flex-Layout, ngRx, RxJS, PWA, etc.
Debugger for Chrome
Debugging applications is very important. It is quite difficult to find bugs in your application, especially if you don’t have a good debugging tool to help you out. In the case of Angular, you can use the browser to debug the application.
But it is not that efficient if you need to switch between your browser and editor for debugging your code. But with the Debugger for Chrome extension for Visual Studio Code, you can debug your application directly inside the IDE.
- 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
Bracket Pair Colorizer
This extension can be very helpful. As the name suggests, it will color your bracket pairs so that it is quite easy to identify the brackets.
The Indenticator extension goes well with the Bracket Pair Colorizer extension. This extension highlights the currently selected indent. Pretty useful to identify the functions extend.
VS Code newer version comes with indent highlight feature by default. This particular plugin has a different approach which you can read about here.
This is a really good extension which is really really helpful. VS Code has really good intellisense when it comes to code suggestions. This extension gives you path intellisense.
We use a lot of files in our project, so if you want to link one file in a different file, you need to give the path inside. So this extension helps you with the path so that you don’t have to go a find the path and then type it.
The extension gives you autocomplete suggestions for the files and folders as you type.
I personally find this extension really useful and is definitely a part of Best Visual Studio Code Extensions.
Also, I would like to introduce a theme which I made. If you are a kind of person who likes dark mode, then it won’t hurt to try the theme. Please try it out and let me know how you feel about the theme.
Dark The Shit Out
There are many more cool extensions for VS Code and many more are being added every minute. This is due to the popularity of the IDE itself. I don’t recommend installing so many extensions which might actually slow the IDE down.
So be generous with the number of extensions that you use. I will be keeping the list updated with new extensions. All of these VS Code extensions that I have mentioned in the article are used by me personally and I have tried and tested all of these.