8行目: 8行目:
導入のキッカケは ubadata-site の app/page.tsx の表示遅延。サーバは vim、Next.jsアプリ開発環境は Neovim という使い分けが良さそう。ちなみに、VSCode はマウス使ってチームで開発したい時に初めて使う。
導入のキッカケは ubadata-site の app/page.tsx の表示遅延。サーバは vim、Next.jsアプリ開発環境は Neovim という使い分けが良さそう。ちなみに、VSCode はマウス使ってチームで開発したい時に初めて使う。


<syntaxhighlight lang="bash">
  $ brew install neovim (公式からの方が早くて軽い)
  $ brew install neovim (公式からの方が早くて軽い)
  $ nvim --version
  $ nvim --version
19行目: 20行目:
  $ nvi
  $ nvi
  :PlugInstall
  :PlugInstall
</syntaxhighlight>


プラグインの保存先は vim-plug のNeovim向けインストール場所で、公式READMEでも推奨。
プラグインの保存先は vim-plug のNeovim向けインストール場所で、公式READMEでも推奨。

2026年6月20日 (土) 03:34時点における版

Neovim

vim の後継でデファクトスタンダード。自分で仕様を学んだり改造できたりする最高のエディタでIDE。

導入

今時のフロントエンド開発者のIDEとしてスタンダードになりつつある vim の後継。ちなみに vim はベテラン中高年のサーバ畑の人が使ってるイメージ。vimの設定でそのまま導入できる。

導入のキッカケは ubadata-site の app/page.tsx の表示遅延。サーバは vim、Next.jsアプリ開発環境は Neovim という使い分けが良さそう。ちなみに、VSCode はマウス使ってチームで開発したい時に初めて使う。

<syntaxhighlight lang="bash">

$ brew install neovim (公式からの方が早くて軽い)
$ nvim --version
$ cp ~/.vimrc ~/.config/nvim/init.vim
$ echo 'alias nvi="nvim"' >> ~/.zshrc
$ source ~/.zshrc
$ git config --global core.editor "nvim"
$ mkdir -p ~/.local/share/nvim/site/autoload
$ curl -fLo ~/.local/share/nvim/site/autoload/plug.vim --create-dirs \
 https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim
$ nvi
:PlugInstall

</syntaxhighlight>

プラグインの保存先は vim-plug のNeovim向けインストール場所で、公式READMEでも推奨。

Tree-sitter、LSP、Nerd Fonts、catpttin の導入

  • 従来の正規表現解析より賢い構文解析になるため、色分けやハイライトが賢くなり、TSやJSXなどが混在する.jsxファイルもかなり見やすくなる
  • TSやHTMLなどの「LSP」を導入すれば、その言語サーバを参照してくれるようになるのでジャンプや補完機能などが高機能になる
  • catppuccinデザインとNerd Fontsフォント (MonaspiceArNerdFont) で見やすくオシャレに👍

コマンド

コマンド 説明
zR 折りたたみを全て展開