VS Code vim で emmet展開するとVisualModeになってしまう問題をどうにかする

これ

`emmet.triggerExpansionOnTab` enters visual mode · Issue #5884 · VSCodeVim/Vim · GitHub

どうもすぐには解消されそうにないのでいったん力技で解決しておく。

解決方法

vimのKeyBindingsを利用して

emmet展開 -> VisualMode抜け -> “><“検索 -> InsertMode移行

の流れをショートカットキーで実現する。

具体的手順

tabに割り当てたかったのだけど、行頭では普通にtabとしても使いたいので諦めてshift+tabでemmet展開させることにした。

このキーに割り当てたせいで多少面倒なことになった。Ctrl+○的なキーのほうが設定は楽かも。

まずsetting.jsonでsneakを有効にしておく。これはsキー+2文字入力で検索できるVsCodeVim内包のvim拡張機能。

  "vim.sneak": true, 

で、keybinding.jsonをこうする。

    {
        "key": "shift+tab",
        "command": "extension.vim_ctrl+p",
        "when": "vim.active && vim.use<C-p>", 
    },
    {
        "key": "ctrl+1",
        "command": "extension.vim_ctrl+d",
        "when": "editorTextFocus && vim.active && vim.use<C-d> && vim.mode=='Insert'"
    },
    {
        "key": "shift+tab",
        "command": "-insertPrevSuggestion",
        "when": "hasOtherSuggestions && textInputFocus && !inSnippetMode && !suggestWidgetVisible && config.editor.tabCompletion == 'on'"
    },

ctrl+1を"extension.vim_ctrl+d"というコマンドに割当、shift+tabを"extension.vim_ctrl+p"というコマンドに割り当ててる。ctrl+1の方は実際は押さないのでまず使わないような押しにくいキーを選ぶ。(vimのinsertmodeでctrl+d,ctrl+pを使ってない前提)最後のは誤爆防止の為shift+tabの他の機能を無効化しただけ。

次にsetting.jsonをこうする

  "vim.insertModeKeyBindings": [
    // emmet 展開(実際はshift+tab)
    { "before":["ctrl+p"], "after":["ctrl+d", "Esc", "s", ">","<", "a"]} ,
  ],
  "vim.insertModeKeyBindingsNonRecursive": [
    {"before": ["ctrl+d"], "commands":["editor.emmet.action.expandAbbreviation"]} //実際はctrl+1
  ],

わかりにくいが、これはctrl+pとctrl+dに割り当ててるわけではなく、"extension.vim_ctrl+d"とかのコマンドに割り当ててる。

つまりはctrl+1でemmetの展開、shift+tabでemmet展開後、Esc,s,><,aと入力する、というコマンドを作っただけ。

これでshift+tabでそれっぽく展開されるようになる。

vscode

Posted by gran-gran-gran