Extensions are the way to boost your productivity. Also, they will help you to transform your coding experience into a pleasant cruise on the way towards your goals!
In this article, I will share my list of extensions I'm using daily. The list is not mandatory but exploratory.
The list is sorted alphabetically and doesn't reflect my preferences.
Angular 8 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout
The table below is an excerpt from the description of the extension.
| Prefix | Description |
|---|---|
| ng- | Angular Snippets |
| fx- | Angular Flex Layout Snippets |
| ngrx- | Angular NgRx Snippets |
| ngxs- | Angular Ngxs Snippets |
| m- | Angular Material Design Snippets |
| rx- | RxJS Snippets for both TypeScript and JavaScript |
| sw- | Service Workers Snippets |
| t- | Test Snippets |
| e- | Test Expect Snippets |
| pwa- | Progressive Web Applications Snippets |
From the table, you can see how widely these snippets are covering the daily needs of an angular developer.
To add a snippet to your file, start typing a prefix of the snippet (refer to the above table).
Angular Console
The Angular CLI is created to solve the everyday tasks of the developer.
However, it is hard to remember all of the commands and arguments.
The goal of this extension is to form a command-line query which will lead you to the desired result.
For example, the creation of a lazy-loaded component for a given path will take literally seconds. Moreover, the query will also create a routing-module and modify existing routes.
Angular Language Service
The service will pass properties and methods of the component to the corresponding template if they are public.
Also, this service will pass to the template everything that is declared int the export section of any imported module.
Another noticeable feature is that this extension will also list available properties, inputs, outputs, directives, etc. of any tag in the template.
The extension also allows us to go to the definition and will show AOT diagnostic messages.
Bracket Pair Colorizer 2
The name of this extension speaks for itself - it will colorize the matching brackets!
Anyway, this is a really helpful extension, especially if you have a deeply nested piece of code.
Plus, it can be customized to fit your needs and works incredibly fast.
Chronicler
This cross-platform plugin will record sessions of your work.
You can choose between video files and GIF animations.
It is possible to define a delayed start and duration of the record.
Code Spell Checker
This extension will highlight typos and all the words not listed in the dictionary.
The default dictionary is English, but there are plentiful of supported languages. I'm also using the Russian version of this plugin.
Moreover, you can contribute to this extension if you are missing something or have found a bug.
Debugger for Chrome
The disclaimer says:
Debug your JavaScript code running in Google Chrome from VS Code.
And I want to add:
Debug your TypeScript code.
Because via the map files you can debug your TypeScript code with all the state data!
GitLens — Git supercharged
This extension lets you orchestrate work with git with ease.
The plugin allows to:
- browse history.
- display authorship.
- manage branches and tags.
- search commits.
- check repositories.
And perform other useful tasks as well!
IntelliSense for CSS class names in HTML
The plugin provides the auto-completion variants from libraries and files added to your workspace.
It supports a lot of languages as well as libraries.
Upon IDE start-up the extension scans and caches all of the found CSS classes.
Live Server Preview
This plugin allows you to preview pure HTML files right inside IDE.
No dev server required.
Very useful to check something on the go!
Prettier - Code formatter
Prettier is the almighty formatting tool, which will keep your files neat and tidy!
This tool is customizable in many ways and supports a bunch of languages/formats.
Also, you can enable document formatting upon save.
Another cool feature is that you can ship your Prettier settings with your repository. Thus, you'll be sure that other contributors will follow your style.
SCSS IntelliSense
The plugin will recursively scan files that you import to offer defined variables, mixins and functions as options of auto-complete.
Settings Sync
This extension allows you to sync settings between different instances of Visual Studio Code.
The tool will create a private gist in your GitHub account on your behalf.
Later on, you need to add the extension and apply your settings to the instance of VSC!
Synchronization will include:
- Settings File
- Keybinding File
- Launch File
- Snippets Folder
- VSCode Extensions & Extensions Configurations
- Workspaces Folder
TSLint
This plugin enables realtime lint of TypeScript files!
Moreover, it can automatically fix common TypeScript issues upon file save.
vscode-angular-html
As the description of the extension says:
This plugin adds syntax highlighting for angular HTML template files in VS Code.
And that is indeed awesome!
You will see errors in your template before you will compile your project.
vscode-icons
This plugin adds icons to the file names following the file type, language/library/framework used.
Thus, you will be able to find the required files with ease.
Take a look at the list of supported file types.