✌️

VSCode NeoVim拡張　使うまでに詰まったところ

2021/02/12に公開

VS Code

Neovim

tech

私は普段 VSCodeに vim拡張を入れて業務をしています

https://github.com/VSCodeVim/Vim

ですが、動作がもっさりしている点に辛さを感じています。

ちなみに、それでもVSCodeから離れないのは以下のような理由があります。

拡張機能が便利
- ペアプロとかも簡単
DevContainerが超便利
- 開発環境をチームで同じものを強制できる
  - コードの品質アップ！！
- ローカルに色々設定しなくても、コンテナ立ち上げ時に勝手に環境が出来る

なんとかVSCodeを利用しながら、Vimの機能を利用しつつ、もっさりを打破したい

という贅沢な悩みを解決したくて、VsCode NeoVim導入を試してみました！！
（以下の記事を見かけたのがきっかけです）

ですが、導入までの道中で詰まったところがありましたので、記録しておきたいと思います。

ちなみに私は諸々の事情で本導入を見送りました。まだまだ0系なので、さらなる進化に期待しています！！
（導入を見送った理由は最後に記載しています）

2021/8　から利用し始めました。やはりvim拡張に比べて圧倒的に早く動作するのが素敵でした（たまに動作が怪しいですが・・・）

前提条件

私の環境はこちらです。
似たような環境で導入にお困りの方には力になれるかもしれません。

- macOS Catalina v10.15.6
- VSCode v1.53.0
- Neo Vim拡張(asvetliakov.vscode-neovim v0.0.78)
- HomeBrew導入済み(brewコマンドが利用できる)

導入まで

NeoVimインストール

この拡張は　NeoVimがマシンにインストールされていなければ動作できないため、まずはNeoVim本体を導入します。

2021.2.11現在、NeoVimの0.5系以上の導入が必要となります

2021/07/16現在 neovimの0.5verリリースに伴い、nightly vesionのインストールが不要になったようです

私はHomebrewでインストールしましたが、インストールする際に --HEAD をつけて最新版を指定します。

また私の場合、 luajit も合わせて最新版を導入するようエラーが出ていました。
一旦 removeして最新版を入れ直します

# 既に入っているバージョンをアンインストール
brew unlink neovim
brew remove neovim
brew remove luajit
brew unlink luajit

# 最新版をインストール
brew install --HEAD luajit
brew install neovim

インストールが終了したら、 nvim コマンドで0.5系以上がインストールされていることを確認します。

また、 ~/.config/nvim/init.vim を作成していない場合は空ファイルを用意しておきます。

mkdir -p  ~/.config/nvim/
touch init.vim

VsCode拡張をインストール

拡張機能(id: asvetliakov.vscode-neovim)を導入します。

続いて公式の説明に記載してあるように、 neovimのパスと設定ファイルの場所を設定します。

# nvimのパスを確認
which nvim
> /usr/local/bin/nvim

VSCode で cmd + shift + p を押下して setting.json と入力して、 Preferences: Open Settings(JSON) を選択します。

以下設定をJSONファイルに追記してください。
(nvimのパスと設定ファイルの場所はご自分の環境に合わせてください。)

"vscode-neovim.neovimExecutablePaths.darwin": "/usr/local/bin/nvim",
"vscode-neovim.neovimInitVimPaths.darwin": "/Users/xxxx/.config/nvim/init.vim"

そして VSCodeを再起動すると、Vimのキーバインドで動作するようになりました！！

（VsCode-Vimを導入している場合は無効化してください）

vim-easymotinの導入

基本的にこの状態でプラグインをnvimで利用できるようにすれば、そのまま利用できます。
(.vimrcを読み取ってくれるようです)

一部拡張は使えないようですが、 vim-easymotionは正規プラグインだと問題があるようで、forkされているリポジトリのプラグインを利用できます。

Speaking honestly, original vim-easymotion works fine and as expected... except one thing: it really replaces your text with markers then restores back. It may work for VIM but for VS Code it leads to broken text and many errors reported while you're jumping. For this reason I created the special vim-easymotion fork which doesn't touch your text and instead use vscode text decorations. Just add my fork to your vim-plug block or by using your favorite vim plugin installer and delete original vim-easymotion. Also overwin motions won't work (obviously) so don't use them. Happy jumping!

私の場合プラグイン管理は deinを利用しています。

deinを利用している場合は、 init.vim に以下のように記載します。

if dein#load_state('Users/xxxx/.cache/dein')
    call dein#begin('/Users/xxxx/.cache/dein')

    " Let dein manage dein
    " Required:
    call dein#add('/Users/xxxx/.cache/dein/repos/github.com/Shougo/dein.vim')

    if exists('g:vscode')
      " vscodeの場合こちらのプラグインを利用
      call dein#add('asvetliakov/vim-easymotion')
      " sで任意の２文字から始まる場所へジャンプ
      nmap s <Plug>(easymotion-s2)
    else
      " それ以外(nvim起動等)の場合は正規vim-easymotionを利用
      call dein#add('easymotion/vim-easymotion')
      nmap s <Plug>(easymotion-overwin-f2)
    endif
    
    " Required:
    call dein#end()
    call dein#save_state()
endif

ここまでしておいて

~~以下のような理由で今回の導入は見送りました。~~

~~easy-motionのように正規プラグインを利用できないことが結構ありそう~~
~~左ペインのファイルツリー操作等に辛さを感じた~~
- ~~vscode-vimだと vimのキーバインドで操作できる~~

ファイルツリーの操作に関してはkeybinding.jsonに以下設定をいれています

{
  // ファイル・フォルダ削除
  {
    "key": "d",
    "command": "deleteFile",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceReadonly && !inputFocus"
  },
  {
    "key": "alt+cmd+backspace",
    "command": "-deleteFile",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceReadonly && !inputFocus"
  },
  // リネーム
  {
    "key": "r",
    "command": "renameFile",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
  },
  {
    "key": "enter",
    "command": "-renameFile",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
  },
  // 分割して開く
  {
    "key": "v",
    "command": "explorer.openToSide",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
  },
  // コピー
  {
    "key": "y",
    "command": "filesExplorer.copy",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
  },
  // ペースト
  {
    "key": "p",
    "command": "filesExplorer.copfilesExplorer.paste",
    "when": "explorerViewletVisible && filesExplorerFocus && !explorerResourceIsRoot && !explorerResourceReadonly && !inputFocus"
  }
}

とはいえ、

動作が早い
vimの資産を活かせる

という利点は凄いです！！

今後の進化を見守ります！！