Vim から Neovim に移行 && 入門した雑記録

React + TypeScript を書くようになり初めてから、普段使ってた Vim だと特に LSP の設定とかせずただのデバッガーで確認しながらやってたので、LSP もしっかりしてそうでずっと気になってた Neovim に入門することにした。フロントエンドでも Vim 使ってる人がたくさんいたことによる安心感もある。
いつも使ってた Vim も共存しながら扱っていこうと思うので、ついでに Neovim 向けに 設定ファイルも全部 Lua で書いていくことを目指す💪

packer.nvim ってメンテナンス終了してたんだしらなかった()
NOTICE:
This repository is currently unmaintained. For the time being (as of August, 2023), it is recommended to use one of the following plugin managers instead:
じゃあもう lazy.nvim やな
こちらの記事で知った

Homaju さんのブログの Vim 記事役に立ちすぎる…ずっと読んでる

ちなみに今の僕の .vimrc
はこんな感じ

キーマップの設定で学びがあったのでメモ。
どうやら Neovim には現状 2 種類のキーマップの設定があるらしい
結論
vim.keymap.set
を使う
Vim の場合
例えば Vim の Insert モードから Normal モードに抜ける時大体 Esc キーをタイプするが、キーボード的に Esc キーは割と遠い位置にあるのでので僕はホームポジションをキープしながら jj
とタイプすることでいつも Normal モードから抜けている。その時の Vim における設定は以下のように書く。
inoremap <silent> jj <ESC>
Neovim の場合
これを例にして Neovim で Lua を使って表現する場合、現状 2 パターンの書き方がある。
vim.api.nvim_set_keymap
を使う
1. vim.api.nvim_set_keymap('i', 'jj', '<ESC>', { noremap = true, silent = true })
vim.keymap.set
を使う
2. vim.keymap.set('i', 'jj', '<ESC>', { noremap = true, silent = true})
以上の 2 パターンがあるが、直近の commit や Reddit の議論を読むに、vim.api.nvim_set_keymap
が v0.5 時代に作られた書き方に対し、vim.keymap.set
が比較的新しいキーマップの書き方のよう。個人的にはvim.api.*
がかなり冗長してきているのもあるから、キーマップ部分切り離したのではくらいの気持ちで解釈している。なので後者を採用することとする。
参考

こちらの記事を参考にとりあえず一通り設定ファイルを書いてみる

Vim のキーバインドに絶対慣れる!!という強い意志で、 .vimrc
に
" 方向キー無効化
noremap <Up> <Nop>
noremap <Down> <Nop>
noremap <Left> <Nop>
noremap <Right> <Nop>
って書いてたけど、実際本当に使わなくなったのと、なんかの拍子で矢印キーしか使えない状況がある(?)ときに不便なので、これは Neovim の設定ファイルに書かないことにした。
(だけど、読者が入門 Vimmer で未だに矢印キー使っちゃう!って人は、この方向キー無効化の縛りプレイは控えめに言って結構ありですw)
ちなみにこれを Neovim(Lua) で書くなら
-- 方向キー無効化
vim.keymap.set('', '<Up>', '<nop>')
vim.keymap.set('', '<Down>', '<nop>')
vim.keymap.set('', '<Left>', '<nop>')
vim.keymap.set('', '<Right>', '<nop>')
ちなみに map 系のコマンドの違いはまだ微妙に理解してない()
参考

ついに Plugin 系の導入にはいったが、いろいろ設定書いたりするの眺めててもわけわからんってなったのでとりあえず雑に入れることにするw

Lua と向き合うための記事メモ

日本語でアレコレするときによさそう

公式の Neovim Lua Guide (JP)

だんだん俺好みになってきたぞ…!!かっこいい!!!

fzf を入れる

fzf テンション上がる!!!!!
こんな感じで使うやつ一旦割り当ててみた
vim.g.mapleader = " "
vim.keymap.set('n', '<leader>F', "<cmd>lua require('fzf-lua').files()<CR>")
vim.keymap.set('n', '<leader>b', "<cmd>lua require('fzf-lua').buffers()<CR>")
vim.keymap.set('n', '<leader>f', "<cmd>lua require('fzf-lua').git_files()<CR>")
vim.keymap.set('n', '<leader>g', "<cmd>lua require('fzf-lua').live_grep()<CR>")
mapleader まともに使ってなかったけど、スペースでやるのめっちゃいいな

やっぱりカラースキームは Gruvbox だな

vim-sandwitch 名前かわいい🥰

coc-nvim を導入しようと思ってるけど、これを導入するのに lazy.nvim で導入してる人がぜんぜん見つからない。もしやみんな別のパッケージマネージャーつかってるのかな

普通にいけた。雑だけどひとまず
require("lazy").setup({
{
'neoclide/coc.nvim'
}
})
でうまくいった

