Visual Studio Code Extensions for UI development

Visual Studio Code Extensions for UI development

Visual Studio Code is the best IDE for any front end development. During the code development we do lots of things other than coding. Things like formatting, making builds and much more. To help the developers speed up there are lots of extensions available for Visual Studio Code.

I have listed down extensions which I believe will definitely help during front end development:

1. Partial Diff

Partial Diff

Many times we have to compare to big files to know what are the changes we have done. In some cases, this technique helps us a lot. To compare the big files specially JSON, Partial Diff is an excellent extension. Once you have installed this extension, some options to compare will be added into the right click menu inside Visual Studio Code editor.

Steps to use:

1. Select first content: Select content which you want to compare. Right click and select option Select Text for Compare.
2. Select second content: Select the content to which you want to compare previous content. Right click and select option Compare Text with Previous Selection.
3. It will open a new tab with a comparison panel. It will highlight all the differences in the both contents.

2. Trailing Spaces

Trailing Spaces

Many times we have observed that there are extra unnecessary spaces are left in code. To avoid that, this extension helps us a lot. It provides us lots of options to use. Some of them are as below

1. Trailing Spaces: Highlight: It highlights every trailing space which helps us not to commit any trailing spaces.
2. Trailing Spaces: Delete: It deletes all trailing spaces in one go.
3. Trailing Spaces: Delete — Modified Lines Only: It deletes trailing spaces on modified lines only.

3. GitLens

GitLens

Visual Studio Code provide support for the basic git tasks, it is not capable of doing advanced tasks using simple UI. This extension is the solution for git related informative tasks. It provides features like following:

1. Showing file history
2. Compare with some old file version
3. Check last commit details on any line of file and much more.

4. Quokka

Quokka

Usually if we want to execute any standalone JavaScript code, we use Chrome’s console. This extension executes standalone JavaScript code snippet in Visual Studio Code. It is far better than using Chrome’s console. Steps to use this extension are nicely explained at Quokka’s Docs

5. Better Comments

Better Comments

Regular comments are very plain once. This extension changes looks of comments. It actually does not do anything related to development speed-up but it shows the comments in better looks.

1. Start your comment with “!”: It will show that comment line in red color
2. Start your comment with “?”: It will show that comment line in blue color
3. TODO will be displayed in orange color

6. ESLint

ESLint

It is like JSHint for ES6 plus much more. It is good for any ES6 development like (Angular Development). It provides following features:

1. Highlight errors based on ES6 rules
2. Highlights if any code is not following best practice. It helps to avoid the bugs which can come in future due to bad code practice.
3. Highlights unnecessary variable declarations. Highlights unnecessary spaces and tabs.

7. Jest

Jest

This extension automatically runs jest tests and highlight passed/failed test cases in VS Code itself.

8. JSHint

JSHint

Good for any JavaScript development. It provides following features:

1. Highlight errors based on JavaScript rules
2. Highlights if any code is not following best practice. It helps to avoid the bugs which can come in future due to bad code practice.
3. Highlights unnecessary variable declarations. Highlights unnecessary spaces and tabs.

Note: If you are doing development in ES6, please do not use this extension. Use ESLint extension instead.