にわとりプログラマーの備忘録

覚えたことをすぐ忘れてしまう、自分のための備忘録ブログです。

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"と表示されます。

f:id:t-yng:20160306104340p:plain

リージョン選択の処理を実装

処理は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 で感じていた不満点が解消されて、現時点で非常に使いやすいです。
このまま開発が続いて欲しいですね!