Download as PDF, PPTX
![Package.json
/*拡張機能名*/
"name": “test",
/*バージョン番号*/
"version": "0.0.1",
/*パブリッシャーアカウント名*/
"publisher": "crest-test",
/*vscodeのバージョン*/
"engines": {
"vscode": "^1.0.0" },
/*マーケットプレイスのカテゴリ*/
"categories": [ "Other"],](https://image.slidesharecdn.com/ln8qlsgssscff4f8wzwl-signature-668c56b30179be3b2e323a2f9c16238bdad8c481036932e4069073ac47e07fc8-poli-161119170842/75/Vol-68-Visual-Studio-Code-40-2048.jpg)
わんくま同盟大阪勉強会 Vol.68 - Visual Studio Code 拡張機能作成入門
- 1.
- 2. 目次 自己紹介 VisualStudio Codeとは 開発環境の準備 Visual Studio CodeAPI 概観 拡張機能作成 まとめ
- 3. 自己紹介 H.N クレスト 博士(情報学),修習技術者 SNS Twitter @thayamizu GitHub @thayamizu 趣味 プログラミング・カラオケ・イラスト・旅行 よく使う言語 C/C++, TypeScript, JavaScript, Python
- 4. 勉強会(1) 型システム入門 型システム 型無しλ計算 型付きλ計算 etc. 全30回．3年半かかりました． 入門と言いつつ全く入門ではない
- 5.
- 6. 勉強会(3) コンピュータの舞台裏 あおおにくん主催 コンピュータが動く仕組の基礎を解説 これまでのトピック ○×を使った2進数の解説 DBの解説 PowershellによるWindows自動化 人工知能の概説 JPEGトリミング講座 外字作成講座
- 7.
- 8. Visual Studio Code Microsoftが開発しているテキストエディタ Electoron, Node.jsがベース クロスプラットフォーム Windows, Linux, MacOS 特徴 プログラマ向けのエディタ デバッグ 統合されたGitクライアント シンタックスハイライト インテリセンス スニペット リファクタリング
- 9. AtomとCode AtomエディタもVisualStudioCodeと同じくGitHub社の Electronフレームワークを使用したテキストエディタ VisualStudio Codeは，VisualStudioOnline のMonacoがベース となっており派生関係があるわけではない GitHubのIssueを覗いてみると互いに影響を及ぼし合っている 様子
- 10. 拡張機能で 出来ること ファイルに別の内容のファイルを挿入する EmacsのInsert commandのようなもの Visual Studio Codeで編集したMarkdownファイルを変換して Evernoteに追加する コーディング中にでてきたクラス・関数をMSDNで検索する ワンライナーのコマンドを実行する
- 11.
- 12. Preparing Visual StudioCodeの拡張機能を作成するに当たっては以下の 拡張機能を予めインストール・設定しておく VisualStudio Code node.js Yeoman code generator Typings VSCE グループポリシーの設定
- 13.
- 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は非推奨だそうです #グローバルインストール npminstall –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.
- 20. Promise Visual StudioCodeが提供しているAPIの非同期操作はpromise ES6, WinJS,A+ 戻り値の型は，thenable thenプロパティで継続して処理できる
- 21. Disposables Visual StudioCodeのAPIはエディタのリソース管理にDispose パターンを適用している Event Listening,Commands,対話的なUI
- 22. Namespace vscode名前空間がルート Command Env Extensions Languages Window Workspace
- 23.
- 24. window Visual StudioCode内で使用できるGUIのクラス・オブジェクト が用意されている activeTextEditor createOutputChannel showErrorMessage showWarningMessage showInformationMessage InputBox
- 25. workspace Visual StudioCodeで現在開いているワークスペース(≓フォル ダ)の情報を扱う rootPath getConfiguration
- 26.
- 27. 雛形の作成 Yeoman codegenerator で 拡張機能のひな型を作成する 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 Publisherhuman-friendly name: (crest-test) E-mail: crest.test123@outlook.jp Personal Access Token: **************************************************** Successfully created publisher 'crest-test'. #Market Placeに公開する vsce publish
- 42. まとめ Visual StudioCode の拡張機能作成について取り上げました VisualStudio Codeについて 拡張機能の開発環境 VisualStudio CodeAPIの概観 拡張機能の作成～MarketPlaceへの公開
- 43. 参考文献 Visual StudioCode Docs GitHub Repository Electron vscode atom
- 44.