83

I am writing javascript and am currently doing simple exercises/programs. At times, I wish to run my file for testing purposes. I am aware I could create an HTML file and do this within the console. In Sublime, there exists a way to "build" the current file and immediately see the results (say, whatever is sent to console.log).

With VS Code, it seems that for every file I want to "build"/debug in this manner, I must manually change the launch.json file to reflect the name of the current program.

I have been researching a way around this, and I learned that there are variables like ${file} , but when I use that in the launch.json "program" attribute, for example:

"program": "${workspaceRoot}/${file}"

with or without the workspaceRoot part, I get the following error:

Attribute "program" does not exist" (file name here). 

Am I missing a simple way to accomplish this, or must I keep editing launch.json every time I want to run the file?

Thanks in advance!

1
  • I thinks this one has an update. Now we can just debug a js file directly by pressing the debug start button. Unless there is a config already there. It starts debugging current file automatically. May 5, 2019 at 10:47

4 Answers 4

182

Change to:

"program": "${file}"
5
  • I use different names to debug different files in the project and delete the entry from launch.json file once I'm done.
    – zubair1024
    Jan 8, 2018 at 10:59
  • @jdb79 You should accept the answer by clicking the green tick on the left Apr 9, 2018 at 7:58
  • 6
    I also added on occasion "cwd": "${fileDirname}" to make it start in the current file's folder (useful for instance when loading files using a relative path to the current file's location - eg: fs.readFile('./somefile.txt')) Sep 18, 2018 at 21:13
  • 1
    and there's more: code.visualstudio.com/docs/editor/variables-reference Jun 9, 2020 at 2:38
  • I'm doing this but whenever I press F5 it opens the current file in a new readonly editor tab.
    – riv
    Sep 7 at 16:48
72

For reference this is the full launch.json

{
  "launch": {
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Node.js - Debug Current File",
        "type": "node",
        "request": "launch",
        "program": "${file}"
      }
    ]
  }
}
3
  • In my project's launch.json there is entry "name": "Launch Program", will it make difference instead of "Debug File" use "Launch Program" ?
    – vikramvi
    Apr 12, 2019 at 8:57
  • @vikramvi no difference, it is only for reference (eg it will show in status bar the name of current active task) Nov 8, 2019 at 20:59
  • What makes a diff is type I think: you can have similar configuration objects, but having diffs in the name and type keys. type is the language.
    – Timo
    Mar 23, 2021 at 8:56
7

There are many different ways you may need to access a file that are provided by Predefined variables:

Supposing that you have the following requirements:

  • A file located at /home/your-username/your-project/folder/file.ext opened in your editor;
  • The directory /home/your-username/your-project opened as your root workspace.

So you will have the following values for each variable:

  • ${userHome} - /home/your-username
  • ${workspaceFolder} - /home/your-username/your-project
  • ${workspaceFolderBasename} - your-project
  • ${file} - /home/your-username/your-project/folder/file.ext
  • ${fileWorkspaceFolder} - /home/your-username/your-project
  • ${relativeFile} - folder/file.ext
  • ${relativeFileDirname} - folder
  • ${fileBasename} - file.ext
  • ${fileBasenameNoExtension} - file
  • ${fileDirname} - /home/your-username/your-project/folder
  • ${fileExtname} - .ext
  • ${lineNumber} - line number of the cursor
  • ${selectedText} - text selected in your code editor
  • ${execPath} - location of Code.exe
  • ${pathSeparator} - / on macOS or linux, \ on Windows
1

For a single file, you can skip the launch.json file entirely. Just click the green arrow in the debugger panel and choose Node as your environment.

From here.

3
  • 4
    If you have no launch config setup yet, then clicking the green arrow will give you a choice of environments and then create the launch file with an item in it. Otherwise, the green arrow will run the selected item in the droplist. Jul 9, 2019 at 10:41
  • Or just press F5 Nov 8, 2019 at 21:00
  • Re @MichaelCurrin -- looks like a package.json with a main or bin entry may also force running the file listed there, not the active one in VS Code.
    – ruffin
    Mar 22 at 17:53

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.