動機

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をリサイズしたときに表示が滅茶苦茶になる

nazo6

設定ファイル

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

nazo6

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

いろいろプラグインを入れることになりそうなのでプラグインマネージャを入れる
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で編集したのは内緒

nazo6

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を修正した後にいちいち終了させなくていいから楽

nazo6

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で（略

nazo6

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に設定スクリプトを書くといいようだ。

nazo6

プラグインを入れる

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

ファイラ

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

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

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

nazo6

補完とか

自分は基本フロントエンドな開発をしていることが多いのでそっち方面に親和性が高そうな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']
'''

nazo6

ターミナル

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

これをやると~~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>
'''

nazo6

yarn runが動かない

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

nazo6

テーマ

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

[[plugins]]
repo = 'tomasiser/vim-code-dark'
hook_add = '''
  autocmd! VimEnter * nested colorscheme codedark
'''

nazo6

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'
'''

nazo6

git

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

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

nazo6

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

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

nazo6

デバッガ

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'
'''

nazo6

いろいろ

[[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 = '¦'
'''