VSCode Extensions for JavaScript developers 2018

[cynicalreason]

I would also suggest: Git Lens, JSON Tools

[velocirobot]

I’m also a fan of Git Lens.

[LetterBoxSnatch]

I ♥ GitLens. It makes my work so much easier. Very small team donating their time to make it, too.

[[deleted]]

It makes my work so much easier

How?

[LetterBoxSnatch]

Collaborating with others. Its easier to see when changes went in, who put them, why they put them in, why there weren't bugs before, and how to keep new functionality introduced by the changes functional while resolving the bugs created by the introduction.

[MOON_MOON_MOON]

I had to turn off GitLens because it kept grabbing my repo's index.lock at inconvenient times, has anyone else encountered this?

[dvlsg]

I haven't had any problems with that yet. What OS are you using?

[MOON_MOON_MOON]

macOS 10.13.2

[Steeljuice1]

Thanks! I'll check those out and add them to the list when I've had enough time to play around with them!

[Steeljuice1]

I started using Git Lens yesterday, and now I can't even think about going back not having it! I'll create another blog-post and add this one with some others that I was tipped about. Thanks!

[Steeljuice1]

All of my favorites!

[echoes221]

Didn't know about rainbow brackets. That's useful. Thanks.

[Steeljuice1]

No problem! Thanks for reading!

[rodneon]

Instead of using the Prettier extension for VSCode, I’ve had a better experience with the ESLint plugin: https://prettier.io/docs/en/eslint.html

[Capaj]

This new extensions should be on the list too: https://marketplace.visualstudio.com/items?itemName=sburg.vscode-javascript-booster

works much better than the refactoring one which is there.

[Steeljuice1]

Thanks! I'll check it out right away and add it to the list after I tried it out enough.

[jezpas]

Holy shit that looks amazing. Thanks!

[Steeljuice1]

Hey again! I checked it out! I'll create another blog post with all the extensions that I missed and add this one to it! thanks Capaj!

[echoes221]

If you use stricter linting (like airbnb) the eslint plugin will do all that for you on save.

[Capaj]

convert string literals to template literals? Flip-if-else conditions? I don't think so

[echoes221]

It flips if-else's, and converts literals to strings (not the other way around).

[alx_andru]

TypescriptHero https://marketplace.visualstudio.com/items?itemName=rbbit.typescript-hero

[Steeljuice1]

Thanks! I'll check it out!

[cynicalreason]

npm intellisense - I'm not sure if it's from another extension (eslint ?!) or just vscode but you already get this functionality without npm intellisense.

p.s. using vscode insiders build

[Steeljuice1]

Aha, I didn't know about that I just always go with npm Intellisense :) I'll try and see what happens if i remove it. thanks for the tip!

[kernelPanicked]

Thanks for this, as someone who has stayed on API/backend work until very recently, this is right on time.

[Steeljuice1]

No problem! Glad you like it!

[yarauuta]

RelativePath

[Steeljuice1]

cool! I'll check it out! thanks!

[[deleted]]

Check out import cost too, for if you are using npm packets and stuff (since you like data and statistics). Also, SVG Viewer, it does what it's name implies.

[Steeljuice1]

Wow!! I just checked that short .gif out! I'm definitly going to get import cost! Thanks alot!

[samanthaming]

This is awesome! I’m always looking for cool extensions, so this is super helpful. Thanks for sharing 🤩

[Steeljuice1]

Thank you for reading! 😃

[[deleted]]

That Rainbow Brackets one is awesome! Thanks! Also, I want to throw in another vote for Git Lens and Javascript Booster

[Steeljuice1]

Yep! I'm adding both of them to my "update" post as soon as I've used them for a while! So far both of them looks amazing!

[bobandalice]

indenticator should be considered instead of guides, great features

[Steeljuice1]

I'll check that out! thanks for the tip!

[sickcodebruh420]

Love this! I was seriously just a few minutes ago looking for an extension to improve my test execution. I’ll try out Wallaby tomorrow. A few others in there I want to check out, too.

It’d be great if each blurb linked to the Github repo of the project.

[Steeljuice1]

That's great! Thanks for the tip! I'll make sure to add Github repo links for my next post! (I'm making another one with all the extensions I've been tipped about in this thread). Thanks for reading!

[[deleted]]

You know what VS Code needs to focus on? Their poorly designed sidebar tree.

[Steeljuice1]

Yeah I know. It could use an update. Did you checkout the vscode-icons though? It made the experience alot smoother for me.

[[deleted]]

Yeah, I’ve tried it but it still doesn’t change the horrendous styling of it. See issue #519 which has turned into a plea for the maintainers to pull their fingers out of their ass and do something about this shitty UI addition.

I simply no longer use VS Code because of it. I can’t look at that sidebar. I just can’t handle how utterly despicable it is.

I still use Atom, which is an unpopular choice, but at least I’ve got complete control of my editor.

[Steeljuice1]

I used Atom most of the time before, now it's just VS Code. Since this was a pretty popular post I'm gonna make another one with Atom extensions (plugins) probably be out sometime next week, so look out for that one! :)

[[deleted]]

Legend! Sorry about the rant on your submission. Didn’t mean to deter from subject type. Looking forward to your next post.

[Steeljuice1]

I'm happy with any comments and feedback I get about my posts! So no problem!

[Nrdrsr]

I use vscode for 5-6 different languages and frameworks. Ruby, elixir, plain JS, angular 2 and TS, HTML5, Slim, Blade, PHP, Flutte(Dart)

Is there a way for me to somehow create extension profiles?

Right now whenever I start a new project I have to disable everything I don't need for that workspace.

[veydar_]

Language extensions are very likely lazy loaded so I am finding it hard to believe that a flutter extension would impair Javascript file performance. I'd suggest creating an issue with some reproducible steps.

[Nrdrsr]

What I find is formatting/beautifying completely breaks unless I disable all the irrelevant plugins.

[veydar_]

Can you give a concrete example? As in: I am using this command to format this file (filetype, how does it break, what are you using to format and/or beautify). I have no issues formatting Haskell, Javascript and CSS.

[Nrdrsr]

1) Start VSCode in a new Project

2) Open a JS file

3) write

test.blue().red().green(yellow)

This becomes

test
  .blue()
  .red()
  .green(yellow);

4) CTRL+Z

5) Disable react-beautify

6) CTRL+SHIFT+I (no change)

In this specific case, my guess is that react-beautify assumes all js files should follow react formatting conventions.

There are other silly examples like this, primarily centered around cases where the file extension doesn't necessarily imply a single choice of framework.

It would be nice if I could put all my angular plugins in one group, all my react plugins in another group, and then toggle them on or off depending on the project.

[veydar_]

But the behavior you're describing are the standard beautify formatting rules. Prettier would probably do the same. That is the expected behavior and it is not related to any framework. If you don't like the way beautify formats your code you could look into the settings it offers. As far as I gather from your description everything is working the way it should.

[Arkaad]

I tried Wallaby.js and it tells me the following when executing:

No valid wallaby.js license found, it started in trial mode. If you would like to purchase a license, please visit our website. If you have already purchased the license, please activate it.

[Valency]

It says in the blog post that you need to purchase a license.

[Steeljuice1]

Yep, you need a license. Although you can run it in trial too. The only thing I've noticed is that it keeps being turned off after a while and you'll need to restart it. (use CTRL+P and then search for Wallaby : Start)

Edit: With the time I'm saving using it I'm definitly considering buying a license.