Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
初めての拡張機能リリースまでの
歩み
自己紹介
2
y_chu5
yamachu
山田 裕介(ちゅうこ)
Microsoft Student Partners 2016.9  2018.3
Microsoft MVP 2018.2 
普段の私
● VSCode Insiders...
VSCodeとは
3
VS Code Meetup #11  入門編2021
https://vscode.connpass.com/event/207937/
https://speakerdeck.com/ayatokura/vscode...
VSCodeの魅力を高める拡張機能
4
拡張機能開発、こう思ってません?
● とにかく難しそう
● どういうフローで作ればいいんだろう
● そもそも個人で作れるんですか
5
Node.jsの知識があればすぐに開発を始められます
本セッションでは実際に試してよかったフローをご紹介します
本セッションのゴール
● 初めての拡張機能開発までのフローを共有
● 拡張機能開発出来る人を一人でも増やす
6
おことわり
以降の内容は個人的な経験や判断に基づきます
あくまでも一例としてお聞きいただければ幸いです
7
準備編
1. 作りたいものの機能を考える
作りたい拡張機能はどんな機能を持っている?
● それはエディタじゃないと出来ないこと?
● ファイルの中身で挙動が変わるもの?
● etc…
9
拡張機能以外の提供方法を検討するため
作った機能の動かない理由の...
2. 類似した拡張機能を探す
10
例: Code Spell Checker
提供している機能
● Typoの検出
● エディタへの反映
● サジェスト
2. 類似した拡張機能を探す
11
例: Language Features for Markdown files
提供している機能
● Markdown Preview
● スクロール位置の同期
● Syntax Highlight
2. 類似した拡張機能を探す
12
例: GitHub Pull Requests and Issues
提供している機能
● GitHub APIとの連携
● 変更ファイルのリスト
● いい感じのViewの提供
3. 拡張機能で使う機能の言語化
13
Tree View
Webview
Status Bar
3. 拡張機能で使う機能の言語化
14
https://code.visualstudio.com/api/extension-guides/overview
実装編
まず初めに…
16
自分でコードを書き始めない
17
書き始めたい気持ちを一旦抑えましょう
試すべきスタート地点はこれ
18
https://github.com/microsoft/vscode-extension-samples
Why vscode-extension-samples?
19
● 50を超える拡張機能のサンプル
● (物によっては)動きが見えるGif付き
● VSCodeの最新のAPIにも追従出来る
● git clone ⇒ 手元で動作まで一気に行え...
サンプルプロジェクトのデモ
20
自分のプロジェクトを作ろう
21
https://code.visualstudio.com/api/get-started/your-first-extension
進める上で詰まった箇所
● デザイン指針がわからない
https://code.visualstudio.com/api/references/extension-guidelines
● 作ったViewが出ない
https://code.vi...
リリースするとこんな感じ
23
https://marketplace.visualstudio.com/items?itemName=yamachu.targetframeworksswitcher
まとめ
● 作りたい拡張機能のイメージを固める
● 似た拡張機能を見て学ぶ
● 公式ドキュメントや公式サンプルを活用
よいVSCode Lifeを!
24
宣伝
25
VS Code Meetup #2  Live Share編
https://vscode.connpass.com/event/160083/
https://www.slideshare.net/YusukeYamada7/v...
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
What to Upload to SlideShare
Next
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

Share

初めての拡張機能リリースまでの歩み / Road to publishing extension for the first time

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

初めての拡張機能リリースまでの歩み / Road to publishing extension for the first time

  1. 1. 初めての拡張機能リリースまでの 歩み
  2. 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. 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. 4. VSCodeの魅力を高める拡張機能 4
  5. 5. 拡張機能開発、こう思ってません? ● とにかく難しそう ● どういうフローで作ればいいんだろう ● そもそも個人で作れるんですか 5 Node.jsの知識があればすぐに開発を始められます 本セッションでは実際に試してよかったフローをご紹介します
  6. 6. 本セッションのゴール ● 初めての拡張機能開発までのフローを共有 ● 拡張機能開発出来る人を一人でも増やす 6
  7. 7. おことわり 以降の内容は個人的な経験や判断に基づきます あくまでも一例としてお聞きいただければ幸いです 7
  8. 8. 準備編
  9. 9. 1. 作りたいものの機能を考える 作りたい拡張機能はどんな機能を持っている? ● それはエディタじゃないと出来ないこと? ● ファイルの中身で挙動が変わるもの? ● etc… 9 拡張機能以外の提供方法を検討するため 作った機能の動かない理由の問題の切り分けを容易にするため 作りたい拡張機能に適している VSCodeのAPIの判断を行うため Why
  10. 10. 2. 類似した拡張機能を探す 10 例: Code Spell Checker 提供している機能 ● Typoの検出 ● エディタへの反映 ● サジェスト
  11. 11. 2. 類似した拡張機能を探す 11 例: Language Features for Markdown files 提供している機能 ● Markdown Preview ● スクロール位置の同期 ● Syntax Highlight
  12. 12. 2. 類似した拡張機能を探す 12 例: GitHub Pull Requests and Issues 提供している機能 ● GitHub APIとの連携 ● 変更ファイルのリスト ● いい感じのViewの提供
  13. 13. 3. 拡張機能で使う機能の言語化 13 Tree View Webview Status Bar
  14. 14. 3. 拡張機能で使う機能の言語化 14 https://code.visualstudio.com/api/extension-guides/overview
  15. 15. 実装編
  16. 16. まず初めに… 16
  17. 17. 自分でコードを書き始めない 17 書き始めたい気持ちを一旦抑えましょう
  18. 18. 試すべきスタート地点はこれ 18 https://github.com/microsoft/vscode-extension-samples
  19. 19. Why vscode-extension-samples? 19 ● 50を超える拡張機能のサンプル ● (物によっては)動きが見えるGif付き ● VSCodeの最新のAPIにも追従出来る ● git clone ⇒ 手元で動作まで一気に行える 二度手間にはなりそうだけれども、 これを改変して試してみるのが実は近道!
  20. 20. サンプルプロジェクトのデモ 20
  21. 21. 自分のプロジェクトを作ろう 21 https://code.visualstudio.com/api/get-started/your-first-extension
  22. 22. 進める上で詰まった箇所 ● デザイン指針がわからない https://code.visualstudio.com/api/references/extension-guidelines ● 作ったViewが出ない https://code.visualstudio.com/api/references/contribution-points#contributes.views 22
  23. 23. リリースするとこんな感じ 23 https://marketplace.visualstudio.com/items?itemName=yamachu.targetframeworksswitcher
  24. 24. まとめ ● 作りたい拡張機能のイメージを固める ● 似た拡張機能を見て学ぶ ● 公式ドキュメントや公式サンプルを活用 よいVSCode Lifeを! 24
  25. 25. 宣伝 25 VS Code Meetup #2  Live Share編 https://vscode.connpass.com/event/160083/ https://www.slideshare.net/YusukeYamada7/vscode-contribute-to-vscode

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

Views

Total views

337

On Slideshare

0

From embeds

0

Number of embeds

135

Actions

Downloads

2

Shares

0

Comments

0

Likes

0

×