Are you a newbie to VS Code or Angular? If not, how long have you been using VS Code or Angular development? Let me know in the comments below, before you even start reading this article. I would like us to share some few thoughts per your experience.
I have been a web developer for several years and got introduced to Angular about 2 years ago. I have used Angular to do great things and some editors I used were Sublime and Atom. I discovered VS code and since then I never looked back to my previous editors because of one of the reasons that, it comes with numerous extensions which I will share in this article.
Let’s talk about VS CODE
Vs Code is love 😍. It’s one of the fastest text editor and mini IDE out there and on top of it all its free. To use VS Code to its full and extended capabilities you will have to customize it to your specific needs because the main editor itself is limited in functionality. You can alter it based on what technologies, languages and frameworks you are utilizing.
Installing Vs Code Extensions
Please skip this section of you already know how to install extension for vs code. Otherwise, follow the steps below to install extensions:
- launch VS Code and
- Click on the Extensions tab from the Activity Bar on the left side bar or use the shortcut Ctrl+Shift+X on Windows and Cmd+Shift+X on Mac OS.
- Browse and install extensions from within VS Code by searching for other extensions.
- Once you find an extension, simply click Install button.
- After the installation is done, reload VS Code.
The 10 most Important VS Code Extensions
Now that we know how to install our extensions, let us look at the 10 most important VS Code extensions to speed up your angular development:
This extension provides a rich editing experience for Angular templates. Imagine you have a field in your component and want to access it in your HTML template. With this extension, you’ll get auto-completion for variables in the components.
When working with Angular you’ll want import Components, Services, Directives, etc. You will have to always remember the file paths or always lookup the file location in other to import them. This approach can be stressful when you have many imports. Auto Import to the rescue and all you must do is write the name of the class and the extension does the imports automatically for you. Also, by doing Ctrl+Space on Windows and Cmd+Space on Mac OS to the extension will be activated.
TSLint checks TypeScript code for readability, maintainability, and functionality errors. Seeing linter errors alongside the code is far more convenient than having to look for them in your terminal. Squiggly red lines appear under the code where you have a problem and display a list of warnings & errors when your mouse pointer hovers on it. That’s what TSLint extension is for. It can be customized with your own linting rules, configurations, and formatters.
This awesome extension was created John Papa. Think about how many times you write components, directives, pipe and so on. Some of these things can be annoying and time-wasting. That is why having this extension can be helpful as it provides you with several code pieces or snippets that cover the typical scenarios such as in the Angular TypeScript, you’ll be able to generate things such as a component, service or directives and in the HTML thins like *ngFor, *ngIf or ngModel.
This extension works basically like the Angular-CLI ng generate command. You can choose a component, directive, pipe, etc. and the newly created file will have a sample boilerplate code just like it generated by the Angular-CLI.
With the help of this extension you can easily navigate through component’s typescript, template and stylesheet in your Angular project. It uses specific commands that comes with the extension. Also, go to the definition of variables/functions when press F12 within HTML.
As your application becomes big, you might need to separate it into smaller and progressively viable modules. In any case, all your import statements will break and need fixing. That is what this extension is for. With Move TS extension, you can just move .TS files around and this extension will consequently replace and fix your import statements automatically.
This extension allows matching brackets to be identified with distinctive colors. You can customize which characters to match, and which colors to use. This extension makes it easier to know where your block of code starts and ends.
Bring icons to your Vs Code. It helps for the easy identification of file types and brings life to your work space.
Time spent formatting your code can be used to write new ones. With the help of prettier there is need to that anymore. Earlier I mentioned TSLINT which will provide you with some squiggly red lines that appear under the code where you have a problem and display a list of warnings. Prettier formats your code automatically save. Awesome right. No need to worry about formatting anymore.