狠狠撸

VisualStudioCode
拡张机能作成入門
くれすと@thayamizu

目次
? 自己紹介
? Visual Studio Codeとは
? 开発环境の準备
? Visual Studio CodeAPI 概観
? 拡张机能作成
? まとめ

自己紹介
? H.N クレスト
? 博士(情報学),修習技術者
? SNS
? Twitter @thayamizu
? GitHub @thayamizu
? 趣味
? プログラミング?カラオケ?イラスト?旅行
? よく使う言語
? C/C++, TypeScript, JavaScript, Python

勉強会(1)
? 型システム入門
? 型システム
? 型無しλ計算
? 型付きλ計算 etc.
? 全30回．3年半かかりました．
? 入門と言いつつ全く入門ではない

勉強会(2)
? 次はこのあたり

勉強会(3)
? コンピュータの舞台裏
? あおおにくん主催
? コンピュータが動く仕組の基礎を解説
? これまでのトピック
? ○×を使った2進数の解説
? DBの解説
? PowershellによるWindows自動化
? 人工知能の概説
? JPEGトリミング講座
? 外字作成講座

痴颈蝉耻补濒厂迟耻诲颈辞颁辞诲别とは

Visual Studio
Code
? Microsoft が開発しているテキストエディタ
? Electoron, Node.jsがベース
? クロスプラットフォーム
? Windows, Linux, MacOS
? 特徴
? プログラマ向けのエディタ
? デバッグ
? 統合されたGitクライアント
? シンタックスハイライト
? インテリセンス
? スニペット
? リファクタリング

AtomとCode
? AtomエディタもVisualStudioCodeと同じくGitHub社の
Electronフレームワークを使用したテキストエディタ
? Visual Studio Codeは，VisualStudioOnline のMonacoがベース
となっており派生関係があるわけではない
? GitHubのIssueを覗いてみると互いに影響を及ぼし合っている
様子

拡張機能で
出来ること
? ファイルに別の内容のファイルを挿入する
? Emacs のInsert commandのようなもの
? Visual Studio Codeで編集したMarkdownファイルを変換して
Evernoteに追加する
? コーディング中にでてきたクラス?関数をMSDNで検索する
? ワンライナーのコマンドを実行する

Preparing
? Visual Studio Codeの拡張機能を作成するに当たっては以下の
拡張機能を予めインストール?設定しておく
? VisualStudio Code
? node.js
? Yeoman code generator
? Typings
? VSCE
? グループポリシーの設定

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

Yeoman code
generator
#グローバルインストール
npm install –g yo generator-code

typings
? TypeScriptの型定義ファイルを管理するためのツール
? tsdは非推奨だそうです
npm install –g typings
#環境が汚れるのが嫌いな方は次のようにする
npm install --save-dev typings

vsce
? 作成したVisualStudioCodeの拡張をパッケージ化?公開する
ためのツール
npm install –g vsce
#環境が汚れるのが嫌いな方は以下
npm install --save-dev vsce

グループ
ポリシー
? npmのパッケージ名は非常に長いためWindowsのパス制限を
すぐに超えてしまう
? NTFSの最大パスは260文字まで
? Windows 10 Anniversary Updateで，制限緩和
? ローカルグループポリシーの「Win32の長いパスを有効にす
る」有効にする

Promise
? Visual Studio Codeが提供しているAPIの非同期操作はpromise
? ES6, WinJS,A+
? 戻り値の型は，thenable
? thenプロパティで継続して処理できる

Disposables
? Visual Studio CodeのAPIはエディタのリソース管理にDispose
パターンを適用している
? Event Listening,Commands,対話的なUI

Namespace
? vscode名前空間がルート
? Command
? Env
? Extensions
? Languages
? Window
? Workspace

command
? 拡張機能のアクティベーション?既存のコマンドの呼び出し
? registerCommand
? executeCommand

window
? Visual Studio Code内で使用できるGUIのクラス?オブジェクト
が用意されている
? activeTextEditor
? createOutputChannel
? showErrorMessage
? showWarningMessage
? showInformationMessage
? InputBox

workspace
? Visual Studio Codeで現在開いているワークスペース(?フォル
ダ)の情報を扱う
? rootPath
? getConfiguration

雏形の作成
? Yeoman code generator で拡張機能のひな型を作成する
? New Extension(Typescript)
? New Extension(JavaScript)
? New ColorTheme
? New LanguageSupport
? New Code Snippet

雏形の作成 ? 実際につくってみます

デバッグ
? F5キーでデバッグ実行
? ステップ実行
? Step Over, Step Into, Step Out
? 実行中のコンテキストの変数
? 変数のウォッチ
? コールスタック

テスト
? Yeoman code-generatorで生成したプロジェクトにはテストラ
ンナーがついている
? Mocha, Jasmineのようなテスティングフレームワークが使える
? Travis CI上で自動実行可能
? コマンド実行も可能、ただしVisualStudio Codeのインスタンス
が存在していると動かない

外部との連携
? Node.jsのchild_processを使う
? spawn, exec
? 出力がShiftJISの場合、文字化けを起こすのでiconv-liteを導入
する

設定ファイル
? 拡張機能に設定を持たせる場合は、package.jsonに設定を持
たせる
? 持たせた設定ファイルは、vscode.workspace.getConfiguration
でconfigurationオブジェクトを取得
? 取得したconfigrationオブジェクトのgetメソッドからデータ
を取り出す

パッケージ化
? vsceのpackageコマンドでVSIX形式にパッケージ化できる
#作成した拡張機能をパッケージ化
vsce package
#パッケージングした拡張機能をインストール
code –install-extension xxx.vsix

公開するには
? MarketPlaceに拡張機能を公開するには次の手順を踏む
? Microsoftアカウントを作成する
? VisualStudioTeam Serviceにアカウントを登録する
? VisualStudioTeam Serviceから、アクセストークンを取得する
? vsceコマンドで拡張機能を公開するアカウントを作成する
? vsceコマンドでpublishをたたく

Package.json
/*拡張機能名*/
"name": “test",
/*バージョン番号*/
"version": "0.0.1",
/*パブリッシャーアカウント名*/
"publisher": "crest-test",
/*vscodeのバージョン*/
"engines": {
"vscode": "^1.0.0" },
/*マーケットプレイスのカテゴリ*/
"categories": [ "Other"],

公開する
#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

まとめ
? Visual Studio Code の拡张机能作成について取り上げました
? VisualStudio Codeについて
? 拡張機能の開発環境
? VisualStudio CodeAPIの概観
? 拡張機能の作成～MarketPlaceへの公開

参考文献
? Visual Studio Code Docs
? GitHub Repository
? Electron
? vscode
? atom

ご清聴ありがとうご
ざいました

狠狠撸

わんくま同盟大阪勉強会 Vol.68 - Visual Studio Code 拡张机能作成入門

More Related Content

わんくま同盟大阪勉強会 Vol.68 - Visual Studio Code 拡张机能作成入門