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

Why Should Consider NodeJS For Web App Development Project?

Developing Baby Blobs

10 Javascript thing developers should know — — -

Using console.log() to hire developers

Value and Reference in practice

25 rows  containing zeros with second number being a 5. Instead of just one row being changed, all of them are

How to implement long press gestures in Ionic 4

JavaScript Array forEach() method to loop through an Array

Dynamic header bars and/or contents for your Ivy Angular App

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

Why and How to Use Webpack and Babel with Vanilla JS

Why and How to Use Webpack and Babel with Vanilla JS

Store Data in the Browser with JavaScript

The most easiest way to append any value to the string in JavaScript using Template Literals.

Building Your First VsCode extension