Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

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"
    }
]

上記2つの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向けの設定など)

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

kickbase
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした