Open workspace when testing VS Code extension - visual-studio-code

I am writing a test suite for my VS Code extension using vscode-extension-tester, and my tests need to involve the opening of a workspace file. I need the workspace file to be opened as soon as the browser is launched, in order for my subsequent tests to pass.
I am able to open the workspace file as a separate test; however, I was wondering if there's any setting that allows the workspace to be opened before any test is launched. Is there a way to do this with vscode-extension-tester?

The way I handle this is through my launch configuration (launch.json).
Using an extensionHost type launch configuration you can pass a workspace file. This means that the code instance will open with the given workspace active whenever you execute it.
For example:
{
"version": "0.2.0",
"configurations": [
{
"name": "Run Extension",
"type": "extensionHost",
"request": "launch",
"args": [
"${workspaceFolder}/src/test/workspace/workspace.code-workspace",
"--extensionDevelopmentPath=${workspaceFolder}"
],
"outFiles": [
"${workspaceFolder}/dist/**/*.js"
],
"preLaunchTask": "${defaultBuildTask}"
},
{
"name": "Extension Tests",
"type": "extensionHost",
"request": "launch",
"args": [
"${workspaceFolder}/src/test/workspace/workspace.code-workspace",
"--extensionDevelopmentPath=${workspaceFolder}",
"--extensionTestsPath=${workspaceFolder}/out/test/suite/index"
],
"outFiles": [
"${workspaceFolder}/out/**/*.js",
"${workspaceFolder}/dist/**/*.js"
],
"preLaunchTask": "tasks: watch-tests"
}
]
}
Note the path to workspace.code-workspace that is specified as an arg to both of these launch configs.
You will likely already have launch configs like this for running and testing your extension if you used Yo Code to generate your extension at the start of development.
So in summary:
Create your workspace
Store the workspace file accordingly (for me it made sense to be within ./src/test)
Configure extensionHost type launch configs with a path to the workspace file given as an arg in the args array.

Related

How to continue debug VSCode extension when extension open new windows?

I press F5 to debug a VSCode extension and VSCode will open a new window that will contain the extension. The extension will open a new VSCode window to open a specific project. But this new VSCode window didn't contain the extension and I can't debug it anymore. What can I do? 😩
Not sure if you are looking for a specific extension. If you have already installed the debugger extension, Try to uninstall/reinstall.
Your automatically generated extension launch configuration should look like this:
{
"version": "0.2.0",
"configurations": [
{
"name": "Run Extension",
"type": "extensionHost",
"request": "launch",
"runtimeExecutable": "${execPath}",
"args": [
"${workspaceFolder}/../OneDrive/Test Bed", // add the path here
"--extensionDevelopmentPath=${workspaceFolder}"
]
},
{
"name": "Extension Tests",
"type": "extensionHost",
"request": "launch",
"runtimeExecutable": "${execPath}",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}",
"--extensionTestsPath=${workspaceFolder}/test/suite/index"
]
}
]
}
You see in the Run Extension configuration that I added a path from the extension's ${workspaceFolder} up one level and then into my OneDrive folder to another folder named Test Bed. That Test Bed folder will be opened in the first ExtensionHost window that is opened when you F5 and you can debug the extension using that folder immediately.

How do I get new HTML files to execute in VS Code?

