Questions About Vanilla Javascript in VS-Code

JavaScript
1

Im starting to learn javascript and im using Visual Studio Code.
The problem im having is that when I type a very simple code for Hello World in javascript
my VSC IDE spills out errors , something to the fact of needing node, blah blah blah blah…

I DONT want to be installing frameworks just to use vanilla javascript because I want to learn “vanilla” javascript
without having to use all the fluff of frameworks and extensions and addons for this and that and the other.
I just want to be able to use Vanilla javascript and execute code, so I can learn vanilla javascript.

A bunch of my friends are telling me “you have to install this framework and that framework and that framework”. “and this addon and that addon, and install this install that. and the other” - holy crap… I respond to them with - I just want to use vanilla javascript thats it nothing else…
and at the end im winding up using so much stuff just to use javascript. - I dont want all the fluff,
I just want to be able to learn and write vanilla javascript.

Is node.js framework mandatory to use javascript ??
I thought javascript could be used by itself without all these massive attachments and addons just to get it to work…

.

3

Hi Randell,

Thanks for responding :smiley:
I am not using the HTML script tactic as you described, as many lessons I read & watched says dont do that.
I have js on a separate file completely, I only have a file names javascriptlessons.js
in which I practice things within that file as I am learning.

for example this

var hello = "hello world";
console.log (hello)

Then would like to use the IDE itself to be able to execute the code to see if I learned correctly and coded correctly.
then I delete that code and using the same javascriptlessons.js file, ill do another thing I am taught so on and so forth.
as I go along with lessons.
I dont want to install a bunch of crap without learning the fundamentals of javascript such as addons, frameworks and a bunch of other stuff.
The IDE is kinda misleading when microsoft says , just install javascript extension for VS-Code to use javascript in the IDE,
when im constantly being told I need to install a bunch of crap to get it to work (if you know what I mean)…lol
I dont want to wind up with a thousand applications installed just to use and learn javascript.

.

5

Some clarifications:

  1. nodejs is not a framework it’s a javascript runtime
  2. because it’s a runtime, you’ll need to install it if you wish to allow vscode to actually run code

This is important because you need a javascript runtime to actually read and execute javascript code. If you wanted to use ruby, then you’d have to install ruby. But javascript is not executable. Hence you need the runtime.

And there are only 2 runtimes that execute javascript:

  1. the browser (webkit, spidermonkey, etc)
  2. nodejs

Vscode is built on electron which uses node underneath. But you don’t have access to that runtime for security reasons. You only have access to your machine’s nodejs runtime.

So yes, you’ll have to install it. Not because it’s needed to learn vanilla javascript. But because you need it to parse and execute the code you want to run.

5 Likes
7

Thank you very very much @JM-Mendez
Thank you for clarifying it. Now I have a better understanding about it.

My friend stuffed so much crap into my VS Code IDE, I cleared out everything.
I will now just install javascript extension within VSC and node.js
You made it much more easier for me, thank you so very very much.
If you have a youtube video and teach things like this, Please give me link. :slight_smile:
I love how you explain things. Thank you @JM-Mendez

Also thank you Randell :smiley:
Thank you both for having so much patience with a frustrated new coder :smiley:

1 Like
8

I don’t know about video regarding this question, but I’ve watched and am subscribed to these. I find their teaching style relatable.


1 Like
9

Hi, sorry to piggy-back on this thread but I was having the same confusion myself earlier this week!
I thankfully figured out that node was the required run-time a couple of days ago, and have now successfully installed it and VSCode together.

However, I’m finding that the debugger is unbearably slow to start up in VScode - its taking about 3 seconds to launch a simple “hello world” program.

I’ve been asking around on support forums for VScode and node, but haven’t had many responses - I don’t suppose you have any ideas if there is anything I can do to speed it up?

I’ve tried both manually setting the launch.json, and selecting the “add configuration”, but it doesn’t seem to have any effect.

