jupyterlab / vscode-config-template

A copier template for creating the IDE config needed to debug the Python and Typescript code in any Jupyter project

JupyterLab Visual Studio Code configurator

A copier template for creating the Visual Studio Code configuration needed to debug the Python and Typescript code in Jupyter extension projects.

It will add:

• Debug configuration to debug your code in Visual Studio Code
• [recommended] Development container (can be used to develop within a container) - see installation documentation

Setup Visual Studio Code for extensions

The best is to run this on project generated by the extension template.

1. Install copier.

pip install copier

or

conda install copier

2. Navigate to the root of your Jupyter project, then run

For copier v8

copier copy -a .copier-answer.vscode.yml --UNSAFE https://github.com/jupyterlab/vscode-config-template .

The --UNSAFE flag is required as explained in the documentation.

For copier v7

copier -a .copier-answer.vscode.yml copy https://github.com/jupyterlab/vscode-config-template .

3. Answer the options questions

4. Install the extension

pip install -e ".[test]"
jupyter labextension develop . --overwrite
# Server extension must be manually enabled in develop mode
# jupyter server extension enable <python_name>

5. Optional, start watching your extension source changes

jlpm run watch

6. Inside Visual Studio Code Debug panel, use Debug JupyterLab with Chrome.

Update configuration

To update the configuration to a newer version of the template, execute:

For copier v8

copier update -a .copier-answer.vscode.yml --UNSAFE

The --UNSAFE flag is required as explained in the documentation.

For copier v7

copier -a .copier-answer.vscode.yml update

vscode-config-template's Issues

VSCode debug mode

Description

I followed the steps to create the random picture extension example: https://jupyterlab.readthedocs.io/en/latest/extension/extension_tutorial.html#extension-tutorial
Everything worked as published, but not the debug mode. Every time I tried to run the code in VSCode debug mode, it fails with some error related to the compatibility between ES and commons compiler. TypeScript configs should have handled this conversion but it still fails.

I tried every possible configs I can find online, nothing worked.

I eventually found your template and installed it: https://github.com/jupyterlab/debug-config-cookiecutter
It works, it runs, but still it does not break at any existing break point or step through the code line by line.

Reproduce

Simply click F5

Expected behavior

Should step through the code line by line, and stops at breakpoints.

Can you share a working version of a JupyterLab extension VSCode project, so I can compare it to mine and maybe find out what's wrong if any?

Context

• Operating System and version: windows 10
• Browser and version: Edge latest version
• JupyterLab version: >=3.0.0

Troubleshoot Output

Paste the output from running `jupyter troubleshoot` from the command line here.
You may want to sanitize the paths in the output.

Command Line Output

Paste the output from your command line running `jupyter lab` here, use `--debug` if possible.

Browser Output

Paste the output from your browser Javascript console here, if applicable.

Firefox config

From jupyterlab/jupyterlab#8328 (comment) and jupyterlab/jupyterlab#8328 (comment):

We could also add a Firefox debug config similar to:

{
  "name": "jlab frontend with Firefox",
  "type": "firefox",
  "request": "launch",
  "reAttach": true,
  "firefoxExecutable": "/path/to/firefox",
  "url": "http://localhost:9999",
  "webRoot": "${workspaceFolder}",
  "pathMappings": [
    {
      "url": "webpack:///",
      "path": "${webRoot}/"
    }
  ]
}

And ask in the cookiecutter whether to create the config for Chrome or Firefox (or both?).