VSCodeの新たなVim拡張 Neo Vim(VSCode)を試してみた
2021年 05月 06日 木曜日
新人アルバイトの鳥居と申します。よろしくお願いします。
##これまでの開発環境
今回はVimからVSCodeへの移行というテーマですが、少し前置きすると
私は未経験から完全に独学でプログラミングを始めた身であり、
最初こそVSCodeを使っていました。
というのも、「初心者ならエディターはこれ使っておけ」と
多くのネット記事で薦められていたのがVSCodeだったからです。
初めの頃はとにかく書いたコードがちゃんと動くように
学習を進めていくのが最優先だったため、
VSCodeのキーバインドやショートカットを大して活用していませんでした。
対して、Vimに関してはLinuxコマンドの基本操作を学んだ時などに
ちらっと見たことがあったかな…？程度でした。
しかし、学習を進めていく中で、デプロイ周りにAWSを使って
インスタンスを立て、ssh接続し、その中で設定ファイルを編集したい、
という時に、初めてVimの壁が立ちはだかりました。
「下に行くにはj, j , j…っと、入力は…i押して、
あれどうやって閉じるんだっけ」
こんな調子で、
大した記述をしたい訳でもないのに時間がかかって始末が悪かったです。
初めてのVimはとてもとっつき難く、ネガティブなイメージを抱いていたのですが、
途中から考えが変わり、これを使いこなせればどんな環境でも怖気付くこともない、
そしてキーボードで操作が完結できるのってなんかかっこいい…
と思い始めるようになってからは、
Vimを網羅的に学べる良書『実践Vim』から始まり、
Vimに関する記事をひたすら漁り、だんだんその魅力に浸かり込んでいったのでした。
Vimでは、単純なファイル編集だけでなく、プロジェクトディレクトリごと開いて
プロジェクトディレクトリ配下の各種ファイル操作であったり、
バッファを活用した編集ファイルの切り替え、
Vimを開いた状態のまま複数タブのターミナル操作、
Gitの各種コマンドや差分表示、LSPを用いた入力補完、
ディレクトリ内のファイルや単語の検索等を実現させるために、
下記のようなプラグインを導入していました。
これにより、IDEに引けを取らない快適なコーディング環境を実現していました。
- NERDTree
ディレクトリツリーの表示とファイル操作に関するプラグイン - fzf
高速なあいまいファイル検索・単語検索 - vim-airline
ステータスバーの見た目をカスタマイズできるプラグイン - vim-gitgutter
fugitive.vim
gitの各種コマンド実行や差分表示 - neoterm
ターミナルを便利に使えるようにするプラグイン - ALE
構文チェックやエラー表示をしてくれるプラグイン - vim-lsp
asyncomplete.vim
言語サーバのインストールとオートコンプリート
##移行のきっかけ
前述のようにVimの設定を色々弄りながらも、VSCodeをもう一度便利に使えないか
何度かトライしたことがありました。
VSCode内でVimキーバインドが使える拡張機能VSCodeVimを
入れてみたりもしましたが、Vim独自の設定ファイル(vimrcやinit.vim)と
同期できない以上、細かな挙動の違いがどうしても気になってしまい、
そのための設定をVSCode側で逐一記述するのも骨が折れそうで
挫折を繰り返していました。
それでも、やっぱりVSCodeを使ってみたい、と強く思ったきっかけが
Reactとの出会いです。
ある時、業務でReactを用いた開発のタスクを振っていただき、
これまでに触ったことがなかったためゼロから勉強をスタートしました。
Reactについて日本語で書かれたものでは屈指の名著と言われる
『りあクト！』シリーズで、
VSCodeが超絶お薦めされていました。
その内容によると、
世界のJavaScriptユーザーのVSCodeの使用率がぶっちぎりに高いという
調査結果があるということと、
React(及びTypeScript)と親和性が高く、コーディング中の自動チェックや、
入力支援などの便利な機能が多く盛り込まれているということが記述されていました。
例を挙げると、TypeScriptの変数がコンパイラにどう型推論されているのかを、
変数名の上にマウスカーソルをホバーさせることで、ポップアップ表示してくれたり、
リンターやフォーマッタが走ってエラーや警告が出た際に、
該当箇所の上でマウスカーソルをホバーさせるとその内容をポップアップ表示、
またチェックに関する細かい設定ができたり、というものがあります。
入力候補やリンターに関してはVimでも設定していましたが、
私の環境だと表示されるまでタイムラグがあったりと少し気になる所がありました。
VSCodeだとタイムラグがVimよりも短く、体感でタイプした瞬間に示してくれるので
コーディングしているときの心地よさが違いました。
また、マウスカーソルのホバーでポップアップ表示してくれるのも手軽さがあり
地味にとても便利でした。
更にVSCodeだと、リンターでの指摘箇所で、どのルールに抵触して何が問題なのかを
表示してくれるだけでなく、メッセージ内のルール名をクリックすると
そのルールのドキュメントページをブラウザで開いてくれるという機能まであり、
こういったものはVimで実現するのはなかなか難しいものだなと思いました。
せっかくReactを始めるなら、より快適にコーディングできそうな
VSCodeに乗り換えよう！と思って更に調べを進めていく中で、
これまで私が使ってきたNeovimがVSCode内で使えるという、拡張機能
Neo Vim(VS Code Neovim)(以下、vscode-neovim)
があることを知りました。
これのすごいところは、なんとNeovimの設定ファイルであるinit.vimが
VSCodeでそのまま(プラグインまで)同期して使える、ということです。
これは乗り換えるしかない、ということで早速導入を始めました。
##vscode-neovimの概要
Neo Vim(VSCode)は、前述の通りNeoVimとVSCodeを統合する拡張機能です。
VSCodeVimのようにVimをエミュレートするのではなく、本物のNeovimとして
動作させることができます。
##インストール
まずはVSCodeの拡張機能で、vscode-neovimをインストールします。
拡張機能を有効にさせるためには、プレリリース版である
NeovimのNightly0.5.0以上が必要のため、MacのHomebrew経由で入れる場合は
--HEADオプションが必要になります。
$ brew install --HEAD neovim##プラグインの壁
インストールし終えた後は、
すぐにプラグインが反映されて問題なく使えると思っていたのですが、
いざ触ってみると、プラグインが反映されていませんでした。
私はプラグインマネージャとして
dein.vimを利用していたのですが
どうやらこれとの相性が合わなかったらしく、調べてみると
vim-plug なら正常に動くとのことだったので、
この機会に乗り換えました。
vim-plugは設定がとてもシンプルなので移行するのにも手間がかからず、
簡単にできました。
##init.vimの変更点
VimをIDEに近づけるために、上記に示したようなプラグインを使っていましたが、
VSCodeは当然IDEなので、ファイルエクスプローラや検索機能、ターミナル等が
デフォルトでついているため、そちらをVimと同じ感覚で使えるように
キーバインド設定をしつつ、VSCodeでは使わずVimだけで使いたいプラグイン等は
切り分ける設定を追加しました。
下記のように記述することで設定できます。
if !exists('g:vscode')
(...VSCodeでは使わずVimだけに反映させたい設定の記述)
end##使ってみて感じたメリット・デメリット
どのエディターにも強み・弱みがあると思います。
独学で勉強する限りでは、元々設定していたNeovimで十分条件を満たせていました。
しかし、入社後、先輩社員に教わりながらコーディングしていく機会も多いため、
- エディタ上でマウスによるカーソル移動ができる
- リンターチェックのタイムラグが短い
細かいですが、この辺りはVSCodeに変更してよかったなと思うところでした。
また、gitの差分表示を、画面を垂直分割してよく利用していましたが、
VSCodeに乗り換えて個人的には視認性が高まりました。
Vimキーバインドを使いつつも、やはりマウスで手軽に動けるのも便利だなと
改めて痛感しました。
デメリットとしては、以下のようなものがあります。
- ノーマルモードで日本語モードになっていると、インサートモードでもないのに
そのまま入力されてしまう。 - ファイルエクスプローラやターミナル等はVSCodeデフォルトのものなので、
ノーマルモードによるVimのキーバインドが使えない
(ファイルエクスプローラについてはマウスを使うほどでなければ
ctrl+pやctrl+n等で代用)
乗り換えてまだ日が浅いため、まだしっかりと突き詰めて設定できていない所が
多いですが、デメリットよりもVSCodeの便利さが上回るので、
今のところトライしてみて良かったなと思います。
大変長くなってしまいましたが、以上です。
これからもReact学習や、その他勉強を進めていき、もっと業務で貢献できるよう
邁進していきたいと思います。