How to setup Javascript in Visual Studio Code(VSC) (and other languages)

I’m trying to get started using VSC but I can’t setup Javascript so it can run. What do I have to do to get it to work? Should i use another editor instead?

What do you mean by getting it to run?

To run JS you either need to be in a browser or have Node running to process your code via the terminal.

VS Code is just the editor.

Install Quokka, then you can run JS code within the editor, in real -time, and see the variable values.

5 Likes

Visual Studio Code Is Just An Editor… It can Detect JavaScript Syntax. If you wanna run JavaScript use your Browser, And In Your Browser you can even run the console to test it:
In FireFox: Ctrl + Shift + K
Chrome: Ctrl + Shift + i
And for other browsers you can google.

another sample :slight_smile:
Of course, there is no DOM when you’re running JS within VSCode.

2 Likes

Ooooh. Quokka looks interesting - I’ll have to have a play with that later!

That is a swweeet setup! I’ve been averse to using IDEs as a new developer; my impression is that you should first hone your skills using just a text editor.
I really enjoy Atom, but, looking your VSCode/Quokka footage above is making me want to switch. Is that wrong?

Well, here’s my personal opinion. And I’ve used text editors without autocompletion from 1997-2013 est.

To me, autocompletion has saved me time/debugging due to mistakes caused by wrong/typo variable names or function names.

Look, It’s not like auto-completion is artificial intelligence, it’s not doing the thinking for you. It doesn’t work like that. You still have to do your own thinking.

But if autocompletion can help me avoid typos, or give me hints when entering the file path, or help me in little things like color codes, yeah… I’ll gladly take the help, so I can save my braincells to actual problem solving and leave the minor details to autocompletion. :slight_smile:

I don’t have to worry about little things like exact filepath, filename, or color codes. But see below, it doesn’t pick up that I’m using an img tag and linking to a source code, and not an image file. It’s not an artificial intelligence that will save you from making logical mistakes.

And if you really don’t want autocompletion help, then just UNINSTALL that plugin. Done. :slight_smile:

In fact, the auto-completion of VSCode is still primitive compared to it’s bigger brother, Visual Studio… VS knows all the classes, functions, methods, properties related to your program. If you’re learning a new language, or not familiar with what methods, properties, classes available to you, VStudio’s auto-completion is almost magical.

Now, back to VSCode and Quokka. If you’re learning Javascript and algorithms, being able to see the values of your different variables in your algorithm as you type them could make for faster development or easier debugging. No more console.log scattered throughout your code. The values of the variables are printed right beside your JS code. I think this helps in learning even!

3 Likes

I have installed the chrome extension but it doesn’t connect to the localhost.

Ater installing Quokka, I got this error: “Could not install typings files for JavaScript language features”.Any suggestions?

Do you have nodejs installed on your machine?
https://quokkajs.com/docs/configuration.html#nodejs-version

Just did. What do I do next?

How do I install npm globally?

Thanks so much for that detailed sales pitch @owel haha!.
I will consider these points. I especially like the feature of seeing your variables.
I still think it’s right to start with a simple text editor, but having been at it for 10 months I think I get the basics quite well.
Cheers __

Just so you know, you don’t have to leave Atom to use Quokka.

Although I haven’t actually used that package, but I have used Hydrogen, which is similar and works really well for me.

1 Like

Cool, thanks @thancock20! I’ll check it out.