こんにちは。
Visual Studio Code、使っていますか?
ぼくはこのエディタが大好きです。
今回は、このエディタの Extension(=プラグイン)の開発をしていきたいと思います。
※ node.js が必要です!
開発方法
- TypeScript + Node.js でいけます。
- ジェネレータは Yeoman でできています。
手順1: Yeomanを入れる。
npm install -g yo
また、VSCode Extension generatorも入れます。
npm install -g generator-code
手順2: ジェネレータを実行
> yo code ? ========================================================================== We're constantly looking for ways to make yo better! May we anonymously report usage statistics to improve the tool over time? More info: https://github.com/yeoman/insight & http://yeoman.io ========================================================================== Yes _-----_ | | .--------------------------. |--(o)--| | Welcome to the Visual | `---------´ | Studio Code Extension | ( _´U`_ ) | generator! | /___A___\ '--------------------------' | ~ | __'.___.'__ ´ ` |° ´ Y ` ? What type of extension do you want to create? New Extension (TypeScript) ? What's the name of your extension? first-ext ? What's the identifier of your extension? first-ext ? What's the description of your extension? first-ext ? What's your publisher name? xxx ? Initialize a git repository? No create first-ext\.vscode\launch.json create first-ext\.vscode\settings.json create first-ext\.vscode\tasks.json create first-ext\typings\node.d.ts create first-ext\typings\vscode-typings.d.ts create first-ext\test\extension.test.ts create first-ext\test\index.ts create first-ext\.vscodeignore create first-ext\.gitignore create first-ext\README.md create first-ext\vsc-extension-quickstart.md create first-ext\tsconfig.json create first-ext\src\extension.ts create first-ext\package.json I'm all done. Running npm install for you to install the required dependencies. If this fails, try running the command yourself.
Extension の形式は、TypeScript がおすすめです。
開発するとき、インテリセンス君が強力に働いてくれて便利だからです。
その後、名前、識別子、説明、開発者名、Git と聞かれます。
今回は、Git の設定は n にして置きました。
ずらーとモジュールがインストールされます。
手順3: Extension を実行
> cd first-ext > code .
code .
がうまくいかない時は、
first-ext フォルダを VSCode で開いてください。
ジェネレータを実行した状態で、
Hello world が試せるようになっているので、
作った Extension を実行してみましょう。
左側のデバッグボタン(虫)をクリック、緑色の再生ボタンをクリックします。
(ちなみに F5 キーでもいけますー)
すると、デバッグ用の VSCode がもう一つ起動します。
この状態で、Extension をテスト(=実行)できるわけです。
デバッグ用に開いた VSCode で、Ctrl + Shift + P
をしてコマンドパレットを開きます。
Hello world
と入力しEnter キーを押してみましょう。
Hello world というメッセージが表示されます。
この動きは、すべて今作った Extension で動いています。
では、どういう仕組みで動いているのか見てみましょう。
手順4: 動く仕組みは・・?
いまデバッグしていたウインドウは閉じて、
先ほどのプラグインを開いたウインドウに切り替えましょう。
まず、コマンドパレットで「Hello World」と入力しましたね。
これはpackage.json
の、contributes.commands
から取得されています。
ここでは、コマンドパレットでHello World
が実行されたら、
extension.sayHello
を実行すると書いてあります。
では、この extension.sayHello
はどこにあるのでしょう。
src/extension.ts
を開いてみましょう。
activate
関数の中に、
vscode.commands.registerCommand(...)
を呼び出している行があります。(17行目)
ここでは、extension.sayHello
コマンドが呼び出されたら、
第二引数のコールバック関数を実行する、となっています。
コールバック関数には、
vscode.window.showInformationMessage('Hello World!')
と書かれています。
これは、指定された文字列を先ほどのようなメッセージで表示する関数です。
手順5: 少し変えてみる
extension.ts を、少し変更してみましょう。
let disposable = vscode.commands.registerCommand('extension.sayHello', () => { // The code you place here will be executed every time your command is executed // Display a message box to the user vscode.window.showErrorMessage('Hello Error Message!'); });
似た関数で、showErrorMessage
という物があります。
これは、エラーを表示する関数です。
実行してみましょう。手順は先程と同じです。
(F5キーでもいけるよ)
同じように、Ctrl+Shift+P
から Hello World を選ぶと、
エラーメッセージ出現!
まとめ
このように、Extension は、
TypeScript + Node.js で開発できます。
また、公式サイトにも英語ですが、
Extension の作成方法が載っているので、
見てみてください。