Submit Search
Upload
初めての拡張機能リリースまでの歩み / Road to publishing extension for the first time
•
0 likes
•
450 views
Y
Yusuke Yamada
Follow
VS Code Meetup #14 - 拡張機能作る、作った編 で発表した初めての拡張機能を作る際に行った工程をまとめた資料です。
Read less
Read more
Engineering
Report
Share
Report
Share
1 of 25
Download now
Download to read offline
Recommended
VSCodeへコントリビュート / Contribute to VSCode
VSCodeへコントリビュート / Contribute to VSCode
Yusuke Yamada
Microsoft Build 2021 前夜祭LT
Microsoft Build 2021 前夜祭LT
Yusuke Yamada
VS Code Day 2021 Recap
VS Code Day 2021 Recap
Yuki Ueda
Remote Development with Visual Studio Code & A clean dev env, working every ...
Remote Development with Visual Studio Code & A clean dev env, working every ...
Hiroyuki Ohnaka
rdflintのvscode拡張の紹介とその実装方法
rdflintのvscode拡張の紹介とその実装方法
Takeshi Mikami
JSオジサン openframeworks emscripten
JSオジサン openframeworks emscripten
minoru nakanou
CSS Living StyleGuide
CSS Living StyleGuide
Hayashi Yuichi
LIGでのDocker活用
LIGでのDocker活用
Hayashi Yuichi
Recommended
VSCodeへコントリビュート / Contribute to VSCode
VSCodeへコントリビュート / Contribute to VSCode
Yusuke Yamada
Microsoft Build 2021 前夜祭LT
Microsoft Build 2021 前夜祭LT
Yusuke Yamada
VS Code Day 2021 Recap
VS Code Day 2021 Recap
Yuki Ueda
Remote Development with Visual Studio Code & A clean dev env, working every ...
Remote Development with Visual Studio Code & A clean dev env, working every ...
Hiroyuki Ohnaka
rdflintのvscode拡張の紹介とその実装方法
rdflintのvscode拡張の紹介とその実装方法
Takeshi Mikami
JSオジサン openframeworks emscripten
JSオジサン openframeworks emscripten
minoru nakanou
CSS Living StyleGuide
CSS Living StyleGuide
Hayashi Yuichi
LIGでのDocker活用
LIGでのDocker活用
Hayashi Yuichi
Front-end package managers
Front-end package managers
Hayashi Yuichi
LIGにおけるフロントエンドチーム構築
LIGにおけるフロントエンドチーム構築
Hayashi Yuichi
Angularおじさんの1年
Angularおじさんの1年
Hayashi Yuichi
いい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみた
Hayashi Yuichi
AndroidStudioはじめました ~Gradle編~
AndroidStudioはじめました ~Gradle編~
Yabata Tomomitsu
WCFのパイプ通信を .NET 5に向けてgRPCへ置き換える話
WCFのパイプ通信を .NET 5に向けてgRPCへ置き換える話
keitasudo1
Demo of write slides and books with VSCode + Markdown
Demo of write slides and books with VSCode + Markdown
ロフト くん
20151029 ヒカラボ講演資料
20151029 ヒカラボ講演資料
Daisuke Ando
Windows10とRaspberryPiでMakerFaireTokyoに参加
Windows10とRaspberryPiでMakerFaireTokyoに参加
Yuki Ando
いまさら触るAwt
いまさら触るAwt
Keiichi Kobayashi
FxOSはウェアラブルデバイスの夢を見るか?
FxOSはウェアラブルデバイスの夢を見るか?
Masakazu Muraoka
スタートアップ企業が実践するクラウドネイティブアプリケーションの開発手法
スタートアップ企業が実践するクラウドネイティブアプリケーションの開発手法
Yuta Matsumura
大人の基礎C#【Niigat.NET 2015-10】
大人の基礎C#【Niigat.NET 2015-10】
Mitsuhito Ishino
JavaScriptを使った開発を始めるなら!TypeScriptをはじめよう ~ ステップアップ
JavaScriptを使った開発を始めるなら!TypeScriptをはじめよう ~ ステップアップ
慎一 古賀
いつでもどこでも .NET
いつでもどこでも .NET
Yuta Matsumura
LT駆動開発04 5分では分からないTypeScriptのなんとか
LT駆動開発04 5分では分からないTypeScriptのなんとか
Kazuya Matsubara
PHP開発からAndroid開発をするようになって学んだWebとモバイルの違い
PHP開発からAndroid開発をするようになって学んだWebとモバイルの違い
Masataka Kono
C# で QnA Bot
C# で QnA Bot
Yoshitaka Seo
XP祭り2017 LT 「DevOps再考」(改題)
XP祭り2017 LT 「DevOps再考」(改題)
Hiroyuki Ohnaka
concrete5 導入活用セミナー in 徳島 [2016年7月]
concrete5 導入活用セミナー in 徳島 [2016年7月]
Katz Ueno
PHPカンファレンス関西 2011
PHPカンファレンス関西 2011
Takako Miyagawa
Visual Studio Code で C# でのアプリ開発
Visual Studio Code で C# でのアプリ開発
m ishizaki
More Related Content
What's hot
Front-end package managers
Front-end package managers
Hayashi Yuichi
LIGにおけるフロントエンドチーム構築
LIGにおけるフロントエンドチーム構築
Hayashi Yuichi
Angularおじさんの1年
Angularおじさんの1年
Hayashi Yuichi
いい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみた
Hayashi Yuichi
AndroidStudioはじめました ~Gradle編~
AndroidStudioはじめました ~Gradle編~
Yabata Tomomitsu
WCFのパイプ通信を .NET 5に向けてgRPCへ置き換える話
WCFのパイプ通信を .NET 5に向けてgRPCへ置き換える話
keitasudo1
Demo of write slides and books with VSCode + Markdown
Demo of write slides and books with VSCode + Markdown
ロフト くん
20151029 ヒカラボ講演資料
20151029 ヒカラボ講演資料
Daisuke Ando
Windows10とRaspberryPiでMakerFaireTokyoに参加
Windows10とRaspberryPiでMakerFaireTokyoに参加
Yuki Ando
いまさら触るAwt
いまさら触るAwt
Keiichi Kobayashi
FxOSはウェアラブルデバイスの夢を見るか?
FxOSはウェアラブルデバイスの夢を見るか?
Masakazu Muraoka
スタートアップ企業が実践するクラウドネイティブアプリケーションの開発手法
スタートアップ企業が実践するクラウドネイティブアプリケーションの開発手法
Yuta Matsumura
大人の基礎C#【Niigat.NET 2015-10】
大人の基礎C#【Niigat.NET 2015-10】
Mitsuhito Ishino
JavaScriptを使った開発を始めるなら!TypeScriptをはじめよう ~ ステップアップ
JavaScriptを使った開発を始めるなら!TypeScriptをはじめよう ~ ステップアップ
慎一 古賀
いつでもどこでも .NET
いつでもどこでも .NET
Yuta Matsumura
LT駆動開発04 5分では分からないTypeScriptのなんとか
LT駆動開発04 5分では分からないTypeScriptのなんとか
Kazuya Matsubara
PHP開発からAndroid開発をするようになって学んだWebとモバイルの違い
PHP開発からAndroid開発をするようになって学んだWebとモバイルの違い
Masataka Kono
C# で QnA Bot
C# で QnA Bot
Yoshitaka Seo
XP祭り2017 LT 「DevOps再考」(改題)
XP祭り2017 LT 「DevOps再考」(改題)
Hiroyuki Ohnaka
concrete5 導入活用セミナー in 徳島 [2016年7月]
concrete5 導入活用セミナー in 徳島 [2016年7月]
Katz Ueno
What's hot
(20)
Front-end package managers
Front-end package managers
LIGにおけるフロントエンドチーム構築
LIGにおけるフロントエンドチーム構築
Angularおじさんの1年
Angularおじさんの1年
いい感じのフロントエンド開発環境を作ってみた
いい感じのフロントエンド開発環境を作ってみた
AndroidStudioはじめました ~Gradle編~
AndroidStudioはじめました ~Gradle編~
WCFのパイプ通信を .NET 5に向けてgRPCへ置き換える話
WCFのパイプ通信を .NET 5に向けてgRPCへ置き換える話
Demo of write slides and books with VSCode + Markdown
Demo of write slides and books with VSCode + Markdown
20151029 ヒカラボ講演資料
20151029 ヒカラボ講演資料
Windows10とRaspberryPiでMakerFaireTokyoに参加
Windows10とRaspberryPiでMakerFaireTokyoに参加
いまさら触るAwt
いまさら触るAwt
FxOSはウェアラブルデバイスの夢を見るか?
FxOSはウェアラブルデバイスの夢を見るか?
スタートアップ企業が実践するクラウドネイティブアプリケーションの開発手法
スタートアップ企業が実践するクラウドネイティブアプリケーションの開発手法
大人の基礎C#【Niigat.NET 2015-10】
大人の基礎C#【Niigat.NET 2015-10】
JavaScriptを使った開発を始めるなら!TypeScriptをはじめよう ~ ステップアップ
JavaScriptを使った開発を始めるなら!TypeScriptをはじめよう ~ ステップアップ
いつでもどこでも .NET
いつでもどこでも .NET
LT駆動開発04 5分では分からないTypeScriptのなんとか
LT駆動開発04 5分では分からないTypeScriptのなんとか
PHP開発からAndroid開発をするようになって学んだWebとモバイルの違い
PHP開発からAndroid開発をするようになって学んだWebとモバイルの違い
C# で QnA Bot
C# で QnA Bot
XP祭り2017 LT 「DevOps再考」(改題)
XP祭り2017 LT 「DevOps再考」(改題)
concrete5 導入活用セミナー in 徳島 [2016年7月]
concrete5 導入活用セミナー in 徳島 [2016年7月]
Similar to 初めての拡張機能リリースまでの歩み / Road to publishing extension for the first time
PHPカンファレンス関西 2011
PHPカンファレンス関西 2011
Takako Miyagawa
Visual Studio Code で C# でのアプリ開発
Visual Studio Code で C# でのアプリ開発
m ishizaki
Visual Studio を使わず .NET する
Visual Studio を使わず .NET する
m ishizaki
.NET Coreから概観する.NETのOSSへの取り組み
.NET Coreから概観する.NETのOSSへの取り組み
Kouji Matsui
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
Saki Homma
新しい Visual Studio & .NET と新時代のアーキテクチャ
新しい Visual Studio & .NET と新時代のアーキテクチャ
慎一 古賀
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
Saki Homma
開発チーム管理で役立ったVSCode拡張機能
開発チーム管理で役立ったVSCode拡張機能
Masaki Suzuki
デスクトップアプリを『一歩前へ』進める方法
デスクトップアプリを『一歩前へ』進める方法
グレープシティ株式会社 ツール事業部
デキるプログラマだけが知っているコードレビュー7つの秘訣(DevLove版)
デキるプログラマだけが知っているコードレビュー7つの秘訣(DevLove版)
Masahiro Nishimi
【de:code 2020】 あらゆるエンジニアを支援! VS Code Meetup の紹介とハンズオンで活躍するテクニック集
【de:code 2020】 あらゆるエンジニアを支援! VS Code Meetup の紹介とハンズオンで活躍するテクニック集
日本マイクロソフト株式会社
そろそろレガシーな.Net開発をやめなイカ?
そろそろレガシーな.Net開発をやめなイカ?
Yuta Matsumura
Android studio で行ってみよう!!
Android studio で行ってみよう!!
Kazuaki Ueda
The Twelve-Factor (A|M)pp with C#
The Twelve-Factor (A|M)pp with C#
Yuta Matsumura
Visual Studio Code あれこれ
Visual Studio Code あれこれ
Shun Ishii
ScratchとAzure FunctionsのBlocklyな関係
ScratchとAzure FunctionsのBlocklyな関係
Masuda Tomoaki
運用管理者のための「開発者からみたDevOps」 - Visual Studio 2015 新機能から考える開発者の取り組み
運用管理者のための「開発者からみたDevOps」 - Visual Studio 2015 新機能から考える開発者の取り組み
慎一 古賀
Project 15 - Algyan May 2022.pdf
Project 15 - Algyan May 2022.pdf
YasuhiroHanda2
【15-e-7】Kinectから始まったスタートアップ #devsumi
【15-e-7】Kinectから始まったスタートアップ #devsumi
Kaoru NAKAMURA
今から始める、Windows 10&新.NETへの移行戦略
今から始める、Windows 10&新.NETへの移行戦略
信之 岩永
Similar to 初めての拡張機能リリースまでの歩み / Road to publishing extension for the first time
(20)
PHPカンファレンス関西 2011
PHPカンファレンス関西 2011
Visual Studio Code で C# でのアプリ開発
Visual Studio Code で C# でのアプリ開発
Visual Studio を使わず .NET する
Visual Studio を使わず .NET する
.NET Coreから概観する.NETのOSSへの取り組み
.NET Coreから概観する.NETのOSSへの取り組み
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
新しい Visual Studio & .NET と新時代のアーキテクチャ
新しい Visual Studio & .NET と新時代のアーキテクチャ
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
Visual Studio Codeを使い倒そう! ~プログラミングから機械学習、クラウド連携、遠隔ペアプロまで~
開発チーム管理で役立ったVSCode拡張機能
開発チーム管理で役立ったVSCode拡張機能
デスクトップアプリを『一歩前へ』進める方法
デスクトップアプリを『一歩前へ』進める方法
デキるプログラマだけが知っているコードレビュー7つの秘訣(DevLove版)
デキるプログラマだけが知っているコードレビュー7つの秘訣(DevLove版)
【de:code 2020】 あらゆるエンジニアを支援! VS Code Meetup の紹介とハンズオンで活躍するテクニック集
【de:code 2020】 あらゆるエンジニアを支援! VS Code Meetup の紹介とハンズオンで活躍するテクニック集
そろそろレガシーな.Net開発をやめなイカ?
そろそろレガシーな.Net開発をやめなイカ?
Android studio で行ってみよう!!
Android studio で行ってみよう!!
The Twelve-Factor (A|M)pp with C#
The Twelve-Factor (A|M)pp with C#
Visual Studio Code あれこれ
Visual Studio Code あれこれ
ScratchとAzure FunctionsのBlocklyな関係
ScratchとAzure FunctionsのBlocklyな関係
運用管理者のための「開発者からみたDevOps」 - Visual Studio 2015 新機能から考える開発者の取り組み
運用管理者のための「開発者からみたDevOps」 - Visual Studio 2015 新機能から考える開発者の取り組み
Project 15 - Algyan May 2022.pdf
Project 15 - Algyan May 2022.pdf
【15-e-7】Kinectから始まったスタートアップ #devsumi
【15-e-7】Kinectから始まったスタートアップ #devsumi
今から始める、Windows 10&新.NETへの移行戦略
今から始める、Windows 10&新.NETへの移行戦略
初めての拡張機能リリースまでの歩み / Road to publishing extension for the first time
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
Download now