Closed20

Vim初心者がNeovimを試す

動機

  • VSCodeを使っているとコマンド操作できることでも覚えるのがめんどくさくてついマウスでポチポチしてしまうので自分を律したい
  • Vimってなんかかっこいいよね!

環境

  • Windows 10

インストール

scoop便利~

> scoop install windows-terminal
> scoop install powershell
> scoop install neovim-nightly

ターミナルはwindows terminalを使うことにした
shellとしてpowershell core(pwsh)を使う
ちなみにneovimはnightly(5.x)を使わないとwindows terminalをリサイズしたときに表示が滅茶苦茶になる

設定ファイル

指定位置にinit.vimを配置するとその設定が読み込まれるらしい。Windowsでのデフォルトは%LOCALAPPDATA%\nvimのようだがなんか深くて嫌だったのでLinuxと同じ~/.config/nvim以下に設定ファイルを配置することにした。
powershellなら~を普通にユーザーディレクトリとして認識してくれてよい。
neovimはXDG?というものに対応していてXDG_CONFIG_HOMEを設定すれば簡単に変えられるので環境変数を設定

プラグインマネージャを入れる

いろいろプラグインを入れることになりそうなのでプラグインマネージャを入れる
vim-plug

https://github.com/junegunn/vim-plug

dein.vim
https://github.com/Shougo/dein.vim
の記事が多いように感じた

なんとなくdein.vimを使ってみることにする
READMEの通りにしてインストール

> Invoke-WebRequest https://raw.githubusercontent.com/Shougo/dein.vim/master/bin/installer.ps1 -OutFile installer.ps1
> Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser
> ./installer.ps1 ~/.cache/dein

READMEの通りにinit.vimを書き換える

if &compatible
  set nocompatible " Be iMproved
endif

" Required:
" Add the dein installation directory into runtimepath
set runtimepath+={path to dein.vim directory}

" Required:
call dein#begin({path to plugin base path directory})

" Let dein manage dein
call dein#add({path to dein.vim directory})
if !has('nvim')
  call dein#add('roxma/nvim-yarp')
  call dein#add('roxma/vim-hug-neovim-rpc')
endif

" Add or remove your plugins here like this:
"call dein#add('Shougo/neosnippet.vim')
"call dein#add('Shougo/neosnippet-snippets')

" Required:
call dein#end()

" Required:
filetype plugin indent on
syntax enable

" If you want to install not installed plugins on startup.
if dein#check_install()
 call dein#install()
endif

Vimの操作に慣れてなさ過ぎてVSCodeで編集したのは内緒

Vimの基本操作を覚える

順番が間違ってる気がするけどまあいい
Vimにはモードというものがありちょっと使ってみた感じでは通常モード、選択モード、挿入モードの三つがわかってれば一応大丈夫な感じがした。iで挿入モードぐらいは知っていたがoで改行して挿入モードとかは知らなかった。これは便利そう。

↓以下よくつかいそうなコマンドの覚え書き

キー 動作
i 挿入モードへ
o 改行して挿入モード。行中のどこにあっても途中で改行されたりしないので便利
a カーソルの右の文字から挿入モード
v ビジュアル(選択)モード
Ctrl + v 矩形選択モード。行頭に文字挿入とかできる
  • 移動系
キー 動作
h j k l ← ↓ ↑ → (慣れない・・・)
Ctrl+D 半画面下へ
Ctrl+U 半画面上へ
gg 最初の行へ
G (Shift+g) 最終行へ
w 次の単語へ
b 前の単語へ
  • コマンド
キー 動作
:e <パス> 指定パスのファイルを開く
:w 保存
:wq 保存してウインドウを閉じる
:q! 保存しないでウインドウを閉じる
:qa すべて閉じる
source $MYVIMRC init.vimを再読み込みする。init.vimを修正した後にいちいち終了させなくていいから楽

dein.vimの設定をtomlに分離

特に理由はないけどそうしている人が多そうだったので・・・

set runtimepath+=~/.cache/dein/repos/github.com/Shougo/dein.vim

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

  let s:toml_dir = $HOME . '/.config/nvim'
  let s:toml = s:toml_dir . '/dein.toml'

  call dein#load_toml(s:toml, {})
  call dein#end()
  call dein#save_state()
endif

filetype plugin indent on
syntax enable

if dein#check_install()
  call dein#install()
endif

