mirror of
https://github.com/microsoft/vscode-extension-samples.git
synced 2026-04-27 16:55:44 +08:00
f4e09a3b7b
- Update @vscode/test-electron due to some bugs - Update @vscode/test-cli for modern goodness - vscode-dts -> @vscode/dts off of the deprecated name - @types/node to 18 to match VS Code itself
notebook-renderer-react-sample
⚠️ Work-in-progress starter code for custom notebook renderers in VS Code. Expect this to change as notebooks matures. ⚠️
This starter includes:
- 🖥️ TypeScript code to create a simple
NotebookOutputRenderer - 📦 A Webpack build for renderer client code
- ⚡ Support for hot module reloading and safe boilerplate
- 🎨 CSS modules support
Running this Sample
cd notebook-renderer-react-samplecode-insiders .: Open the folder in VS Code Insiders- Hit
F5to build+debug
Structure
A Notebook Renderer consists of code that runs in the VS Code Extension Host (Node.js), which registers the renderer and passes data into the UI code running inside a WebView (Browser/DOM).
This uses TypeScript project references. There are three projects in the src directory:
extensioncontains the code running in Node.js extension host. It's compiled withtsc.clientis the UI code, built by Webpack, with access to the DOM.commoncontains code shared between the extension and client.
When you run watch, compile, or dev, we invoke both tsc and webpack to compile the extension and the client portion of the code.