neovimでVSCodeみたいな統合開発環境を作りたかったので、以下その記録を残す。

（VSCodeは統合開発環境なのか？エディタだろ！というツッコミがあるかもしれないが、拡張機能を入れればほぼ業務に耐えうる開発環境が得られるので、完成系としてVSCodeを目指す）

そもそもなぜVSCodeではなくnvimを使うのか

なぜなら、背景に可愛いイラストを表示しながらコーディングしたかったからである。

VSCodeは基本的に背景画像を設定したりすることはできない。一応直接設定ファイル(setting.jsonのことではなくアプリケーションそのものの設定ファイル）をいじれば表示できるみたいなことが書いてあるし(ただしmacでの事例は見つからなかった）、拡張機能も公開されている。しかし、拡張機能を利用すると毎回起動時にエラーが発生してしまい、アンインストールした後もずっと出続けてしまう。

と言うことで、VSCodeで背景に可愛いイラストを表示するのは諦めて、背景画像を設定したiTerm2上でnvimを利用することにした。

もちろん、なんかnvimでコーディングするのかっこいいよねと言うのもある。

業務のことを考えると普通にvscodeでいいと思うが、趣味の範囲で好みに合うnvim環境を作っていく。

環境

Mac mini (M2プロセッサ/8GB) ←macminiの一番安いやつ
MacOS Sonoma バージョン14.1.2
iTerm2 Build 3.4.19

完成系は以下

方針

LazyVimを使用する。

なぜなら、YouTubeで超イケてるコーディング動画をあげているエンジニアのdevaslifeさんが最新のブログ記事でそう書いていたからである。

一旦これを用いてセットアップを行い、その後さらにカスタマイズしていって最強の開発環境を手に入れようと思う

手順

Initialization

とりあえず公式ドキュメントのに書いてあるとおりInitializationをやる

以下は基本的に上記の資料をもとに書いているので参照しながら見てください

フォルダの整理

# required
mv ~/.config/nvim{,.bak}

# optional but recommended
mv ~/.local/share/nvim{,.bak}
mv ~/.local/state/nvim{,.bak}
mv ~/.cache/nvim{,.bak}

no recommendとあるが、過去にちょっとでもnvimいじったのであれば、configファイルだけでなくshareのlua設定あたりも全部消しておく。

プロジェクトをclone

git clone https://github.com/LazyVim/starter ~/.config/nvim
rm -rf ~/.config/nvim/.git

これで終わりあとはnvimを開くと以下の画面になる

nvim

背景を透過させるためにMake TokyoNight Transparentを入れる

上記の通り、cloneしてきただけでそれっぽくなったただ、これではバックグラウンドにイラストが表示されないではないか！！！

公式ドキュメントを読み進めると、どうやら「Make TokyoNight Transparent」と言うプラグインがある模様指示通りに導入する

プラグインファイル作成

どうやら、lazy.vimでは~/.config/nvim/lua/plugins配下に置いたプラグイン設定を書いた.luaファイルは自動で全部読み込まれるらしい。

とりあえず、ドキュメントに書いてあるとおりにファイルを作ってみる

# ファイル作成
nvim ~/.config/nvim/lua/plugins/transparent.lua

nvimが開くので、iキーを押し（流石にこれは普通のvimと一緒）ドキュメントに書かれた設定を記載する。

return {
  {
    "folke/tokyonight.nvim",
    opts = {
      transparent = true,
      styles = {
        sidebars = "transparent",
        floats = "transparent",
      },
    },
  },
}

return{}を忘れないこと無事透過になった！

Neo-Treeを導入する

VSCodeや他の統合開発環境にみたいに、左端に開いているワークスペースのファイル・フォルダ一覧みたいなのを表示したい。公式マニュアルにNeo-Treeの記載があったので、その通りに導入していく。

# ファイル作成
nvim ~/.config/nvim/lua/plugins/file-explorer.lua

「Full Spec」に書かれている設定を転載する。※return {}で囲うのを忘れないこと！するとこうなる。多分いい感じにできた！

補足: あと、デフォルトで開くようにしたい。

nvim ~/.config/nvim/init.luaに以下を追記

-- 起動時にカレントディレクトリで:Neotreeを起動するようにする
vim.cmd("autocmd VimEnter * :Neotree .")

機能としてはまだまだなので、随時アップデートしていきたいと思う。

loveraのブログ

neovimで開発環境を整えた話