Files
Davide Asnaghi 9a96e2e5aa [DOCS] theme (#60)
* add diode theme

* add vscode links

* add vscode features

* advanced install
2025-08-05 16:50:40 -04:00

30 lines
1.8 KiB
Plaintext

---
title: "VSCode Extension"
description: "Use VSCode to visualize schematics as code"
---
The zener VSCode extension brings powerful schematic visualization and advanced editing features directly into your Visual Studio Code workflow. With this extension, you can open `.zen` files and instantly see them rendered as interactive, traditional schematics—making it easier to understand, debug, and share your designs.
Some key features include:
- **Live Preview:** Instantly see your `.zen` files rendered as schematics as you edit, with real-time updates.
- **Syntax Highlighting:** Full syntax support for Zener/Starlark code, making your code easier to read and write.
- **IntelliSense:** Enjoy code completion, hover information, and signature help for a smoother editing experience.
- **Diagnostics:** Real-time error checking and validation, with syntax and connection errors visually flagged.
- **Go to Definition:** Quickly navigate to component and module definitions within your project.
- **Debugging:** Step through your designs with the integrated debugger to better understand and troubleshoot your circuits.
<img
className="block dark:hidden"
src="/images/vscode-light.png"
alt="Light mode interface"
/>
<img
className="hidden dark:block"
src="/images/vscode-dark.png"
alt="Dark mode interface"
/>
To get started, install the extension from either the [VSCode Marketplace](https://marketplace.visualstudio.com/items?itemName=diode-inc.zener) or [Open VSX Registry](https://open-vsx.org/extension/diode-inc/zener). Open a `.zen` file and click the "Open Schematic" button in the editor toolbar. The extension is designed to be fast, lightweight, and seamlessly integrated into your existing development environment. For more details and advanced usage, see the extension pages linked above.