Visual Studio Code is a brilliant editor that makes coding life much easier, especially for JavaScript developers.
What makes VS Code an even better editor is the amount of extensions in the marketplace.
Table of Contents
- Angular Specific Packages ---
- Angular 2 TypeScript Emmet
- Angular Language Service
- Angular v4 TypeScript Snippets
- Angular2 Inline
- Angular2 Switcher
- Packages for All JavaScript Languages ---
- Debugger for Chrome
- Auto Import
- Bracket Pair Colorizer
- JavaScript (ES6) Code Snippets
- npm
- TSLint
- Align
- Conclusion
Going through some Angular development, I've found a few packages that have made coding easier for Angular v2+ projects. We'll go over them here. There's an easy way to get many of these packages using an extension pack: Angular Essentials Extension Pack by John Papa.
The extension pack has many of these, but I'd like to go into a little more detail for some of the packages and also introduce some packages that aren't necessarily Angular specific, although they do help with JS development.
Angular Specific Packages ---
Here are the packages specific to Angular. All of these will help make Angular development faster and more convenient.
Angular 2 TypeScript Emmet
This package will allow you to use Emmet abbreviations inside Angular inline templates.
Here's what it looks like without the Angular 2 TypeScript Emmet package:
BeginnerTailwind.com Learn Tailwind CSS from ScratchAnd with the package, we have the glory of Emmet!
Angular Language Service
This is an extremely helpful extension. It gives us intellisense when writing out our HTML templates for an Angular component.
Angular v4 TypeScript Snippets
This is a great package by John Papa. While the Angular CLI can do a lot of these generations for us, it's always helpful to know we have snippets at our fingertips.
Just type a-
and see VS Code show you all the snippets available with this package:
Here's an example of a snippet to generate an HTTP Interceptor:
Angular2 Inline
This is a simple one but a favorite. Get syntax highlighting for your inline templates. Here's a comparison with and without:
Angular2 Switcher
This is also a simple package that not everyone will find useful. When coding, I do my best to keep my hands on the keyboard. It saves time to stay away from the mouse. This is why I invest time into learning the VS Code keyboard shortcuts and Vim.
This package allows you to quickly switch to a component's matching .css|.html|.ts
files.
Type alt + o
(Windows) or shift + alt + o
(Mac) to:
- Go from
.ts
->.html
- Go from
.css
->.html
- Go from
.html
-> previous file (.ts
or.css
)
Type alt + i
(Windows) or shift + alt + i
(Mac) to:
- Go from
.ts
->.css
- Go from
.html
->.css
- Go from
.css
-> previous file (.ts
or.html
)
Type alt + u
(Windows) or shift + alt + u
(Mac) to:
- Go from
.css
->.ts
- Go from
.html
->.ts
- Go from
.ts
-> previous file (.css
or.html
)
Packages for All JavaScript Languages ---
Debugger for Chrome
An essential when working with any VS Code JavaScript.
Auto Import
Very useful package that will automatically add the import { } from ''
line to your code.
Bracket Pair Colorizer
This may not be up everyone's alley, but it can be helpful to see which bracket closes where. This extension makes matching brackets the same color.
JavaScript (ES6) Code Snippets
A simple package to add common ES6 snippets. The one I use the most is idm
which is a snippet that expands to:
import { } from 'module';
Some other useful snippets:
clg
:console.log(object)
fof
:for(const item of object) {}
sto
:setTimeout(() => {});
npm
A small package that can tell you when one of your packages are out of date. Here's an example showing one of our Angular packages behind a version.
TSLint
Integrates TSLint into VS Code so we can get smart hinting and error finding for our TypeScript code.
Align
A personal favorite. This is a minor package that I find myself using all the time. Purely cosmetic, it will help you align your code.
Here's some unaligned code.
Hit the keyboard shortcut ctrl + alt + a
and you get:
Conclusion
These are the packages that I've found to help most with Angular v2+ development. The amount of time these extensions can save us add up over time and let us focus more on the actual code.
Do you have any favorite extensions for Angular development? Would you be interested if I put together a VS Code extension pack so that you can install all these extensions with the click of a button?
Happy coding!
Like this article? Follow @chris__sev on Twitter