I’m running Win 10 on a laptop with I5-6200U 2.3ghz CPU, and 8Gig DDR4 memory - a couple of people have said they don’t think that my specs would explain the delay though.

My laptop is otherwise working fine, and VScode doesn’t seem to be lagging itself.

I’ve tried manually starting the node debugger from the command-line and it begins instantly.

Any ideas? I’m terribly frustrated, as I just want to get on with learning to program!

10

Can you upload to github or somewhere else a copy of that project folder, including the hidden .vscode dir? And also step by step instructions on how to reproduce your issue? I won’t be able to help you without that.

11

Oh, if you’re just trying to use vscode for FCC, then install this extension

https://marketplace.visualstudio.com/items?itemName=formulahendry.code-runner

You can console.log to the bottom panel. The debugger has to load itself each and every time you run it, as well as the node runtime because you’re just running a simple script that exits. If you use it on a running app, then it only loads once.

But you’ll notice the same issue with the coderunner. It’s just slightly faster since it runs the script directly with node, without the debugger.

12

I’ll definitely install that extension in the morning and give it a go!
Will also put up the code on github tomorrow, if you don’t mind having a look - I’ll post the link here.

Thanks so much for replying, this has been driving me insane!

13

I know exactly how you feel. It was a struggle for me at first. It’s be happy if I can ease that pain for someone else.

14

This article showed up on my medium feed today. If you do nothing else, at least add eslint and prettier. It will help you avoid some silly mistakes.

15

Thanks, I’ll read that article now and add the extensions!

I’ve put the code I was testing onto github as gists, and linked below:
If I call node via the command-line with any of the following, it launches and completes instantaneously (even if I make the call in the integrated command-line within VSCode)

node --inspect ./app.js
node --inspect-brk ./app.js 
node --inspect-brk=3344 ./app.js

Its only if I launch from VSCode itself (press F5 or press the play button in the Debug side-panel) that I’m getting the 3 second delay

my test program:

contents of .vscode:

16

There’s something wrong with your gist links. They’re not showing up properly for me.

In the meantime, you can try these troubleshooting steps.

It might have problems locating your executable in your PATH, so in the integrated terminal type

which node

That’s your executable path.

# then in launch.json
"configurations": [
        {
            "type": "node",
            "request": "launch",
            "name": "Launch Program",
           # add these lines including the file extension
            "runtimeExecutable": "path-to-node-executable.exe",
            "protocol": "inspector",
# ...

Since you’re on windows, try turning off any antivirus if you have it on. There may be a conflict there.

17

Hi again.

I’ve edited the gist links, so I think they should be readable now.

I’ve tried manually adding the two lines you suggested with my node path inserted, but it doesn’t seem to have had any effect. :frowning:

I also double-checked the windows path environment variable and the node and npm paths appear included correctly.

Do you get a similar lag if you debug a program as short as mine one your system?

Thanks for the code-runner extension recommendation btw!
It’s got me back working through FCC exercises in VScode in the meantime - I’d realised I’d got sidetracked by this instead of getting on with other things!

EDIT - just remembered about the antivirus suggestion, I’ll try turning that off now

18

Just tried turning off Windows defended and Malwarebytes, no change either I’m afraid

19

Ok, just tested your setup. There’s nothing wrong with it.

The speed difference you’re seeing is because when vscode launches the debugger, it has to load the debug extension before calling the node debug runtime. And when you use the terminal, you’re calling node directly.

Look at the image below to see how the debugger architecture looks like. As you can see there’s an extra step before the UI can show the results.

Once the debugger has launched, it goes back to normal speed. But since your code exits out, the debugger has to load every single time. The debugger is not really meant to test single files.

The best tool for FCC would be the code-runner extension. It only has to load the node runtime.


debug-arch
debug-arch927×680 142 KB

1 Like
20

You’re an absolute legend!
Really appreciate you taking the time to help, and especially for linking resources and that picture.
Feel like I’ve now learnt a lot from something that a couple of days ago was just giving me a headache!

21

This makes it all worth it to me. Happy coding! :slight_smile:

1 Like