VS CodeのゆるふわEmacs風カスタマイズ

VS Codeの強力なインテリセンスをホームポジションから手を離さずに。

僕の現在のメインのエディタはVimで、一番長く使っていたのはEmacsになります。

VS Codeは発表された頃使ってみて、まだ荒削りかなと思って静観していたのですが、先日下記記事を拝見して試してみたところ、おお！便利！と思ったのでVS Codeも少しだけカスタマイズしてこれから使ってみることにしました。

TypeScriptでPhotoshopを操る - Qiita

カスタマイズの趣旨

メインのエディタとして使うわけではないので、限定的なカスタマイズにしています。すべてのキーバインドをVimやEmacsにするというものではありません。気になるところを使いやすくした、と言うものになります。

ちなみに下記プラグインも使ってみましたが僕には合わなかったのでアンインストールしています。

GitHub - VSCodeVim/Vim: Vim for Visual Studio Code

どこを変更したか（何が嫌だったか）

個人的にVS Codeの最も優秀な点は軽量で賢いインテリセンスだと思うのですが、その際の操作感が気に入らなかったのです。

• 候補を出している時上下キーで操作
• 確定はEnterキー
• タブストップの挙動が怪しい（気のせいかも）

せっかくの優秀なインテリセンス、ホームポジションから手を離さず使いたいものです。（本設定はIntelliJ IDEAなどのIDEを使う時も行っています）

カスタマイズを行って、こんな感じの挙動を実現しました。

• 候補を出している時、C-n/C-pで操作
• 確定はC-mで
• タブストップをC-iで

これでスニペットの選択、確定、補完ターゲットの移動がホームポジションで行えますね。

改善しました

Mac用のキーリマッピングソフト、Karabinerを併用することでより便利になりましたので追記します。

以前の方法ではインテリセンスの候補上下選択・確定は可能でしたが、コマンドパレットなどではそれらのキーが効きませんでした。

それならいっそ、アプリに渡るキーイベントを下記のように書き換えてしまえばいいのではないか。というのが改善案です。

• C-nをカーソルダウンに
• C-pをカーソルアップに
• C-mをリターンに

設定

VSCode

settings.json

// 既定の設定を上書きするには、このファイル内に設定を挿入します
{
    "editor.fontFamily": "Ricty",
    "editor.fontSize": 14,
    "editor.formatOnType": true,
    "editor.scrollBeyondLastLine": false
}

keybindings.json

// 既定値を上書きするには、このファイル内にキーバインドを挿入します
[
    {
        "key": "shift+cmd+\\",
        "command": "workbench.action.splitEditor"
    },
    {
        "key": "cmd+ctrl+l",
        "command": "editor.action.format",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+i",
        "command": "jumpToNextSnippetPlaceholder",
        "when": "editorTextFocus && inSnippetMode"
    },
    {
        "key": "cmd+ctrl+r",
        "command": "workbench.action.tasks.runTask"
    },
    {
        "key": "cmd+ctrl+x",
        "command": "workbench.action.tasks.terminate"
    }
]

上記２つのJSONファイルを下記ディレクトリに入れればカスタマイズ完了です。

/Users/[ユーザー名]/Library/Application Support/Code/User/

Karabiner

※ VSCode以外の設定は削除しています

private.xml

<?xml version="1.0"?>
<root>
	<appdef>
		<appname>VSCODE</appname>
		<equal>com.microsoft.VSCode</equal>
	</appdef>
	<item>
		<name>Private Mapping</name>
		<item>
			<name>Custom VSCode Ctrl+C to ESC</name>
			<identifier>private.ctrl_c_to_escape_vscode</identifier>
			<only>VSCODE</only>
			<autogen>
				__KeyToKey__
				KeyCode::C, ModifierFlag::CONTROL_L,
				KeyCode::JIS_EISUU, KeyCode::ESCAPE
			</autogen>
		</item>
		<item>
			<name>Custom VSCode Ctrl+N to Cursor Down</name>
			<identifier>private.ctrl_n_to_cursor_down_vscode</identifier>
			<only>VSCODE</only>
			<autogen>
				__KeyToKey__
				KeyCode::N, ModifierFlag::CONTROL_L,
				KeyCode::CURSOR_DOWN
			</autogen>
		</item>
		<item>
			<name>Custom VSCode Ctrl+P to Cursor Up</name>
			<identifier>private.ctrl_p_to_cursor_up_vscode</identifier>
			<only>VSCODE</only>
			<autogen>
				__KeyToKey__
				KeyCode::P, ModifierFlag::CONTROL_L,
				KeyCode::CURSOR_UP
			</autogen>
		</item>
		<item>
			<name>Custom VSCode Ctrl+M to Return</name>
			<identifier>private.ctrl_m_to_return_vscode</identifier>
			<only>VSCODE</only>
			<autogen>
				__KeyToKey__
				KeyCode::M, ModifierFlag::CONTROL_L,
				KeyCode::RETURN
			</autogen>
		</item>					        
	</item>
</root>

これらのファイルはdotfilesとしてGitで管理すると便利ですね。まだカスタマイズして日が浅いので、これから手を入れるかもしれません。

JSX(Adobe)とUnity(C#)はVS Codeで書こうかなーと思っている今日このごろです。

備考

ワークスペースを左右に分離するショートカットはデフォルトで"cmd+\"なのですが、僕の環境だと"¥"がなぜかUndefinedで渡ってしまい効かなかったので"shift+cmd+\\"にしています。

Karabinerの設定に関する詳しい説明(Vim/Emacs/Pycharm向けの設定など)

設定ファイルの保存場所や作成ポイントなどもまとめています。

• [ Mac ] Vim/Emacs/VSCode/PyCharm向けKarabinerカスタマイズ - Qiita