わんくま同盟大阪勉強会 Vol.68 セッション資料

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. ご清聴ありがとうご
ざいました