I have recently started learning WebDev using Colt Steele Udemy course. I've created few HTML files and whenever I try to execute any of them only the first created .html file opens in Chrome. How do I get the other files to open in the browser. Eg: If I create 3 files i.e a.html, b.html & c.html only a.html opens in Chrome even if b/c is open in the editor. This happens with both debugging or run without debugging. My VS Code version is 1.65.2. Please advice.
The launch.json code is:
"version": "0.2.0",
"configurations": [
{
"type": "pwa-chrome",
"request": "launch",
"name": "Open a.html",
"file": "e:\\\\Colt Steele\\HTML the essentials\\a.html"
}
The launch configuration you're showing is telling VSCode what to do when running the project. You can change the launch configuration to open a different file by default:
{
"type": "pwa-chrome",
"request": "launch",
"name": "Open b.html",
"file": "e:\\\\Colt Steele\\HTML the essentials\\b.html"
}
Or perhaps add multiple launch configurations, which you can select when debugging/running:
{
"type": "pwa-chrome",
"request": "launch",
"name": "Open a.html",
"file": "e:\\\\Colt Steele\\HTML the essentials\\a.html"
},
{
"type": "pwa-chrome",
"request": "launch",
"name": "Open b.html",
"file": "e:\\\\Colt Steele\\HTML the essentials\\b.html"
}
In general any given "application" would have a single default page as the entry point, and from there you can navigate through the application to use the other pages. So you might have a single index.html as the launch file, and in whatever you're building there would be links to other files as needed for the application.
But if what you're building for whatever reason truly has different "entry points" then you can just set up your build configurations based on that and select which configuration to use when running the application.
Alternatively (and I haven't tested this), you should be able to tell it to launch "the current file" by using a variable called file in the launch config:
{
"type": "pwa-chrome",
"request": "launch",
"name": "Open Current File",
"program": "${file}"
}

Current Working Directory on vscode extensionHost launch

I did some theme development in the past and wanted to update it. Unfortunately, I didn't save my previous launch.json and it's missing functionality to open files on f5.
Only option I find is cwd, but it isn't working.
{
"version": "0.2.0",
"configurations": [
{
"name": "Extension",
"type": "extensionHost",
"request": "launch",
"runtimeExecutabl5e": "${execPath}",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}"
],
},
]
}
I am sure, I did use to open files inside vscode opened by launch task while developing a new theme. That's how I did testing for syntax highlighting (by opening different files on launch inside of the vscode with developed extension )...
What's changed and how to make it work again?
So... to open file or folder in vscode you need to provide it as last argument for args. In my case, launch.json will looks like this:
{
"version": "0.2.0",
"configurations": [
{
"name": "Extension",
"type": "extensionHost",
"request": "launch",
"args": [
"--extensionDevelopmentPath=${workspaceFolder}",
"--disable-extensions",
"${workspaceFolder}/examples"
],
},
]
}

Can not change debug environment automatically on visual studio code with config