coc-nvim で追加できるプラグイン一覧どっこにも見つからんなぁって思ったけど見つけた。なるほど Wiki を参照すればよかったのか。Document の読解力もっとつけたいな…w

ここでもみれた

coc-nvim の設定を呼び出すには :CocConfig
コマンドですぐ呼び出せる。
そのときに nvim/coc-settings.json
が作られるっぽい

coc-lua を入れたら init.lua でエラーちゃんと出るようになって幸せ

Neovim の表示言語を英語にしたくてそれ用の Neovim コマンドあるかなって思ったけど探せなかった()なので無難にこれは vim.cmd()
で
vim.cmd('language C')
でうまくいった

kanagawa.nvim もテーマかっこいい

なんかフォントが文字化けしてよくわからんことなった

なに!? latn1 って文字コード初めて知ったんだけど!?これが原因かあああ

あああああああああ

ついに Git の差分とかいい感じにみれるやつ入れる。見た目かっこいいい gitsigns.vim

またいい記事を見つけてしまった

ステータスラインは今のところ lualine.nvim を採用

閉じカッコを自動的に書いてくれるやつ

コメントアウトするやつ comment.nvim

nvim-treesitter ああああああ!!!わかりそうでわからん!!!!!!でもわかりたい!!!!

おそらくアップデートするコマンドが :TSUpdate
なんだけど、TS って書かれると TypeScript かと空目しちゃうな()

.tsx
ファイルのコメントアウトが便利になる nvim-ts-content-commentstring を入れた時にハマったメモ
前提として、コメントアウトを行う Plugin として Comment.nvim を採用している。
※一応こちらの README.md にも手順が追加されているのでそちらもご参考まで。まず nvim-treesitter と依存関係にあるので、必ず入れる
その後、 nvim-treesitter の設定で tsx をインストールするように ensure_installed
に追記しておく。
以下は lazy.nvim での書き方の場合。
require("lazy").setup({
{
'nvim-treesitter/nvim-treesitter',
event = {'BufNewFile', 'BufRead'},
build = ":TSUpdate",
config = function()
local configs = require("nvim-treesitter.configs")
configs.setup({
ensure_installed = { "c", "lua", "vim", "vimdoc", "query", "elixir", "heex", "typescript", "javascript", "tsx", "html", "markdown" },
sync_install = false,
highlight = { enable = true },
indent = { enable = true },
})
end
}
})
これで tsx の構文解析ができるようになる。 nvim-treesitter の説明はここでは割愛。こちらの記事がとても参考になった。
これを踏まえて、 nvim-ts-content-commentstring の Wiki に書かれてある手順に沿って更に設定を追記する。
require('ts_context_commentstring').setup {
enable_autocmd = false,
}
require('Comment').setup {
pre_hook = require('ts_context_commentstring.integrations.comment_nvim').create_pre_hook(),
}
これで無事に tsx ファイルで JS 部分と HTML 部分でそれぞれコメントアウトが効くようになった💯

そーろそろ init.lua がまったく init なファイルじゃなくなってきてるのでリファクタするか〜

devicons 設定に合わせて iTerm2 も設定変えてみたけど、いまいちしっくり気てないw

nvim-lspconfig っていつ使うんやろって思ったけど、多分 coc-nvim つかってるうちはそっちで大丈夫?って解釈でええんかな?🤔

基本 Tmux と一緒に使ってるのでこれも参考にしよ

こちらの記事でとりあえず coc-nvim を用いた React + Typescript + Prettier + ESLint (+ Vue) の開発環境ができた!

この方の Lua ファイルのファイル構造めちゃくちゃ参考になるメモ

init.lua これだけなの超かっこいい!!パクる!!

プラスでこちらの記事も参考に組み合わせたらめちゃくちゃよさそう
やっぱりプラグイン別で設定ファイル管理したい

メモ


カラーコードがわかりやすくなるやつ

fuzzy-motion よさそう

日本語まわりの config 参考になる

Neovim のサイドバー使うプラグイン。nvim-tree.lua
個人的にもやるのは、 <C-w><C-w>
で分割してるファイルをいつも遷移してるけど、このサイドバーも対象になってしまうのでどうにかいい方法ないかな

Neovim でのファイルごとにタブのスペース数を変えるようにする設定がまだ見つけれていない
理想はこれ。 Lua でも書き方ありそうなんだけどな

Neovim のスクロールがヌルヌルになるやつ neoscroll.nvim

Neovim で LSP 周りを調整したい時に参考にしたい記事

vim-doc の入れ方がいまいちわかってない

あ、これもかっこいくなるやつやメモ

単純だけどしらなかった。直前のコマンドを繰り返すときは .
を打てば良い