【キラーアプリ】VSCodeの新たなVim拡張はNeoVimがおすすめ！ │ wonwon eater

VSCodeのVim拡張と言えば、青色のロゴのvscodevimが定番でした。そんな中でVim拡張で下剋上を成し遂げるほどのポテンシャルで成長しているNeo Vim拡張を紹介したいと思います。

1. VSCode Vimには問題が多かった
2. Neo Vim (VSCode Neovim)
3. VSCode Neo Vim インストール
4. 設定ファイル init.vim (.vimrc)

VSCode Vimには問題が多かった

いち早くVSCodeでVimエミュレータとして登場して活躍していたVSCode Vim拡張機能ですが、もっさりしていたり、応答が返ってこない、アップデートすると不具合がぽろぽろ出るなど、安定しているとは言えませんでした。
また、VSCode上でVimを再現しているためVimの設定ファイル .vimrcやvim用に作成されたプラグインは使えませんでした。

Neo Vim (VSCode Neovim)

Neovimはプロジェクトの思想からも、外部プロセスからNeovimへアクセスするためのAPIが豊富に揃っています。
VSCodeのNeo Vim拡張は、VSCode上でVimをエミュレートするのではなくNeovimを直接参照することで高速・安定・豊富なプラグインをそのまま使用してVSCode上でVimを実現する拡張機能です。

1年以上VSCodeVimを使用している筆者が1日で乗り換えを決める程、圧倒的なポテンシャルを秘めています。
ただし、InsertModeやWindow操作などの一部はVSCode上で実装されるなど、100%互換があるとは言えません。
実行にも別途Neovimをセットアップする必要があり、プラグイン等も通常のVimと同じようにPackageManagerでセットアップする必要があるので、環境構築に少々時間が掛かります。

VSCode Neo Vim インストール

拡張機能からインストール

拡張機能 (Ctrl+Shift+X) からNeo Vimをインストールします。

Neovimをインストール

Neovimの0.5.0 nightly以上が必要なので、ダウンロードして配置します。
安定版ではなくプレリリースのnightlyが必要なので、よく確認しましょう。

neovim Release
https://github.com/neovim/neovim/releases

※パッケージ管理ツールのscoopでも公開されています。

scoop bucket add versions
scoop install neovim-nightly

VSCode Neovimのパスをセット

基本設定 (Ctrl+,)からNeovimのnvim.exeのパスをセットします。

"vscode-neovim.neovimExecutablePaths.win32": "C:\\Users\\****\\scoop\\shims\\nvim.exe"

※WindowsOSの場合の設定例です。OS種ごとに設定値が分かれています。
※パスはNeovimのインストールディレクトリに書き換えてください

ここまで終えれば、動作に必要な最低限の設定は完了です。
VSCodeを再起動するとお馴染みのNormal, Insert, VisualといったVimの入力モードで編集が行える状態となります。

設定ファイル init.vim (.vimrc)

neovimの設定ファイルinit.vimを作成します。
vimで言うと.vimrcのことです。

ファイルの作成場所は以下のユーザーディレクトリにinit.vimを作成します。

C:\Users\****\AppData\Local\nvim\init.vim

パスのデフォルトはAppData以下ですが、環境変数$XDG_CONFIG_HOMEでセットしたパスの以下の構成で参照されるため、環境変数を書き換えることでディレクトリは移動できます。

$XDG_CONFIG_HOME/nvim/init.vim

インサートモードを抜けたら日本語IMEをオフにする

インサートモートでIMEを日本語入力に変更した状態でノーマルモードへ戻ると、「っっっっ」などと日本語入力になるため手作業で毎回IMEを英数に切り替えなければなりません。
gvimでは<Ctrl-^>で入力切替が出来たりしましたが、NeoVimでは対応されていないので、インサートモードを抜けるタイミングで別アプリをキックしてIMEを制御します。

zenhanをインストール

Windows向けになりますが、c++で実装されたアプリケーションで、
引数に0を与えるとIMEが無効
引数に1を与えるとIMEが有効になります。

元々VSCode VimのimSelectの代替として用意されたものですが、IME制御という点で問題ないのでそのまま使用させて頂きます。
ダウンロードして任意の場所に保存し、環境変数からexeがある場所のパスを追加します。

zenhan
https://github.com/iuchim/zenhan

scoopからもダウンロード可能です。

scoop install zenhan

ターミナルでzenhan 0と入力するとIMEがオフ、zenhan 1と入力するとIMEがオンになることを確認します。

init.vimにInsertLeave時に実行処理を定義