For example, my root workstation directory is /home/chain/Project. And I have two separate projects which is python and website. My launch.json goes:
{
"version": "0.2.0",
"configurations":
[
{
"name": "Python",
"type": "python",
"request": "launch",
"stopOnEntry": true,
"pythonPath": "${config:python.pythonPath}",
"program": "${workspaceRoot}/python_project_source/test.py",
"cwd": "${workspaceRoot}/python_project_source",
"env": {},
"envFile": "${workspaceRoot}/.env",
"debugOptions": [
"WaitOnAbnormalExit",
"WaitOnNormalExit",
"RedirectOutput"
]
},
{
"type": "chrome",
"request": "launch",
"name": "Launch Chrome against localhost",
"url": "${workspaceRoot}/website/test.html",
"webRoot": "${workspaceRoot}/website"
}
]
}
As expected when I select test.py and press 'F5' it can switch to python debug environment, and when I select test.html the Chrome will be opened.
The fact is, VS code only remember the environment I debugged last time rather than change it automatically. So the only thing I do now is adding some comments to one environment (/* */) when I need to compile the other.:(
Is there something wrong in my launch.json?
Automatically switching the debug environment based on the file (or file-type) is not a current feature of Visual Studio Code, I believe.
You'll have to manually switch the launch configuration depending on the type of debugging task you want to perform.
And, of course, you could consider writing a feature request: https://github.com/Microsoft/vscode

Can Visual Studio Code be configured to launch electron

Since Visual Studio Code was created using Electron, I'm guessing that launch.json might be configured to properly launch an app using Electron. But I've not figured out how to do it yet.
Also since Electron is based on io.js, itself based on Node.js, I'm thinking maybe... it can be done, but haven't found the magic yet.
Tried something along these lines... snippet from launch.json:
"configurations": [
{
// Name of configuration; appears in the launch configuration drop down menu.
"name": "Launch Electron",
// Type of configuration. Possible values: "node", "mono".
"type": "node",
// Workspace relative or absolute path to the program.
"program": "Y:\\dev\\electron\\electron.exe",
// Automatically stop program after launch.
"stopOnEntry": false,
// Command line arguments passed to the program.
"args": ["CrawlSpace_Electron\\"],
// Workspace relative or absolute path to the working directory of the program being debugged. Default is the current workspace.
"cwd": ".",
// Workspace relative or absolute path to the runtime executable to be used. Default is the runtime executable on the PATH.
"runtimeExecutable": null,
// Environment variables passed to the program.
"env": { }
},
It does start Electron, but fails (window vanishes too fast to see exactly why).
Any thoughts?
If you specify electron.exe as the runtimeExecutable (as previously suggested) you can pass the main.js file as the program and it will work. Electron allows you to specify the directory OR the main.js file since that is pretty much what the package.json points to. Using the configuration below in my launch.json file, pressing F5 both launched Electron with my app and connected the debugger to the main process (eventually)...
{
"name": "Launch Electron",
"type": "node",
"program": "${workspaceRoot}/app/main.js", // ensure this is path to main.js file
"stopOnEntry": false,
"args": [],
"cwd": "${workspaceRoot}",
// as you have noted, this is also important:
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
},
My main.js file is in the app folder I normally would pass to Electron.
Yes, it could. Not only could VSCode launch Electron, it could also debug it.
Using node you can debug Electron's Main process, but with Debugger for Chrome you can also debug Electron's Renderer process. I wrote a blog post on this topic: http://code.matsu.io/1.
The current highest upvoted answer is a bit outdated.
You should use electron instead of electron-prebuilt. See http://electron.atom.io/blog/2016/08/16/npm-install-electron
You should use node_modules/.bin/electron to launch electron
On Windows it's electron.cmd, not electron.exe.
Here are two pre-configured projects: https://github.com/octref/vscode-electron-debug.
One configured to run electron/electron-quick-start
One modified from electron/electron-quick-start to use ES6 & Babel & Webpack.
Here is the launch.json for the first project. To run the target "Debug Renderer Process", you need to install Debugger for Chrome. But "Debug Main Process" works fine on vanilla VSCode.
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Main Process",
"type": "node",
"request": "launch",
"cwd": "${workspaceRoot}",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
// Use the following for Windows
// "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",
"program": "${workspaceRoot}/main.js"
},
{
"name": "Debug Renderer Process",
"type": "chrome",
"request": "launch",
"runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
// Use the following for Windows
// "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd",
"runtimeArgs": [
"${workspaceRoot}/main.js",
"--remote-debugging-port=9222"
],
"webRoot": "${workspaceRoot}"
}
]
}
In theory the following should work:
Specify the electron.exe as the "runtimeExecutable" (since it replaces the node runtime). The electron program ("CrawlSpace_Electron\") becomes the "program". VSCode automatically passes a "--debug-brk" or "--debug" to electron.exe.
In practice VSCode does not yet support this setup because the preview version of VSCode tries to verify that the "program" attribute is a file that exists on disk. But for electron the "program" must be a directory.
I have created a bug on our side and will make sure it’s fixed with the next release.
I know this is just 1 link but it's the answer everyone needs...
https://code.visualstudio.com/docs/editor/debugging#_launchjson-attributes
Here are the attributes documented for launch.json. Unsure if the list is currently complete, but it should at least help...
On OSX the path to electron is
"runtimeExecutable": "${workspaceRoot}/node_modules/electron-prebuilt/dist/Electron.app/Contents/MacOS/Electron",