Most Useful extensions in VSCode
For Web developers
One of the most important things to be more productive while working with angular is to take care and customise your development environment.
VS code have a variety of choices with extensions that helps us to code quickly, with better quality, to debug and even collaborate and chat with your team.
To watch the youtube video Like And Subscribe.
To download VS code, it is available in this link. Available for Linux/Mac/Win.
Pre-requisites:
VS code is available for download in this link. for Linux/Mac/Windows
To Uninstall VS Code use the following steps:
Remove Settings and Config
rm -rf $HOME/Library/Application\ Support/Code// add sudo if you needed to// if you’re using insider*
sudo rm -rf $HOME/Library/Application\ Support/Code\ -\ Insiders/Remove All Extensions
rm -rf $HOME/.vscode
// add sudo if you needed to// if you’re using insider*
sudo rm -rf $HOME/.vscode-insiders/Delete VS Code (for linux)
sudo dpkg —remove visual-studio-code
1- Themes
First of all let’s start by themes, colours and icons for a better yet Wonderfull experience.
In this link We have access to different themes split by categories, trending, dark or light themes. Many people go for the material theme but it depends on your taste and what you feel comfortable with. Im going to choose cobalt2 because it has nice colour combination easy on the eye.
2- Icons
Next the material icon pack, it just make it easier and faster looking for your files, especially with angular the name of your template usually have the same name with your typescript file which make it clear to choose what you need to click on. In the details section of this extension you can find all kind of available icons ready to be used.
3- Bracket coloriser
Our third extension will be the bracket pair coloriser, what I like about this extension is it matches brackets with different colours which are configurable by the user and can be changed.
No more looking for opening and closing tags, it will just popup and be easy to spot.
4- Tslint
Our fourth extension will be tslint. Linting is one of the most important thing nowadays for individual projects and team projects to improve the quality and the consistency of the outcome of your code.
5- Auto rename tag
Our fifth extension will be auto rename tag, helpful when working with html or xml tags. If you change the first tag, the second will be changed automatically.
6- Auto import
The sixth extension is the auto import, it scans all ts files and help auto import used libraries or modules. It parses and provide code actions and code completion for available imports it works with typescript as well with tsx files.
7- NPM
Our seventh extension is npm extension, gives you quick access on all the scripts available in you package.json. You can install your dependencies, run the tests, build you project or run any script you create for whatever reason. Just with command+shift+p or control+shift+p then type npm.
8- Angular 8 Snippets
Next the eighth extension will be Angular snippets, this extension is pretty complete, it contains 242 snippet for typescript, html, angular material, flex layout, ngrx, testing and progressive web applications.
You start writing a prefix ‘ng-’ and you will get a list of possible choices to create a new component, a new service, or angular common methods like ng-for, directives, routers and even pipes. Highly recommended because it helps you code faster, no more time loss on checking syntax or any other reason regarding syntax or file template.
9- Git lens
Git lens is our ninth extension in the list, it is open source and helps visualise code authorship, git blame annotations and the history changes on a particularly line if you’re investigating a bug per example.
It is pretty useful for personal or team projects.
10- Debugger for Chrome
Debugger for chrome is just amazing, no more console logs or debugging on your browser, you don’t even need to leave your vs code to debug.
You can set break points, watchers, see variables the call stack in seconds. With the right configuration you can start debugging code in the best possible way.
11- Live share
Live share is useful when working with a team, or with pair programming. This extension is built by Microsoft, and it enables collaboratively edit, debug with you team in real time.
12- Live share chat
If you’re a slack or live share extension user then this extension is for you.
With live share chat you can chat with your team or chat bots in different channels from vs code with live share feature for your code.
VS code is a very powerful tool with thousands of different extensions.
Please share with me your recommended extensions and why in the comment section.
