Vs code as you all know which is more powerful and also lightweight cross platform runs on your desktop. It is one of the most famous editors used by most of the javascript developers.

Bajillion is an open source extension invented in the market for public use. Being a javascript developers i would like to share a variety of VS code tools in 2019.

Better comments

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.

Project snippets

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. 

Material theme

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. 

@typescript-eslint/parser 

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. 

Stylelint

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.

TODO Highlight

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.

Import cost

Import cost is a tool which gives the information which you already know so it is not needed it anymore and i am sure it will be useful for all of the javascript developers

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.

Vscode-spotify

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

It is good to install graphQL for VScode in to your VScode since it has a consistency of the growth and all javascript communities are using, it’s probably a good idea to start. 

Syntax can be highlighted and has the features of auto complete and linting, you have still more benefits of using GraphQL syntax. 

Indent rainbow

Indent rainbow will help you to read indentation easier than before

Color highlight

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

Color picker

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. 

Setting sync

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.

Todo tree

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.

Toggle quotes

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.

Better align

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

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. 

Prettier

It is an extension where you can format your javascript code automatically using prettier

Path intellisense

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

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.

Markdownlint+docsify

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. 

Pin It on Pinterest

Shares
Share This