Enviar búsqueda
Cargar
わんくま同盟大阪勉強会 Vol.68 - Visual Studio Code 拡張機能作成入門
•
1 recomendación
•
972 vistas
T
TATSUYA HAYAMIZU
Seguir
わんくま同盟大阪勉強会 Vol.68 セッション資料
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 44
Descargar ahora
Descargar para leer sin conexión
Recomendados
C#で速度を極めるいろは
C#で速度を極めるいろは
Core Concept Technologies
Kuberflow Kubernetes上の機械学習プラットフォーム
Kuberflow Kubernetes上の機械学習プラットフォーム
Kosuke Kikuchi
.NET Coreから概観する.NETのOSSへの取り組み
.NET Coreから概観する.NETのOSSへの取り組み
Kouji Matsui
ICST 2015 まるわかりDay 論文紹介:Perspectives on white box testing
ICST 2015 まるわかりDay 論文紹介:Perspectives on white box testing
啓次 植月
Visual Studio 拡張機能の作り方
Visual Studio 拡張機能の作り方
Yuki Igarashi
Azure MLで何かやる
Azure MLで何かやる
Yuki Igarashi
Markdownもはじめよう
Markdownもはじめよう
masayoshi takahashi
短期間で新技術を学ぶ技術
短期間で新技術を学ぶ技術
Takafumi ONAKA
Recomendados
C#で速度を極めるいろは
C#で速度を極めるいろは
Core Concept Technologies
Kuberflow Kubernetes上の機械学習プラットフォーム
Kuberflow Kubernetes上の機械学習プラットフォーム
Kosuke Kikuchi
.NET Coreから概観する.NETのOSSへの取り組み
.NET Coreから概観する.NETのOSSへの取り組み
Kouji Matsui
ICST 2015 まるわかりDay 論文紹介:Perspectives on white box testing
ICST 2015 まるわかりDay 論文紹介:Perspectives on white box testing
啓次 植月
Visual Studio 拡張機能の作り方
Visual Studio 拡張機能の作り方
Yuki Igarashi
Azure MLで何かやる
Azure MLで何かやる
Yuki Igarashi
Markdownもはじめよう
Markdownもはじめよう
masayoshi takahashi
短期間で新技術を学ぶ技術
短期間で新技術を学ぶ技術
Takafumi ONAKA
Processing.jsでおうちハック shorter version
Processing.jsでおうちハック shorter version
sonycsl
Visual Studio による開発環境・プログラミングの進化
Visual Studio による開発環境・プログラミングの進化
Fujio Kojima
Visual studio de debug
Visual studio de debug
Kazushi Kamegawa
デスクトップ アプリ開発における Visual Studio の進化
デスクトップ アプリ開発における Visual Studio の進化
Katsuhiro Aizawa
20180119_AIを支えるクラウド技術
20180119_AIを支えるクラウド技術
康平 秋山
Windows ストアアプリから使かえるセンサーAPIとデバイスAPI
Windows ストアアプリから使かえるセンサーAPIとデバイスAPI
Osamu Monoe
App017 power shellの新しい相棒_visual_studio_
App017 power shellの新しい相棒_visual_studio_
Tech Summit 2016
App017 power shellの新しい相棒_visual_studio
App017 power shellの新しい相棒_visual_studio
Tech Summit 2016
Toolkit for CreateJSで作るリッチコンテンツ
Toolkit for CreateJSで作るリッチコンテンツ
Yasunobu Ikeda
実践 NestJS
実践 NestJS
Ayumi Goto
pi-1. プログラミング入門
pi-1. プログラミング入門
kunihikokaneko1
C#
C#
Naohiro Yoshikawa
Visual Studio と Azure で Python を始めよう
Visual Studio と Azure で Python を始めよう
Akira Inoue
Windows 開発者のための Dev&Ops on AWS
Windows 開発者のための Dev&Ops on AWS
Amazon Web Services Japan
Clrh 110827 wfho
Clrh 110827 wfho
Tomoyuki Obi
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
Hiroh Satoh
Visual Studio Code #phpcon2015
Visual Studio Code #phpcon2015
Aya Tokura
テスト駆動ゲーム開発をJava scriptで実践
テスト駆動ゲーム開発をJava scriptで実践
Yuusuke Takeuchi
Processingでインタラクティブアート作品を作る
Processingでインタラクティブアート作品を作る
Yohei Tanaka
ZendStudioのご紹介
ZendStudioのご紹介
Manabu Shinsaka
コンピュータの舞台裏 Vol.08 - 身近な事例からひも解く人工知能
コンピュータの舞台裏 Vol.08 - 身近な事例からひも解く人工知能
TATSUYA HAYAMIZU
わんくま同盟大阪勉強会 Vol.65 electron入門
わんくま同盟大阪勉強会 Vol.65 electron入門
TATSUYA HAYAMIZU
Más contenido relacionado
Similar a わんくま同盟大阪勉強会 Vol.68 - Visual Studio Code 拡張機能作成入門
Processing.jsでおうちハック shorter version
Processing.jsでおうちハック shorter version
sonycsl
Visual Studio による開発環境・プログラミングの進化
Visual Studio による開発環境・プログラミングの進化
Fujio Kojima
Visual studio de debug
Visual studio de debug
Kazushi Kamegawa
デスクトップ アプリ開発における Visual Studio の進化
デスクトップ アプリ開発における Visual Studio の進化
Katsuhiro Aizawa
20180119_AIを支えるクラウド技術
20180119_AIを支えるクラウド技術
康平 秋山
Windows ストアアプリから使かえるセンサーAPIとデバイスAPI
Windows ストアアプリから使かえるセンサーAPIとデバイスAPI
Osamu Monoe
App017 power shellの新しい相棒_visual_studio_
App017 power shellの新しい相棒_visual_studio_
Tech Summit 2016
App017 power shellの新しい相棒_visual_studio
App017 power shellの新しい相棒_visual_studio
Tech Summit 2016
Toolkit for CreateJSで作るリッチコンテンツ
Toolkit for CreateJSで作るリッチコンテンツ
Yasunobu Ikeda
実践 NestJS
実践 NestJS
Ayumi Goto
pi-1. プログラミング入門
pi-1. プログラミング入門
kunihikokaneko1
C#
C#
Naohiro Yoshikawa
Visual Studio と Azure で Python を始めよう
Visual Studio と Azure で Python を始めよう
Akira Inoue
Windows 開発者のための Dev&Ops on AWS
Windows 開発者のための Dev&Ops on AWS
Amazon Web Services Japan
Clrh 110827 wfho
Clrh 110827 wfho
Tomoyuki Obi
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
Hiroh Satoh
Visual Studio Code #phpcon2015
Visual Studio Code #phpcon2015
Aya Tokura
テスト駆動ゲーム開発をJava scriptで実践
テスト駆動ゲーム開発をJava scriptで実践
Yuusuke Takeuchi
Processingでインタラクティブアート作品を作る
Processingでインタラクティブアート作品を作る
Yohei Tanaka
ZendStudioのご紹介
ZendStudioのご紹介
Manabu Shinsaka
Similar a わんくま同盟大阪勉強会 Vol.68 - Visual Studio Code 拡張機能作成入門
(20)
Processing.jsでおうちハック shorter version
Processing.jsでおうちハック shorter version
Visual Studio による開発環境・プログラミングの進化
Visual Studio による開発環境・プログラミングの進化
Visual studio de debug
Visual studio de debug
デスクトップ アプリ開発における Visual Studio の進化
デスクトップ アプリ開発における Visual Studio の進化
20180119_AIを支えるクラウド技術
20180119_AIを支えるクラウド技術
Windows ストアアプリから使かえるセンサーAPIとデバイスAPI
Windows ストアアプリから使かえるセンサーAPIとデバイスAPI
App017 power shellの新しい相棒_visual_studio_
App017 power shellの新しい相棒_visual_studio_
App017 power shellの新しい相棒_visual_studio
App017 power shellの新しい相棒_visual_studio
Toolkit for CreateJSで作るリッチコンテンツ
Toolkit for CreateJSで作るリッチコンテンツ
実践 NestJS
実践 NestJS
pi-1. プログラミング入門
pi-1. プログラミング入門
C#
C#
Visual Studio と Azure で Python を始めよう
Visual Studio と Azure で Python を始めよう
Windows 開発者のための Dev&Ops on AWS
Windows 開発者のための Dev&Ops on AWS
Clrh 110827 wfho
Clrh 110827 wfho
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
ぼくのかんがえたさいきょうのうぇぶあぷりけーしょんふれーむわーく - YAPC Asia 2011
Visual Studio Code #phpcon2015
Visual Studio Code #phpcon2015
テスト駆動ゲーム開発をJava scriptで実践
テスト駆動ゲーム開発をJava scriptで実践
Processingでインタラクティブアート作品を作る
Processingでインタラクティブアート作品を作る
ZendStudioのご紹介
ZendStudioのご紹介
Más de TATSUYA HAYAMIZU
コンピュータの舞台裏 Vol.08 - 身近な事例からひも解く人工知能
コンピュータの舞台裏 Vol.08 - 身近な事例からひも解く人工知能
TATSUYA HAYAMIZU
わんくま同盟大阪勉強会 Vol.65 electron入門
わんくま同盟大阪勉強会 Vol.65 electron入門
TATSUYA HAYAMIZU
わんくま同盟大阪勉強会 Vol.68 LT - ラブライブ!サンシャイン!聖地巡礼に入った話
わんくま同盟大阪勉強会 Vol.68 LT - ラブライブ!サンシャイン!聖地巡礼に入った話
TATSUYA HAYAMIZU
わんくま大阪勉強会 Vol.65 LT 翻訳で貢献
わんくま大阪勉強会 Vol.65 LT 翻訳で貢献
TATSUYA HAYAMIZU
わんくま同盟大阪勉強会#61
わんくま同盟大阪勉強会#61
TATSUYA HAYAMIZU
C#でもメタプログラミングがしたい!!
C#でもメタプログラミングがしたい!!
TATSUYA HAYAMIZU
20131123 playgroundハッカソン
20131123 playgroundハッカソン
TATSUYA HAYAMIZU
Visual studioによるビルドプロセスの自動化
Visual studioによるビルドプロセスの自動化
TATSUYA HAYAMIZU
Metro style ハッカソンに参加してきた
Metro style ハッカソンに参加してきた
TATSUYA HAYAMIZU
より良いコードを書くための
より良いコードを書くための
TATSUYA HAYAMIZU
ゲームノシクミ
ゲームノシクミ
TATSUYA HAYAMIZU
Más de TATSUYA HAYAMIZU
(11)
コンピュータの舞台裏 Vol.08 - 身近な事例からひも解く人工知能
コンピュータの舞台裏 Vol.08 - 身近な事例からひも解く人工知能
わんくま同盟大阪勉強会 Vol.65 electron入門
わんくま同盟大阪勉強会 Vol.65 electron入門
わんくま同盟大阪勉強会 Vol.68 LT - ラブライブ!サンシャイン!聖地巡礼に入った話
わんくま同盟大阪勉強会 Vol.68 LT - ラブライブ!サンシャイン!聖地巡礼に入った話
わんくま大阪勉強会 Vol.65 LT 翻訳で貢献
わんくま大阪勉強会 Vol.65 LT 翻訳で貢献
わんくま同盟大阪勉強会#61
わんくま同盟大阪勉強会#61
C#でもメタプログラミングがしたい!!
C#でもメタプログラミングがしたい!!
20131123 playgroundハッカソン
20131123 playgroundハッカソン
Visual studioによるビルドプロセスの自動化
Visual studioによるビルドプロセスの自動化
Metro style ハッカソンに参加してきた
Metro style ハッカソンに参加してきた
より良いコードを書くための
より良いコードを書くための
ゲームノシクミ
ゲームノシクミ
Último
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
Atomu Hidaka
プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツール
sugiuralab
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
danielhu54
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
Shota Ito
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
osamut
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
iPride Co., Ltd.
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
iPride Co., Ltd.
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価
sugiuralab
Último
(8)
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツール
Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価
わんくま同盟大阪勉強会 Vol.68 - Visual Studio Code 拡張機能作成入門
1.
VisualStudioCode 拡張機能作成入門 くれすと@thayamizu
2.
目次 自己紹介 Visual
Studio Codeとは 開発環境の準備 Visual Studio CodeAPI 概観 拡張機能作成 まとめ
3.
自己紹介 H.N クレスト
博士(情報学),修習技術者 SNS Twitter @thayamizu GitHub @thayamizu 趣味 プログラミング・カラオケ・イラスト・旅行 よく使う言語 C/C++, TypeScript, JavaScript, Python
4.
勉強会(1) 型システム入門 型システム
型無しλ計算 型付きλ計算 etc. 全30回.3年半かかりました. 入門と言いつつ全く入門ではない
5.
勉強会(2) 次はこのあたり
6.
勉強会(3) コンピュータの舞台裏 あおおにくん主催
コンピュータが動く仕組の基礎を解説 これまでのトピック ○×を使った2進数の解説 DBの解説 PowershellによるWindows自動化 人工知能の概説 JPEGトリミング講座 外字作成講座
7.
VisualStudioCodeとは
8.
Visual Studio Code Microsoft
が開発しているテキストエディタ Electoron, Node.jsがベース クロスプラットフォーム Windows, Linux, MacOS 特徴 プログラマ向けのエディタ デバッグ 統合されたGitクライアント シンタックスハイライト インテリセンス スニペット リファクタリング
9.
AtomとCode AtomエディタもVisualStudioCodeと同じくGitHub社の Electronフレームワークを使用したテキストエディタ Visual
Studio Codeは,VisualStudioOnline のMonacoがベース となっており派生関係があるわけではない GitHubのIssueを覗いてみると互いに影響を及ぼし合っている 様子
10.
拡張機能で 出来ること ファイルに別の内容のファイルを挿入する Emacs
のInsert commandのようなもの Visual Studio Codeで編集したMarkdownファイルを変換して Evernoteに追加する コーディング中にでてきたクラス・関数をMSDNで検索する ワンライナーのコマンドを実行する
11.
開発環境の準備
12.
Preparing Visual Studio
Codeの拡張機能を作成するに当たっては以下の 拡張機能を予めインストール・設定しておく VisualStudio Code node.js Yeoman code generator Typings VSCE グループポリシーの設定
13.
Node.js
14.
Node.js インストール 任意のインストーラー,パッケージマネージャ
PowerShellからもOK PowerShellのPackageManagement機能で追加する apt-get,yum PowerShellv5.0 から #PackageProviderで Chocolateyを追加 Get-PackageProvider Chocolatey #Find-Packageでパッケージを検索 Find-Package –Name node #Install-Packageでnodeを追加 Install-Package –Name node
15.
Yeoman code generator #グローバルインストール npm install
–g yo generator-code
16.
typings TypeScriptの型定義ファイルを管理するためのツール tsdは非推奨だそうです #グローバルインストール npm
install –g typings #環境が汚れるのが嫌いな方は次のようにする npm install --save-dev typings
17.
vsce 作成したVisualStudioCodeの拡張をパッケージ化・公開する ためのツール #グローバルインストール npm install
–g vsce #環境が汚れるのが嫌いな方は以下 npm install --save-dev vsce
18.
グループ ポリシー npmのパッケージ名は非常に長いためWindowsのパス制限を すぐに超えてしまう NTFSの最大パスは260文字まで
Windows 10 Anniversary Updateで,制限緩和 ローカルグループポリシーの「Win32の長いパスを有効にす る」有効にする
19.
VisualStudioCodeAPI 概観
20.
Promise Visual Studio
Codeが提供しているAPIの非同期操作はpromise ES6, WinJS,A+ 戻り値の型は,thenable thenプロパティで継続して処理できる
21.
Disposables Visual Studio
CodeのAPIはエディタのリソース管理にDispose パターンを適用している Event Listening,Commands,対話的なUI
22.
Namespace vscode名前空間がルート Command
Env Extensions Languages Window Workspace
23.
command 拡張機能のアクティベーション・既存のコマンドの呼び出し registerCommand
executeCommand
24.
window Visual Studio
Code内で使用できるGUIのクラス・オブジェクト が用意されている activeTextEditor createOutputChannel showErrorMessage showWarningMessage showInformationMessage InputBox
25.
workspace Visual Studio
Codeで現在開いているワークスペース(≓フォル ダ)の情報を扱う rootPath getConfiguration
26.
拡張機能作成
27.
雛形の作成 Yeoman code
generator で 拡張機能のひな型を作成する New Extension(Typescript) New Extension(JavaScript) New ColorTheme New LanguageSupport New Code Snippet
28.
雛形の作成
29.
雛形の作成
30.
雛形の作成 実際につくってみます
31.
デバッグ F5キーでデバッグ実行 ステップ実行
Step Over, Step Into, Step Out 実行中のコンテキストの変数 変数のウォッチ コールスタック
32.
テスト Yeoman code-generatorで生成したプロジェクトにはテストラ ンナーがついている
Mocha, Jasmineのようなテスティングフレームワークが使える Travis CI上で自動実行可能 コマンド実行も可能、ただしVisualStudio Codeのインスタンス が存在していると動かない
33.
外部との連携 Node.jsのchild_processを使う spawn,
exec 出力がShiftJISの場合、文字化けを起こすのでiconv-liteを導入 する
34.
設定ファイル 拡張機能に設定を持たせる場合は、package.jsonに設定を持 たせる 持たせた設定ファイルは、vscode.workspace.getConfiguration でconfigurationオブジェクトを取得
取得したconfigrationオブジェクトのgetメソッドからデータ を取り出す
35.
パッケージ化 vsceのpackageコマンドでVSIX形式にパッケージ化できる #作成した拡張機能をパッケージ化 vsce package #パッケージングした拡張機能をインストール code
–install-extension xxx.vsix
36.
公開するには MarketPlaceに拡張機能を公開するには次の手順を踏む Microsoftアカウントを作成する
VisualStudioTeam Serviceにアカウントを登録する VisualStudioTeam Serviceから、アクセストークンを取得する vsceコマンドで拡張機能を公開するアカウントを作成する vsceコマンドでpublishをたたく
37.
下準備
38.
下準備
39.
下準備
40.
Package.json /*拡張機能名*/ "name": “test", /*バージョン番号*/ "version": "0.0.1", /*パブリッシャーアカウント名*/ "publisher":
"crest-test", /*vscodeのバージョン*/ "engines": { "vscode": "^1.0.0" }, /*マーケットプレイスのカテゴリ*/ "categories": [ "Other"],
41.
公開する #publisherを作成する vsce create-publisher crest-test Publisher
human-friendly name: (crest-test) E-mail: crest.test123@outlook.jp Personal Access Token: **************************************************** Successfully created publisher 'crest-test'. #Market Placeに公開する vsce publish
42.
まとめ Visual Studio
Code の拡張機能作成について取り上げました VisualStudio Codeについて 拡張機能の開発環境 VisualStudio CodeAPIの概観 拡張機能の作成~MarketPlaceへの公開
43.
参考文献 Visual Studio
Code Docs GitHub Repository Electron vscode atom
44.
ご清聴ありがとうご ざいました
Descargar ahora