| 1 | --- |
| 2 | relates: |
| 3 | - VS Code: https://code.visualstudio.com/ |
| 4 | - View in Marketplace: https://marketplace.visualstudio.com/items?itemName=antfu.slidev |
| 5 | - View in OVSX: https://open-vsx.org/extension/antfu/slidev |
| 6 | tags: [editor] |
| 7 | description: | |
| 8 | Help you better organize your slides and have a quick overview of them. |
| 9 | --- |
| 10 | |
| 11 | # VS Code Extension |
| 12 | |
| 13 | <p align="center"> |
| 14 | <a href="https://github.com/slidevjs/slidev" target="_blank"> |
| 15 | <img src="https://cdn.jsdelivr.net/gh/slidevjs/slidev/assets/logo-for-vscode.png" alt="Slidev" width="300" /> |
| 16 | </a> |
| 17 | </p> |
| 18 | |
| 19 | <a href="https://marketplace.visualstudio.com/items?itemName=antfu.slidev" target="__blank"> |
| 20 | <img inline src="https://img.shields.io/visual-studio-marketplace/v/antfu.slidev.svg?color=4EC5D4&label=VS%20Code%20Marketplace&logo=visual-studio-code" alt="Visual Studio Marketplace Version" /> |
| 21 | </a> |
| 22 | <a href="https://marketplace.visualstudio.com/items?itemName=antfu.slidev" target="__blank"> |
| 23 | <img inline src="https://img.shields.io/visual-studio-marketplace/d/antfu.slidev.svg?color=2B90B6" alt="Visual Studio Marketplace Downloads" /> |
| 24 | </a> |
| 25 | |
| 26 | The VS Code extension provides some features to help you better organize your slides and have a quick overview of them. |
| 27 | |
| 28 | ### Features |
| 29 | |
| 30 | - Preview slides in the side panel |
| 31 | - Slides tree view with slide numbers |
| 32 | - Re-ordering slides via drag and drop |
| 33 | - Folding for slide blocks |
| 34 | - Multiple slides project support |
| 35 | - Start the dev server with one click |
| 36 | - AI/Copilot integration via Language Model Tools |
| 37 | |
| 38 |  |
| 39 | |
| 40 | <TheTweet id="1395333405345148930" /> |
| 41 | |
| 42 | <TheTweet id="1789684139152810151" /> |
| 43 | |
| 44 | ### Installation |
| 45 | |
| 46 | You can install the extension from the [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=antfu.slidev) or the [Open VSX Registry](https://open-vsx.org/extension/antfu/slidev). |
| 47 | |
| 48 | ### Usage |
| 49 | |
| 50 | Click the `Slidev` icon in the activity bar to open the **Slidev panel**. In the Slidev panel, you can see the projects tree view, slides tree view, and the preview webview. |
| 51 | |
| 52 | In the **projects tree view**, you can see all the Slidev projects in your workspace. You can click the item to open the corresponding file, and click the <codicon-eye /> icon over it to switch the active project. The <codicon-add /> icon allows you to load a slides project that wasn't scanned automatically. |
| 53 | |
| 54 | In the **slides tree view**, you can see all the slides in the active project. You can click the item to move your cursor to the slide in the editor, and drag and drop to reorder the slides. |
| 55 | |
| 56 | In the **preview webview**, you can click the <codicon-run-all /> icon to start the dev server and click the <codicon-globe /> icon to open the slides in the browser. Toggle <codicon-lock /> icon to sync/unsync the preview navigation with the editor cursor. |
| 57 | |
| 58 | There are also some **commands** you can use. Type `Slidev` in the command palette to see them. |
| 59 | |
| 60 | You can add glob patterns to the `slidev.include` configuration to include files as Slidev entries. The default value is `["**/*.md"]`. Example: |
| 61 | |
| 62 | ```json |
| 63 | { |
| 64 | "slidev.include": ["**/presentation.md"] |
| 65 | } |
| 66 | ``` |
| 67 | |
| 68 | #### Dev Command {#dev-command} |
| 69 | |
| 70 | You can customize the command to start dev server by setting the `slidev.dev-command` configuration. The default value is `npm exec -c 'slidev ${args}'`. |
| 71 | |
| 72 | The configured command can contain placeholders: |
| 73 | |
| 74 | - `${args}`: All CLI arguments. e.g. `slides.md --port 3000 --remote` |
| 75 | - `${port}`: The port number. e.g. `3000` |
| 76 | |
| 77 | Examples: |
| 78 | |
| 79 | - Global installation: `slidev ${args}` |
| 80 | - For PNPM users, you can set it to `pnpm slidev ${args}`. |
| 81 | - For [code-server](https://coder.com/docs/code-server/) users, you can set it to `pnpm slidev ${args} --base /proxy/${port}/`. This will make the dev server accessible at `http://localhost:8080/proxy/3000/`. |
| 82 | |
| 83 | #### Slides Tree View {#slides-tree} |
| 84 | |
| 85 | > Available since v0.52.0 |
| 86 | |
| 87 | The slides tree view shows all slides in your presentation with their slide numbers and titles. Each slide is displayed as `{slideNo}. {title}` making it easy to navigate to specific slides. |
| 88 | |
| 89 | #### AI/Copilot Integration {#ai-integration} |
| 90 | |
| 91 | > Available since v0.52.0 |
| 92 | |
| 93 | The extension provides Language Model Tools that allow VSCode's Copilot and other AI assistants to interact with your Slidev project. The following tools are available: |
| 94 | |
| 95 | - `slidev_getActiveSlide` - Get information about the current active slide and project |
| 96 | - `slidev_getSlideContent` - Retrieve the content of a specific slide by number |
| 97 | - `slidev_getAllSlideTitles` - List all slide titles in the presentation |
| 98 | - `slidev_findSlideNoByTitle` - Find a slide number by its title |
| 99 | - `slidev_listEntries` - List all loaded Slidev project entries |
| 100 | - `slidev_getPreviewPort` - Get the preview server port for a project |
| 101 | - `slidev_chooseEntry` - Switch the active Slidev entry |
| 102 | |
| 103 | These tools enable AI assistants to help you navigate, edit, and understand your slides more effectively. |
| 104 |