Using the JavaScript console in Visual Studio Code
Some time ago I published an article about the JavaScript console in Sublime Text. It’s turned out to be one of the most popular articles on this website. As I recently changed my code editor from Sublime Text to VSCode I found a solution to replicate this functionality.
Similar to Build Systems in Sublime Text, Visual Studio Code comes with Tasks that allows us to pass a file to an external program without manually switching between the code editor and the Terminal. This is essentially all that we need to do — pass a currently active file to a JavaScript interpreter (Node in this case - so make sure it is installed on your computer).
Create JavaScript / Node task in VSCode
A VSCode Task is a set of instructions in a JSON file that resides in our projects file. Unfortunately at this moment it isn’t possible to create globally available tasks — they need to be added per project. The good news is that the development of VSCode is rapid so we may see global tasks appear very soon as I’m not the only one who wants this feature. To create a Task hit cmd + shift + p on Mac, ctrl + shift + p on Windows / Linux or simply F1 on any platform to show the Command Palette, type “Tasks: Configure Task” then “Create tasks.json file from template” and choose “Others” from the list. Time to configure the task.
{
"version": "2.0.0",
"tasks": [
{
"label": "Show in console",
"type": "shell",
"osx": {
"command": "/usr/local/bin/node ${file}"
},
"linux": {
"command": "/usr/bin/node ${file}"
},
"windows": {
"command": "C:\\Program Files\\nodejs\\node.exe ${file}"
},
"group": {
"kind": "build",
"isDefault": true
}
}
]
}
OK, so what is going on here? When we run a task called “Show in console” this will run a shell command that takes our currently opened file as an argument preceded by the path to our node executable. To make things even easier the group.kind property lets us run this task via shift + cmd + b keyboard shortcut.
In most cases the “node” in command property does the job instead of passing a full path. I found this method more reliable though. The path can vary depending on operating system, version and installation method. Update command according to the output of which node. On Windows the equivalent command is where node.
Time for the fun bit! Create an amazing script and enjoy the instant output in your code editor by pressing shift + cmd + b or by running the “Show in console” task from the Command Palette. Hopefully this helped you out. Stay curious and build amazing things!
Is there any way to start a terminal by requiring the file (`node -r ${file}`) instead of just running it?
I don't know about feature like this. Sorry :(
I like it, but I really missed the Interactive Window from Node.js Tools for Visual Studio. So I made a extension using Node.js REPL right in VS Code. Please try it out at https://marketplace.visuals...
love it. can't seem to get a console to open like in the market place page , but shows my output in the file. Realtime. Zero jumping around.
I can't seem to get it to work.
There's a problem that says I need the "label" property.
The Output tab is always blank, and when I press cmd+shift+B it goes to the terminal, which runs some error messages.
The Debug console shows the code's console log, but in your gif it runs in the output.
Do you know where I went wrong here?
The pics below are after I saved and ran the task. https://uploads.disquscdn.c... https://uploads.disquscdn.c... https://uploads.disquscdn.c...
Awesome! I'm trying this on Windows but I get the following error: "The term 'C:\Program' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name, or if a path was included, verify that the path is correct and
try again."
Do you have any idea how to solve it?
I've checked the path for nodejs and it's correct.
Sorry but I am macOS user and it makes me almost impossible to help you on this one :(
This is a known issue in vscode https://github.com/Microsof... the way you fix this is to check if node is on your PATH (this is default instalation, cmd node to check) and if so, just use "command": "node.exe ${file}". I hope this helps!
Thanks for your contribution and help @anibalismo:disqus!
You can easily solve this by adding single quotes to the following line in the task code:
"command": "C:\\'Program Files'\\nodejs\\node.exe ${file}"This happens because the folder name "Program Files" is two words with a space in the middle. In fact, the script is searching for a folder named "Program" and can't find it and throws an error. You can avoid this error by putting the complete folder name in single quotes. I hope this can help.
I had the same issue and the above solution helped me, but then I got a second similar error regarding the path of my VSCode project because in the path of the project I had a folder name which included space. I couldn't find a way to solve this except by changing my projects folder to one with no space in its path. Please share if you find a solution for this second problem of mine.
this thing can be made to work by installing code runner extension from vscode market place . and after that adding the following code in settings.json
"code-runner.executorMap": {
"javascript": "node",
"java": "cd $dir && javac $fileName && java $fileNameWithoutExt",
"c": "cd $dir && gcc $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
"cpp": "cd $dir && g++ $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
"objective-c": "cd $dir && gcc -framework Cocoa $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
"php": "php",
"python": "python3 -u",
"perl": "perl",
"perl6": "perl6",
"ruby": "ruby",
"go": "go run",
"lua": "lua",
"groovy": "groovy",
"powershell": "powershell -ExecutionPolicy ByPass -File",
"bat": "cmd /c",
"shellscript": "bash",
"fsharp": "fsi",
"csharp": "scriptcs",
"vbscript": "cscript //Nologo",
"typescript": "ts-node",
"coffeescript": "coffee",
"scala": "scala",
"swift": "swift",
"julia": "julia",
"crystal": "crystal",
"ocaml": "ocaml",
"r": "Rscript",
"applescript": "osascript",
"clojure": "lein exec",
"haxe": "haxe --cwd $dirWithoutTrailingSlash --run $fileNameWithoutExt",
"rust": "cd $dir && rustc $fileName && $dir$fileNameWithoutExt",
"racket": "racket",
"scheme": "csi -script",
"ahk": "autohotkey",
"autoit": "autoit3",
"dart": "dart",
"pascal": "cd $dir && fpc $fileName && $dir$fileNameWithoutExt",
"d": "cd $dir && dmd $fileName && $dir$fileNameWithoutExt",
"haskell": "runhaskell",
"nim": "nim compile --verbosity:0 --hints:off --run",
"lisp": "sbcl --script",
"kit": "kitc --run",
"v": "v run"
},
I have changed only executor map for javascript here to node as you can see here.
"code-runner.executorMap": {
"javascript": "node",
"java": "cd $dir && javac $fileName && java $fileNameWithoutExt",
"c": "cd $dir && gcc $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
"cpp": "cd $dir && g++ $fileName -o $fileNameWithoutExt && $dir$fileNameWithoutExt",
"objective-c": "cd $dir && gcc -framework Cocoa $fileName -o $fileNameWithoutE
I hope you'll update this. For instance, taskName is now deprecated in favor of a less confusing name "label". Currently the newest doc is: https://code.visualstudio.c...
Great suggestion. Thanks a lot @aderchox:disqus