ちなみにこれもVSCodeで(略

Vimを設定

Vim自体を設定する。色々調べた結果こうなった

set number
set tabstop=2
set shiftwidth=2
set expandtab
if has("win32")
  set shell=pwsh
  set shellcmdflag=-c
  set shellquote=\"
  set shellxquote=
endif

shellのよくわかんないオプションはdeol.vimというプラグインを使うときにこうしないとpowershellがうまく動かなかった。意味は分かっていない。neovimビルトインの:terminalではうまくいったんだけど・・・

プラグインの設定

プラグインの設定をするときはtomlファイルの各pluginセクションのhook_addに設定スクリプトを書くといいようだ。

プラグインを入れる

いろいろプラグインを入れていく

ファイラ

いろいろあるみたいだけどとりあえず老舗らしいNERDTreeを入れることにした。
またvim-deviconsを使えばアイコンを表示させることができる。(Nerdフォントが必要。自分はHackGenNerdというフォントを使っているのでそのまま使えた。)

[[plugins]]
repo = 'preservim/nerdtree'

[[plugins]]
repo = 'ryanoasis/vim-devicons'

補完とか

自分は基本フロントエンドな開発をしていることが多いのでそっち方面に親和性が高そうなcoc.nvimを入れることにした。これ一つでシンタックスハイライトから補完までやってくれるようだ。VSCodeでも使われているLSPというものに対応していてVSCodeと同等の補完能力がある。らしい。
CocInstallコマンドを使って様々な言語に対応させることができるようだが移植性が低くなってしまうのでいろいろ探した結果g:coc_global_extensionsにcocの拡張の配列を入れれば自動的にインストールしてくれることが分かったので下のようにしている。

[[plugins]]
repo = 'neoclide/coc.nvim'
rev = 'release'
hook_add = '''
  let g:coc_global_extensions = ['coc-json', 'coc-css', 'coc-eslint', 'coc-prettier', 'coc-tsserver', 'coc-toml', 'coc-yaml']
'''

ターミナル

neovimにはターミナル機能が内蔵されているが、deol.nvimというプラグインでいろいろ高度な機能を使えるらしい。下の記事を参考にキーバインドとかを設定する。

https://qiita.com/pyama2000/items/fafdbc77f394e71a9dd8#deolnvim
これをやるとCtrl+Oでフローティングなターミナルが開くCtrl+Oはバッファの戻る操作とバッティングするのでCtrl+Tにした。このターミナルにも通常モードと挿入モードがあって通常モードでqを押してターミナルを隠せる。
[[plugins]]
repo = 'Shougo/deol.nvim'
hook_add = '''
  nnoremap <silent><C-t> :<C-u>Deol -split=floating<CR>
  tnoremap <ESC>   <C-\><C-n>
'''

yarn runが動かない

vimのターミナル上でnpm scriptsをyarnで実行したときのみ.bin以下がなぜかPATHに追加されなくて実行に失敗する。
npm runやpnpm runは普通に動く。vim外のターミナルでも普通に動く
yarnのバグかなんかだろうか

テーマ

VSCodeのテーマが好きなのでVSCodeのテーマを移植したcolorschemeであるvim-code-darkを入れることにした。
これがちょっと曲者でcolorshemeは諸々の読み込みが終わった後に設定しないといけないらしいのでこういうよくわかんない設定になっている。
参考↓

https://qiita.com/kawaz/items/ee725f6214f91337b42b#colorscheme-は-vimenter-に-nested-指定で遅延設定する
[[plugins]]
repo = 'tomasiser/vim-code-dark'
hook_add = '''
  autocmd! VimEnter * nested colorscheme codedark
'''

vim-airline

ステータスバーがいい感じになる。なんとvim-code-darkに対応しているのでそれを設定する。

[[plugins]]
repo = 'vim-airline/vim-airline'

[[plugins]]
repo = 'vim-airline/vim-airline-themes'
hook_add = '''
  let g:airline_theme = 'codedark'
'''

git

vim-gitgutterはgitの差分がある行を表示してくれる。そう、VSCodeのようにね。
vim-fugitiveではgitのいろんな便利コマンドが用意されている。:GstatusなんかはVSCodeのgitパネルの代替になりそう。

[[plugins]]
repo = 'airblade/vim-gitgutter'
[[plugins]]
repo = 'tpope/vim-fugitive'

VimでGit操作するのは初心者にはきつそうなのでいいプラグインがないか探していたところ

https://github.com/kdheepak/lazygit.nvim
を見つけた。
フローティングウインドウにlazygitが表示されるので使いやすそう

デバッガ

puremourning/vimspectorを使う。
プロジェクトごとに.vimspector.jsonを作成する必要があるのだがこれは書式がVSCodeのlaunch.jsonと全く同じなのでコピペして動いた。g:vimspector_enable_mappingsオプションをHUMANに設定すればF5でデバッグ実行できる。ViteのサーバーにアタッチさせてみたがTypeScriptも問題なくデバッグできている。

[[plugins]]
repo = 'puremourning/vimspector'
on_ft = ["javascript","typescript"]
build = "./install_gadget.py --force-enable-chrome --force-enable-node"
hook_add = '''
  let g:vimspector_enable_mappings='HUMAN'
'''

いろいろ

[[plugins]] #括弧とかを自動で閉じてくれる
repo = 'jiangmiao/auto-pairs'

[[plugins]] #同じインデントのところに縦線を引いてくれる奴
repo = 'Yggdroot/indentLine'
hook_add = '''
"indentline"
let g:indentLine_color_term =239
let g:indentLine_color_gui = '#708090'
let g:indentLine_char = '¦'
'''

ここまでやって完成したのがこちら

見栄えの面でもVSCodeに全く負けておらずかなりイケてるように感じる。

VSCodeライクに

マウスオーバーしたときにいろいろでてくるやつ


↑こういうやつ

https://github.com/neoclide/coc.nvim/issues/869#issuecomment-501323697
これの通りにやるとほぼ同じ機能が実現できる。

Ctrl+左クリックで定義へ移動

coc.nvim公式の通りにキーマップを設定

nmap <silent> gd <Plug>(coc-definition)

これでgdを押せば定義へ移動できる。ほかにも参照へ移動とかいろいろできる。
(キーマップ覚えれない・・・)

雑に閉じたい

VSCodeだとファイルを保存していなくても閉じて再度開いたら保存されていない状態のままタブが復活するのだがこれはどうすればいいだろう
追記: hot exitと言うらしい

どうにも無理そうなのでファイル保存はあきらめてsessionだけを使うことにする
vim-workspace

https://github.com/thaerkh/vim-workspace
を使うとよさそう

バッファ操作

VSCodeではファイルを開くと自動で新しくタブが作られていたがどうもvimのタブは別ファイルというよりは別プロジェクトを開くためのもののような感じがする。
かわりにバッファというものがあって閉じたファイルも保持されているらしい。これでタブの代わりになりそう・・・?

https://zenn.dev/sa2knight/articles/e0a1b2ee30e9ec22dea9
この記事を参考に設定してみる
このスクラップは2021/03/15にクローズされました
作成者以外のコメントは許可されていません