VS Code Meetup #14 - 拡張機能作る、作った編 で発表した初めての拡張機能を作る際に行った工程をまとめた資料です。

1. 初めての拡張機能リリースまでの
歩み

2. 自己紹介
2
y_chu5
yamachu
山田 裕介（ちゅうこ）
Microsoft Student Partners 2016.9  2018.3
Microsoft MVP 2018.2 
普段の私
● VSCode Insidersのリリースの追っかけ
● TypeScript Nightly
● TypeScript / C# / Scala with VSCode

3. VSCodeとは
3
VS Code Meetup #11  入門編2021
https://vscode.connpass.com/event/207937/
https://speakerdeck.com/ayatokura/vscodemeetup-beginners https://www.slideshare.net/karaage0703/vs-code-245720591

4. VSCodeの魅力を高める拡張機能
4

5. 拡張機能開発、こう思ってません？
● とにかく難しそう
● どういうフローで作ればいいんだろう
● そもそも個人で作れるんですか
5
Node.jsの知識があればすぐに開発を始められます
本セッションでは実際に試してよかったフローをご紹介します

6. 本セッションのゴール
● 初めての拡張機能開発までのフローを共有
● 拡張機能開発出来る人を一人でも増やす
6

7. おことわり
以降の内容は個人的な経験や判断に基づきます
あくまでも一例としてお聞きいただければ幸いです
7

8. 準備編

9. 1. 作りたいものの機能を考える
作りたい拡張機能はどんな機能を持っている？
● それはエディタじゃないと出来ないこと？
● ファイルの中身で挙動が変わるもの？
● etc…
9
拡張機能以外の提供方法を検討するため
作った機能の動かない理由の問題の切り分けを容易にするため
作りたい拡張機能に適している
VSCodeのAPIの判断を行うため
Why

10. 2. 類似した拡張機能を探す
10
例: Code Spell Checker
提供している機能
● Typoの検出
● エディタへの反映
● サジェスト

11. 2. 類似した拡張機能を探す
11
例: Language Features for Markdown files
提供している機能
● Markdown Preview
● スクロール位置の同期
● Syntax Highlight

12. 2. 類似した拡張機能を探す
12
例: GitHub Pull Requests and Issues
提供している機能
● GitHub APIとの連携
● 変更ファイルのリスト
● いい感じのViewの提供

13. 3. 拡張機能で使う機能の言語化
13
Tree View
Webview
Status Bar

14. 3. 拡張機能で使う機能の言語化
14
https://code.visualstudio.com/api/extension-guides/overview

15. 実装編

16. まず初めに…
16

17. 自分でコードを書き始めない
17
書き始めたい気持ちを一旦抑えましょう

18. 試すべきスタート地点はこれ
18
https://github.com/microsoft/vscode-extension-samples

19. Why vscode-extension-samples?
19
● 50を超える拡張機能のサンプル
● （物によっては）動きが見えるGif付き
● VSCodeの最新のAPIにも追従出来る
● git clone ⇒ 手元で動作まで一気に行える
二度手間にはなりそうだけれども、
これを改変して試してみるのが実は近道！

20. サンプルプロジェクトのデモ
20

21. 自分のプロジェクトを作ろう
21
https://code.visualstudio.com/api/get-started/your-first-extension

22. 進める上で詰まった箇所
● デザイン指針がわからない
https://code.visualstudio.com/api/references/extension-guidelines
● 作ったViewが出ない
https://code.visualstudio.com/api/references/contribution-points#contributes.views
22

23. リリースするとこんな感じ
23
https://marketplace.visualstudio.com/items?itemName=yamachu.targetframeworksswitcher

24. まとめ
● 作りたい拡張機能のイメージを固める
● 似た拡張機能を見て学ぶ
● 公式ドキュメントや公式サンプルを活用
よいVSCode Lifeを！
24

25. 宣伝
25
VS Code Meetup #2  Live Share編
https://vscode.connpass.com/event/160083/
https://www.slideshare.net/YusukeYamada7/vscode-contribute-to-vscode