r/javascript • u/Steeljuice1 • Mar 25 '18
VSCode Extensions for JavaScript developers 2018
http://www.snappyjs.com/2018/03/25/vscode-extensions-for-javascript-developers/24
u/Capaj Mar 25 '18
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.
6
u/Steeljuice1 Mar 25 '18
Thanks! I'll check it out right away and add it to the list after I tried it out enough.
2
u/Steeljuice1 Mar 26 '18
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!
3
1
u/echoes221 Mar 27 '18
If you use stricter linting (like airbnb) the eslint plugin will do all that for you on save.
2
u/Capaj Mar 27 '18
convert string literals to template literals? Flip-if-else conditions? I don't think so
1
u/echoes221 Mar 27 '18
It flips if-else's, and converts literals to strings (not the other way around).
8
u/cynicalreason Mar 25 '18
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
4
u/Steeljuice1 Mar 25 '18
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!
6
u/kernelPanicked Mar 25 '18
Thanks for this, as someone who has stayed on API/backend work until very recently, this is right on time.
2
5
5
Mar 25 '18
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.
2
u/Steeljuice1 Mar 26 '18
Wow!! I just checked that short .gif out! I'm definitly going to get import cost! Thanks alot!
4
u/samanthaming Mar 25 '18
This is awesome! I’m always looking for cool extensions, so this is super helpful. Thanks for sharing 🤩
1
4
Mar 25 '18
That Rainbow Brackets one is awesome! Thanks! Also, I want to throw in another vote for Git Lens and Javascript Booster
1
u/Steeljuice1 Mar 26 '18
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!
3
3
u/sickcodebruh420 Mar 26 '18
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.
1
u/Steeljuice1 Mar 26 '18
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!
3
Mar 26 '18
You know what VS Code needs to focus on? Their poorly designed sidebar tree.
2
u/Steeljuice1 Mar 26 '18
Yeah I know. It could use an update. Did you checkout the vscode-icons though? It made the experience alot smoother for me.
2
Mar 26 '18
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.
2
u/Steeljuice1 Mar 26 '18
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! :)
1
Mar 26 '18
Legend! Sorry about the rant on your submission. Didn’t mean to deter from subject type. Looking forward to your next post.
1
u/Steeljuice1 Mar 26 '18
I'm happy with any comments and feedback I get about my posts! So no problem!
1
u/Arkaad Mar 26 '18
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.
1
u/Steeljuice1 Mar 26 '18
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.
2
3
u/Nrdrsr Mar 25 '18
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.
2
u/veydar_ Mar 26 '18
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.
2
u/Nrdrsr Mar 26 '18
What I find is formatting/beautifying completely breaks unless I disable all the irrelevant plugins.
1
u/veydar_ Mar 26 '18
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.
2
u/Nrdrsr Mar 27 '18
Start VSCode in a new Project
Open a JS file
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.
2
u/veydar_ Mar 27 '18
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.
0
Mar 25 '18
[deleted]
4
2
1
u/rodneon Mar 26 '18
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
35
u/cynicalreason Mar 25 '18
I would also suggest: Git Lens, JSON Tools