Whenever you write a comment in the code, as I have experienced most of the time I would miss the location of past comments and end up with frustration because code can get crowded.
In order to avoid this, colored comments is introduced and now it is easy to alert team members with the expression ! or to get them back to their attention.
It is used to create your own code that can be reused throughout your project, to get a clear picture by taking an example, suppose if often find writing boilerplate like below
There is no need to write the entire thing because you can actually put this into user snippet and if you type a custom prefix is more than enough to generate the snippet that you configured it.
To create a global snippet click new global snippet files by going to file>preferences?user snippets.
Create a own snippet file click on new global file and type in typescript react.json and automatically it will take you to the new created .json file it can be used for react applications built by typescript.
Collision of you snippets and getting polluted by other projects can be avoided by using project snippets because that enable you to declare project level snippet.
Bracket pair colorizer
This is one of the most beautiful ways of using colored brackets, it makes your work more enjoyable and people who hate coding, will make them coding as a passion.
It is the best theme ever created, right way you can install this in to VS code to make your code look more beautiful like this.
Every project needs a future proof set up to secure their projects, then it is good to shift from TSLint configurations to ESLint+Typescript.
New set up will be leveraged to most of ESLint’s rules and have a higher compatibility.
In developing a project stylelint helps you in a great way. It gives a big support to CSS/SCSS/Sass/Less and plugins written by the community. Errors can be avoided by using stylelint and enforce styling convention in CSS.
This helps you for the people who have the habit of writing To do ‘s in their code, it highlights the to do‘s in place throughout the project.
Highlight matching tag
Tags are highlighted so that it won’t be difficult for you anymore when you try to match the other end of tags.
It is an awesome tool for all the developers, for the people who plays music in the background it is difficult to switch music by going back in to music player as and when and getting back to vscode to continue your work.
It helps you to use spotify inside the Vscode itself, with the extension song which you are playing will be visible in the status bar and it is now easier for you to switch between songs and hotkeys and buttons are available to control spotify and with many more options
GraphQL for VSCode
Syntax can be highlighted and has the features of auto complete and linting, you have still more benefits of using GraphQL syntax.
Indent rainbow will help you to read indentation easier than before
Whenever we are reading a book we use color highlighter in a similar way this is used to highlight the codes in a great manner
It is an extension of VScode gives you a graphical user interface and helps you in selecting as well as generating color codes such as CSS color notations.
Writing down a list of notes manually would not be preferred by many of us that they have to use in development tool
There is a service called ever note, it helps with the setting sync tool.
To use this service, create a gist account and every time you would like to save settings press shift+alt+u , this helps you in uploading the private settings in gist account. Whenever you want to download settings in another computer , just press shift+alt+d.
The name itself suggests, it displays all the todo which you have created as a single tree where you can view on the left side display panel. It also helps you to find todo throughout your application code.
When you are about to use string interpolations, it helps you to switch to backticks. It lets you toggle between quotes and all i can say is it is fun utility extension.
Alignment of code is more easier with better align, it can be done without selecting first.
You can use it by placing the cursor in the code you want to align and click ctrl+shift+p by opening your palette and invoke align command.
Auto close tag
It helps you to type <div, followed by a slash / and it automatically closes the tag by completing the last arrow for you.
This is not available by default but it is much more useful for many.
Sort lines tool helps you to align the arrays alphabetically and makes your coding life easier
VSCode google translate
If you are in to the project which is multi-lingual this is useful suppose if you don’t like to leave your editor.
It is used as an extension where it auto completes file names
IntelliSense for CSS class names in HTML
Based on your definition found in workplace it completes the HTML class attributes by providing CSS class name.
Material icon theme
When you are working in a dark theme it is good to prefer material icon theme than icon them because it lets you which file types are which
Rest client extension greatly impact development tool especially while testing APIs, when i tried using rest client it didn’t seem like much more useful than postman but the more I started to use the more i realised.
Create HTTP GET request for a new file and to highlight that one line, type ctrl+shift+p and click rest client send request and new tab will be opened with in a split second.
When you are involved in brainstorming projects, it is better to write down in markdown format because it helps you to understand in an easy manner and more number of tools are available to help the process of writing markdown text as well as markdownlint.
It is an extension of VSCODE which helps you in style checking inside .md files. Docsify is also a great support for markdown and other projects.