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. Beautify

Beautify

It is a very nice extension for formatting HTML and CSS. You not don’t need to worry about the indentation, alignment of HTML and CSS files. Just select the piece of code you want to format, right click and use Format Selection option. It will format the code for you.

6. 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

7. 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.

8. TSLint (deprecated) by egamma

TSLint

Even though ESLint is a good extension, I will recommend to use this extension along side with ESLint. It does recommend us many best practices which are very minor but essential to be followed to make code uniform.It does highlight following which is not in ESLint:

  1. Missing whitespaces in for loop, if statement syntax.
  2. Used let/var instead of const.
  3. Trailing whitespaces.
  4. for..in loop is not filtered with hasOwnProperty method and much more.

Note: Even though it is a deprecated version, it works better than official TSLint by Microsoft.

9. Jest

Jest

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

10. 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.

Originally published at https://yuvi1422.blogspot.com on April 20, 2020.

--

--

--

Loves coding and enjoys learning new technologies. Website: https://.yuvrajpatil.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

What is Context API?

Hello Medium

Converting my canvas game to React Native (part 1)

Leetcode 1464: Maximum product of two elements in an array

Using Queues in Javascript to optimize animations on low-end devices

In What Order Should I Start Adding Types?

Leetcode 1453: Maximum Number of Darts Inside of a Circular Dartboard

Meteor Fibers meet Promises meet Callbacks — A practical guide

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Yuvraj Patil

Yuvraj Patil

Loves coding and enjoys learning new technologies. Website: https://.yuvrajpatil.com

More from Medium

How to Use a JavaScript Reporting Tool in Your Python Web App

Adaptive responsive tables using react-table library

JavaScript Frameworks

Best Search Packages for JavaScript