Marp for VS Code 拡張機能開発の舞台裏 - VS Code Conference Japan 2024

VS Code Conference JP 2024 基調講演
https://vscodejp.github.io/conference-2024/

YouTube: https://www.youtube.com/watch?v=nWD0EBSMah8&t=1372s
HTML: https://yhatt.github.io/vscode-conf-jp-2024/
GitHub: https://github.com/yhatt/vscode-conf-jp-2024

Transcript

1. #vscodejp Marp for VS Code 拡張機能開発の舞台裏 Yuki Hattori 2024-04-20 — VS Code Conference Japan 2024
2. #vscodejp Yuki Hattori (服部 雄輝 ) フロントエンドエンジニア Marp メンテナー  | 株式会社 YAGO  | @y_hatt  | @yhatt 2 2
3. #vscodejp 目次 Marp とは？ なぜ VS Code なのか？ 拡張機能の機能・設計 開発のポイント 3 3
4. #vscodejp とは？ 4 4
5. #vscodejp Markdown で プレゼンスライドを書く エコシステム Marp とは？ 5 5
6. #vscodejp Marp とは？ <!-- theme: uncover --> # タイトル 作者名 --- ## 見出し - xxxxxxxxxxxx - xxxxxx --- ## 画像 xxxxxxx、xxxxxxx  6 6
7. #vscodejp Marp for VS Code ＝ Marp を VS Code で使うための拡張 7 7
8. #vscodejp なぜ VS Code なのか？ 8 8
9. #vscodejp エディターとしての 高い機能性・拡張性 なぜ VS Code なのか？ 9 9
10. #vscodejp 2015: 初代 Marp なぜ VS Code なのか？ 10 10
11. #vscodejp 2015: 初代 Marp オールインワンアプリの限界 ユーザーの要望が多種多様 「エディターとしての機能性」も求められるように 「 Markdownでスライドを書く」という命題にフォーカスできなくなりそう 要素を分解し、モジュラーなエコシステムとしての方向性を模索 なぜ VS Code なのか？ 11 11
12. #vscodejp 2018: 新生 Marp (Marp Next) 複数のパーツから構成されるエコシステム なぜ VS Code なのか？ ツール (コマンドラインツール / GUI ツール ) コア (Marp Core) フレームワーク (Marpit framework) 12 12
13. #vscodejp Marp CLI (コマンドラインツール ) なぜ VS Code なのか？ 13 13
14. #vscodejp GUI ツールに求められるもの 初代 Marp と同等の体験 スライドプレビュー＆エクスポート エディターの機能性・拡張性 ユーザー好みのエディター環境にできる 開発・保守の容易さ GUI はコアのフロントエンドに徹したい なぜ VS Code なのか？ 14 14
15. #vscodejp 15 15
16. #vscodejp https://github.com/yhatt/marp/issues/118 16 16
17. #vscodejp 拡張機能の機能・設計 17 17
18. #vscodejp Marp for VS Code の機能 Marp プレビュー エクスポート機能 Markdown 言語機能の拡張 拡張機能の機能・設計 18 18
19. #vscodejp 拡張機能の機能・設計 Marp プレビュー 19 19
20. #vscodejp > 拡張機能の機能・設計 Marp プレビュー --- marp: false theme: gaia _class: lead --- # Marp プレビュー Markdown プレビュー表示方法を切り替え ---  20 20
21. #vscodejp > 拡張機能の機能・設計 Marp プレビュー --- marp: true theme: gaia _class: lead --- # Marp プレビュー Markdown プレビュー表示方法を切り替え ---  21 21
22. #vscodejp Markdown Extension > 拡張機能の機能・設計 Marp プレビュー https://code.visualstudio.com/api/extension-guides/markdown-extension 22 22
23. #vscodejp > 拡張機能の機能・設計 Marp プレビュー "contributes": { "markdown.markdownItPlugins": true } import type { ExtensionContext } from 'vscode' export function activate(context: ExtensionContext) { return { extendMarkdownIt(md: any) { return md.use(require('markdown-it-plugin')) }, } } https://code.visualstudio.com/api/extension-guides/markdown-extension 23 23
24. #vscodejp 設計 を検出したら、処理を Marp の markdown-it エンジンに移譲 > 拡張機能の機能・設計 Marp プレビュー marp: true extendMarkdownIt(md: any) { const { parse: originalParse } = md md.parse = (markdown: string, env: any) => { if (detectMarpFromMarkdown(markdown)) { // marp: true を検出したら… md.marp = new Marp() return md.marp.markdown.parse(markdown, env) // Marp の markdown-it エンジンに移譲　 } else { md.marp = false return originalParse.call(md, markdown, env) // そうでないなら、元々のパース処理を実行 } } } 24 24
25. #vscodejp 拡張機能の機能・設計 エクスポート機能 25 25
26. #vscodejp 設計 拡張機能に埋め込まれた Marp CLI を使用 > 拡張機能の機能・設計 エクスポート機能 import { marpCli } from '@marp-team/marp-cli' async exportCommand(doc: TextDocument, outputUri: Uri) { const input = await createWorkFile(doc) const output = uri.fsPath // 保存先のパス await marpCli([input, '-o', output]) // `marp input.md -o [保存先のパス]` を呼出　 } https://github.com/marp-team/marp-cli#api-experimental 26 26
27. #vscodejp ディレクティブの補完 コードハイライト＆ホバーヘルプ リンター Markdown アウトライン拡張 拡張機能の機能・設計 Markdown 言語機能の拡張 27 27
28. #vscodejp ディレクティブの補完 スライドの設定を行う Marp 記法 で補完 > 拡張機能の機能・設計 Markdown 言語機能の拡張 Ctrl+Space 28 28
29. #vscodejp コードハイライト＆ホバーヘルプ 認識されたディレクティブを強調表示 ホバーで簡単なヘルプと、ドキュメントへのリンクを表示 > 拡張機能の機能・設計 Markdown 言語機能の拡張 29 29
30. #vscodejp リンター 非推奨のディレクティブや、エラーを検知してハイライト 一部は から自動修正可能 > 拡張機能の機能・設計 Markdown 言語機能の拡張 30 30
31. #vscodejp Markdown アウトライン拡張 アウトラインサイドバーでスライドページを認識 スライドページ単位のコード折りたたみ > 拡張機能の機能・設計 Markdown 言語機能の拡張 31 31
32. #vscodejp 設計 Programmatic Language Features Markdown 向けの Language Server は当時まだ無かった VS Code API で愚直に拡張 > 拡張機能の機能・設計 Markdown 言語機能の拡張 // 例: 補完機能の提供 vscode.languages.registerCompletionItemProvider('markdown', { async provideCompletionItems(doc, pos) { const themeCompletionItem = new vscode.CompletionItem('theme') themeCompletionItem.documentation = 'Set the theme name of slide deck' return [themeCompletionItem] // 実際には、ドキュメントやカーソル位置で、補完候補をフィルタリングする必要がある }, }) https://code.visualstudio.com/api/language-extensions/programmatic-language-features 32 32
33. #vscodejp 開発のポイント 33 33
34. #vscodejp 小さな拡張で VS Code の進化に寄り沿う 開発のポイント 34 34
35. #vscodejp 2018: + Visual Studio Live Share Marp Markdown を共同で編集 開発のポイント https://visualstudio.microsoft.com/ja/services/live-share/ 35 35
36. #vscodejp 2019: + Remote Development コンテナーや WSL 上での編集・エクスポートに対応 開発のポイント https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.vscode-remote-extensionpack 36 36
37. #vscodejp 2021: + Workspace Trust 強化されたセキュリティモデルをフォロー 開発のポイント https://code.visualstudio.com/blogs/2021/07/06/workspace-trust 37 37
38. #vscodejp 2021: + github.dev / vscode.dev Web Extension に対応、ブラウザ上で Marp の編集 /プレビューが可能に 開発のポイント https://code.visualstudio.com/api/extension-guides/web-extensions 38 38
39. #vscodejp 2022: + Markdown Language Server / Service 強化が進む Markdown 言語機能の恩恵を受けられる 開発のポイント https://code.visualstudio.com/blogs/2022/08/16/markdown-language-server 39 39
40. #vscodejp 2022: + GitHub Copilot スライドの執筆を AI で支援 開発のポイント 40 40
41. #vscodejp Marp for VS Code + ??? = 41 41
42. #vscodejp 小さな拡張で VS Code のエコシステムを活かし、価値を最大化 Marp for VS Code + ??? = 41 41
43. #vscodejp  Marp for VS Code https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode 42 42