DEV Community

Cover image for 26 Miraculous VS Code Tools for JavaScript Developers in 2019

26 Miraculous VS Code Tools for JavaScript Developers in 2019

jsmanifest on July 07, 2019

Find me on medium Visual Studio Code (more casually known as VS code) is a lightweight but powerful cross platform source code editor that runs on...
Collapse
 
gilad profile image
Gilad Tsehori

Oh no, now I have to spend the rest of my day installing plugins!! 🤩

Collapse
 
billvladimir profile image
Vladimir

+1

Collapse
 
vishnuharidas profile image
Vishnu Haridas • Edited

15. REST Client is my favorite VSCode extension.

The plugin has an "Environment" feature where I can configure different environments.

Another sweet feature is capturing values from the responses of other requests. For example, you may have a /my-listings API that uses an AuthToken obtained from a /login API. The plugin can automatically call the /login API first, parse the response, extract the token, and use it in the /my-listings API.

Mostly I use the REST Client plugin as an API documentation tool. The documentation includes just those *.http files and push to a repo and share across the team so that the team can test the APIs easily by opening the directory in VSCode.

Collapse
 
fuksito profile image
Vitaliy Yanchuk

Intent Rainbow is really nice, I found it before this article, and it is deserved to be in this list.
I have only one issue with it, it would be perfect to have some kind of a button to disable it for a time, it is tedious to go to Extensions tab and disable it from there

Collapse
 
christianschulze profile image
Christian Schulze

Settings Cycler might be able to solve this for you - marketplace.visualstudio.com/items...

Collapse
 
jsmanifest profile image
jsmanifest

This is great!

Collapse
 
codemouse92 profile image
Jason C. McDonald • Edited

Bracket Colorizer and Better Comments are both awesome. I also like Peacock for when I have multiple open windows.

I haven't heard of several other of these, so I have some installing to do!

EDIT: Just stumbled across Comment Anchors, which combines Todo Tree and Better Comments in a neat way.

Collapse
 
jsmanifest profile image
jsmanifest

Peacock is nice!

Collapse
 
tarasnovak profile image
dataPixy 🧚‍♂️

can I add #27 to your well researched vscode ext's list?

Check out Data Preview 🈸: marketplace.visualstudio.com/items...

There is nothing like it in MS Visual Studio Code marketplace store. Believe me, I've researched data in vscode topic and decided it's time we add one that is more than Excel viewer :)

I am the author of that ext. Blog post pending on this site once I am happy with my 1.x v. It's relatively young ext. but seems to be trending #1 monthly.

Please post your feedback on it here: github.com/RandomFractals/vscode-d...

I could use some comments and stars to make it shine for the solid v2.0 I am targetting this month.

P.S.: great list! I use most of them daily too! cheers!

Collapse
 
jsmanifest profile image
jsmanifest

This is awesome! I will promote this in my upcoming post!

Collapse
 
tarasnovak profile image
dataPixy 🧚‍♂️

Thaks mate! That would be great since I am still in a heavy v1.x dev solo mode and not gonna get to posting about it for another week or so.

Feel free to reuse my Usage scenarios section from docs or any notes and pics from releases I've been pushing: github.com/RandomFractals/vscode-d...

I am still behind on docs, but I've tried to be thorough regarding what Data Preview 🈸 does and how it interprets different data formats.

Tag on me on Twitter if you decide to include it in your next vscode ext's post. It's also where I keep my daily devLog for that ext: twitter.com/hashtag/DataPreview?sr...

Btw, I loved your prior post on vscode shortcuts. I've been using code since it first came out and there were some shortcuts you listed I was not aware of.

Collapse
 
analizapandac profile image
Ana Liza Pandac

Snippets are awesome. I was in a meetup tonight where the speaker only has 20 minutes to present and do a detailed walk through of how he builds the app. He used snippets a lot and that's how he was able to complete creating a working app in that amount of time. I was really amazed by the usefulness of this one.

Collapse
 
jsmanifest profile image
jsmanifest

It's a very powerful feature indeed!

Collapse
 
jemmyw profile image
Jeremy Wells

I'd also point out that the vim plugin for vscode is really good, and provides several of these in one, as it supports surround (change between quote types ci"), align (column editing) and sort (:!sort).

Collapse
 
markel profile image
Markel F.

You convinced me on: Better Comments, Docsify, Color Picker, Settings Sync, TODO Tree.

Also interested on the REST Client. Meanwhile, I already had installed a few like Prettify or Bracket Pair Colorizer 😁.

Collapse
 
foresthoffman profile image
Forest Hoffman

3. Bracker Pair Colorizer

^ There appears to be a rogue "r" hanging out here.


👍 Settings Sync!

Rewrap is really great! It auto-wraps comments that are over a specific length. If you have a doc-block, it will adjust all the lines within the block to make the comment fit. I've found it very convenient.

Collapse
 
drewtownchi profile image
Drew Town

Rainbow Indent and Toggle Quotes are great new editions to my VSCode extension collection. Thanks for putting this list together.

Collapse
 
malagutti profile image
Anderson

Great list, thanks for sharing!

Collapse
 
albertodeago88 profile image
Alberto De Agostini

Jesus some are life changer

Collapse
 
redhedded1 profile image
Larry A. Ball

Superb, thank you so much!

Collapse
 
jsmanifest profile image
jsmanifest

Your welcome!

Collapse
 
douglasfugazi profile image
Douglas Fugazi

Thanks for sharing, I've been using some of them and all are boosting my VSCode :)

Collapse
 
ahmedfarag36 profile image
Ahmed Farag

Thank you for the great article, but what do you think if I install more extensions, would it eat more ram?

Collapse
 
przpl profile image
przpl

How can I get font from 10th screenshot?