Configure VS Code#
This guide addresses how to configure VS Code for an efficient Panel development workflow.
We assume you have
a basic understanding of working with Python in VS Code.
installed the VS Code Python extension
Debugging#
To learn how to use the integrated debugger in general check out the official guide.
To configure the integrated debugger for Panel, you will need to add a debugging configuration like the below.
{
"version": "0.2.0",
"configurations": [
{
"name": "panel serve",
"type": "python",
"request": "launch",
"program": "-m",
"args": [
"panel",
"serve",
"${relativeFile}",
"--show"
],
"console": "integratedTerminal",
"justMyCode": true
},
]
}
In use it looks like
Extensions#
The following extensions will help speed up your Panel workflow
Live Server: Enables you to easily view
.html
files created using.save()
orpanel convert
.
General Settings#
We recommend adding the below to your settings.json
file on Windows
"explorer.copyRelativePathSeparator": "/" # Relevant on Windows only
Keyboard Shortcuts#
To speed up your workflow we recommend configuring a keyboard short cut to panel serve
your app.
[
{
"key": "ctrl+shift+space",
"command": "workbench.action.terminal.sendSequence",
"args": { "text": "panel serve ${relativeFile} --autoreload --show\u000D" }
}
]
On Windows you will need to add quotes around ${relativeFile}
, i.e. replace it with '${relativeFile}'
.
When you press CTRL+SHIFT+SPACE
you will panel serve
your file in the terminal, if you have an open terminal.
Notebook and Interactive Environment#
Ensure you install jupyter_bokeh
with pip install jupyter_bokeh
or conda install -c bokeh jupyter_bokeh
and then enable the extension with pn.extension()
.
You can see a notebook in action below.
Simple Browser#
To keep your app right next to your code while you develop, it can be super productive to use the VS Code simple browser.
You can open it via the Command Palette
To make it even simpler, you can add a task to .vscode/tasks.json
{
"version": "2.0.0",
"tasks": [
{
"label": "Open Panel in Simple Browser",
"command": "${input:openSimpleBrowser}",
"problemMatcher": []
}
],
"inputs": [
{
"id": "openSimpleBrowser",
"type": "command",
"command": "simpleBrowser.show",
"args": [
"http://localhost:5006"
]
}
]
}
and keybinding to keybindings.json
[
{
"key": "ctrl+shift+b",
"command": "workbench.action.tasks.runTask",
"args": "Open Panel in Simple Browser"
},
]
Snippets#
To speed up your workflow you can configure user defined snippets like these example Panel snippets. When you start typing import panel
you will get the option to select between the snippets as shown below.
The snippets will be available in the script, notebook and the interactive environments.