Visual Studio Code でEmacsのリージョン選択できるExtensionを作ってみた
Visual Studio Code でEmacsのリージョン選択を行えるextensionを作ってみました。
https://github.com/t-yng/vscode-emacs-region
作り方については、 こちらのEXTENSIONSのページを参考にしました。
[開発環境]
OS : OS X El Capitan
プロジェクトの雛形を作成
雛形の生成にはYeomanとgenerator-code(Yoemanにおけるvscodeのextension生成ツール)を利用します。
Yeomanとはアプリケーション開発における、雛形の作成やビルドなどの作業をサポートしてくれる便利ツールです。
Yeoman入門(第一部、yoを使う) - from scratch
最初にYeomanとgenerator-codeをインストールします
$ npm install -g yo generator-code
続いてextensionの雛形を生成します。今回は、TypeScriptで生成します。
$ yo code
extensionの実行
生成した雛形を一度実行してみます。
- Visual Studio Code を起動して、「File」->「Open」から生成したextensionのディレクトリを選択します。
F5
を押すとextensionが実行され、新たにVS Code が起動します。F1
を押してコマンドパレットを表示して、「 Hello World」と入力すれば上の方に"Hello World"と表示されます。
リージョン選択の処理を実装
処理はextension.tsに記述していきます。
activate()関数は後述する package.json で設定したタイミングでextensionが有効になった時に一度だけ呼ばれる関数です。
今回の実装では、独自のカーソル移動コマンドを登録しモードの状態に応じてVS Code の内部コマンドを実行しています。
'use strict'; // The module 'vscode' contains the VS Code extensibility API // Import the module and reference it with the alias vscode in your code below import * as vscode from 'vscode'; var inRegionMode: boolean = false; // this method is called when your extension is activated // your extension is activated the very first time the command is executed export function activate(context: vscode.ExtensionContext) { // リージョン選択モードを開始 context.subscriptions.push(vscode.commands.registerCommand('emacs.startRegionMode', ()=>{ removeSelection(); inRegionMode = true; })); // リージョン選択モードを終了 context.subscriptions.push(vscode.commands.registerCommand('emacs.exitRegionMode', ()=>{ if(!inRegionMode){ return ; } removeSelection(); inRegionMode = false; })); var cursorMoves : string[] = ["cursorUp", "cursorDown", "cursorLeft", "cursorRight"]; // リージョン選択モードなら、選択コマンドを実行 cursorMoves.forEach((cursormove) => { context.subscriptions.push(vscode.commands.registerCommand("emacs."+cursormove, ()=>{ vscode.commands.executeCommand(inRegionMode? cursormove+"Select" : cursormove); })); }); } function removeSelection(){ var pos: vscode.Position = vscode.window.activeTextEditor.selection.active; vscode.window.activeTextEditor.selection = new vscode.Selection(pos, pos); } // this method is called when your extension is deactivated export function deactivate() { }
package.jsonを設定
package.json は extension の設定を記述したマニフェストファイルです。詳細はこちら
書いてあります。
"contributes"の"keybindings"にカーソル移動やリージョン選択モード開始のショートカットを設定しています。
因みに、ここで設定したキーバインドは「Prefereces」->「Keyboard Shortcus」で確認できるショートカット一覧にも表示されます。
{ "name": "emacs-region", "displayName": "emacs_region", "description": "this extension provides region selection like emacs", "version": "1.0.0", "publisher": "t-yng", "engines": { "vscode": "^0.10.6" }, "categories": [ "Other" ], "activationEvents": [ "*" ], "main": "./out/src/extension", "contributes": { "keybindings": [ { "key": "ctrl+F", "command": "emacs.cursorRight", "when": "editorTextFocus" }, { "key": "ctrl+B", "command": "emacs.cursorLeft", "when": "editorTextFocus" }, { "key": "ctrl+P", "command": "emacs.cursorUp", "when": "editorTextFocus" }, { "key": "ctrl+N", "command": "emacs.cursorDown", "when": "editorTextFocus" }, { "key": "ctrl+space", "command": "emacs.startRegionMode", "when": "editorTextFocus" }, { "key": "ctrl+G", "command": "emacs.exitRegionMode", "when": "editorTextFocus" } ] }, "scripts": { "vscode:prepublish": "node ./node_modules/vscode/bin/compile", "compile": "node ./node_modules/vscode/bin/compile -watch -p ./", "postinstall": "node ./node_modules/vscode/bin/install" }, "devDependencies": { "typescript": "^1.7.5", "vscode": "^0.11.0" } }
VS Code に作成したextension をインストール
~/.vscode/extensions
以下に作成したextensionのディレクトリを配置すれば
VS Code 上で利用できるようになります。
さいごに
Visual Studio Cdoe はDocumentがしっかりしていて、分りやすいです。
まだベータ版ということになっていますが、個人的に Sublime Text で感じていた不満点が解消されて、現時点で非常に使いやすいです。
このまま開発が続いて欲しいですね!