init.vimにインサートモードから抜けるタイミングで任意のコマンドを自動的に実行するようにセットします。
InsertLeaveイベント発生時にzenhanを呼ぶことで、インサートモードからノーマルモードへ移行したタイミングでIMEが自動的にオフになります。
ついでにCmdLineLeaveイベント発生時にも呼んでおくと、Search後にIMEがオフになるので便利です。

" ime off
if executable('zenhan')
autocmd InsertLeave * :call system('zenhan 0')
autocmd CmdlineLeave * :call system('zenhan 0')
endif

プラグインの追加

プラグイン管理ツールのvim-plugを使用する方法です。

Windowsの場合はPowerShellから以下を実行します。
vim-plugがNeoVimのautoloadディレクトリにダウンロードされます。

iwr -useb https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim |`
ni "$env:LOCALAPPDATA/nvim-data/site/autoload/plug.vim" -Force

vim-plugの使い方

有名な文字列を囲うsurroundを使用する場合の手順です。

init.vimにプラグインの開始(begin)から終了(end)を宣言し、間にインストールするプラグインを指定します。
指定方法はgithubのURLや短縮してユーザー/リポジトリだけでも可能です。

call plug#begin('~/.vim/plugged')
Plug 'tpope/vim-surround'
call plug#end()

PlugInstall

init.vimに使用するプラグインを記載しただけでは使用できません。
初回にPlugInstallからプラグインをインストールする必要があります。

PlugInstallはEXコマンドに入力して実行しますが、VSCode NeoVimでは正しく実行されないようなので、NeoVimを直接起動して実行します。

プラグインのインストールが開始されます。
完了後にVSCodeを再起動してプラグインが有効になっていることを確認します。

VSCode NeoVimではNeoVimと100%互換がある訳ではないため、正常に動かないプラグインもあります。
EasyMotion等も正常に動かないため、VSCode NeoVim作者自身がEasyMotionをForkして動作するように変更したものをリリースしています。

jkでインサートモードを抜ける

VSCodeのキーボードショートカットの設定に以下のように記載します。

{
    "command": "vscode-neovim.compositeEscape1",
    "key": "j",
    "when": "neovim.mode == insert && editorTextFocus",
    "args": "j"
},
{
    "command": "vscode-neovim.compositeEscape2",
    "key": "k",
    "when": "neovim.mode == insert && editorTextFocus",
    "args": "k"
}

インサートモードでCtrl+oを使うには

1コマンドだけ実行して直ぐにインサートモードへ戻るCtrl+oは拡張機能で未実装です。
既にIssueも挙がっており、現状は以下のキーバインドを追加することで使用できるようになります。
ただ、一部実行するコマンドによっては正確に動きません。

[
    {
        "key": "ctrl+o",
        "command": "vscode-neovim.send",
        "args": "",
        "when": "editorTextFocus && neovim.mode == insert"
    },
]

VSCodeのコマンドをマップするには

VSCodeの各種コマンドをcallすることでマッピング可能です。

nnoremap :call VSCodeNotify('workbench.action.closeOtherEditors')
nnoremap :call VSCodeNotify('workbench.action.toggleSidebarVisibility')

ノーマルモードでカーソル位置の単語をハイライトするには

VSCodeでは標準でカーソル位置の単語は全てハイライト表示されますが、VSCode Neovimでは2020年12月現在ハイライトされません。
VSCode側のAPIのバグじゃないかとIssueで話されていますが、とはいえ修正されるまでは不便なので以下の設定を追加することで、思い通りの動きになります。
カーソル移動イベントに対してVSCodeのカーソル位置の単語をハイライトするコマンドをキックします。

autocmd CursorMoved * :call VSCodeNotify('editor.action.wordHighlight.trigger')

init.vim設定例

私のinit.vimを記載しておきます。
（US配列のキーボード向けのマッピングです）

" vim-plugin manager
call plug#begin(stdpath('data') . '/plugged')

Plug 'asvetliakov/vim-easymotion'
Plug 'bkad/CamelCaseMotion'
Plug 'haya14busa/vim-edgemotion'
Plug 'junegunn/vim-easy-align'
Plug 'juro106/ftjpn'
Plug 'justinmk/vim-sneak'
Plug 'machakann/vim-highlightedyank'
Plug 'machakann/vim-sandwich'
Plug 'markonm/traces.vim'
Plug 'thinca/vim-visualstar'
Plug 'tpope/vim-commentary'
Plug 'vim-jp/vimdoc-ja'
Plug 'wellle/targets.vim'

call plug#end()

" ime off
if executable('zenhan')
   autocmd InsertLeave * :call system('zenhan 0')
   autocmd CmdlineLeave * :call system('zenhan 0')
endif

" define
let g:ftjpn_key_list = [
    \ ['.', '。', '．'],
    \ [',', '、', '，'],
    \ ['t', 'と'],
    \ ['n', 'に'],
    \ ['w', 'を'],
    \ ['h', 'は'],
    \ ['g', 'が'],
    \ ['d', 'で'],
    \ ['o', 'の'],
    \ ['i', '何'],
    \ ['c', '（', '）'],
    \ ['k', '「', '」', '『', '』', '【', '】'],
    \ ['!', '！'],
    \ ['?', '？'],
    \ [';', '!', '?', '^', '$', '#', ':', '&', '%', '~', '*', '！', '？'],
    \ ]
let mapleader = "\"
let g:highlightedyank_highlight_duration = 150
highlight Sneak guifg=black guibg='#458588'

" set
set clipboard+=unnamed
set ignorecase
set smartcase

" keymap
map f (easymotion-bd-f)
map s (easymotion-bd-f2)
map l (easymotion-bd-jk)
map f Sneak_f
map F Sneak_F
map t Sneak_t
map T Plug>Sneak_T
map J (edgemotion-j)
map K (edgemotion-k)
map w CamelCaseMotion_w
map b CamelCaseMotion_b
map e CamelCaseMotion_e
map ge CamelCaseMotion_ge
nmap w :w
nmap q :q
nmap Q :q!
nmap  gT
nmap  gt
nmap  :Tabonly
nmap n :tabnew
nmap ga (EasyAlign)

nnoremap \ :noh
nnoremap j J
nnoremap 0 ^
nnoremap ^ 0
nnoremap Y y$
nnoremap  :call VSCodeNotify('workbench.action.closeOtherEditors')
nnoremap  :call VSCodeNotify('workbench.action.toggleSidebarVisibility')

vmap J (edgemotion-j)
vmap K (edgemotion-k)

vnoremap 0 ^
vnoremap ^ 0

xmap ga (EasyAlign)

【キラーアプリ】VSCodeの新たなVim拡張はNeoVimがおすすめ！

VSCode Vimには問題が多かった

Neo Vim (VSCode Neovim)

VSCode Neo Vim インストール

拡張機能からインストール

Neovimをインストール

VSCode Neovimのパスをセット

設定ファイル init.vim (.vimrc)

インサートモードを抜けたら日本語IMEをオフにする

zenhanをインストール

init.vimにInsertLeave時に実行処理を定義

プラグインの追加

vim-plugの使い方

PlugInstall

jkでインサートモードを抜ける

インサートモードでCtrl+oを使うには

VSCodeのコマンドをマップするには

ノーマルモードでカーソル位置の単語をハイライトするには

init.vim設定例

プログラミングカテゴリの最新記事

VSCodeで5行単位で上下にまとめてカーソルを動かすショートカット

Laravel Factoryで単純に連番を振ったり〇〇単位で連番を振る方法

VSCode VimのEasyMotionでジャンプ元の場所に戻るには

declare(strict_types=1)をプロジェクト全体に適用する

Vuetifyのv-dialogをJestでテストする時に表示される警告の解消方法

【逆引き】Vue Test UtilsのJestでテスト記法のまとめ

【キラーアプリ】VSCodeの新たなVim拡張はNeoVimがおすすめ！

VSCode Vimには問題が多かった

Neo Vim (VSCode Neovim)

VSCode Neo Vim インストール

拡張機能からインストール

Neovimをインストール

VSCode Neovimのパスをセット

設定ファイル init.vim (.vimrc)

インサートモードを抜けたら日本語IMEをオフにする

zenhanをインストール

init.vimにInsertLeave時に実行処理を定義

プラグインの追加

vim-plugの使い方

PlugInstall

jkでインサートモードを抜ける

インサートモードでCtrl+oを使うには

VSCodeのコマンドをマップするには

ノーマルモードでカーソル位置の単語をハイライトするには

init.vim設定例

関連する記事

プログラミングカテゴリの最新記事

VSCodeで5行単位で上下にまとめてカーソルを動かすショートカット

Laravel Factoryで単純に連番を振ったり〇〇単位で連番を振る方法

VSCode VimのEasyMotionでジャンプ元の場所に戻るには

declare(strict_types=1)をプロジェクト全体に適用する

Vuetifyのv-dialogをJestでテストする時に表示される警告の解消方法

【逆引き】Vue Test UtilsのJestでテスト記法のまとめ