🔦

[Neovim]2023年初頭・個人的に愛用しているNeovimプラグイン🏜

2023/03/25に公開

Neovimで愛用しているプラグインの解説



普段使いしてるNeovimのスクリーンショットなど

こんにちは!食パン🍞と申します🏜
普段はフロントエンドを中心にパソコンをカタカタしている者です💻

私は普段のコーディングのメインエディタとして、Neovimを用いています。
(Neo)Vimは、その独特な操作体系ゆえ慣れるまでが大変ですが、一度習熟すると非常に効率よくテキスト操作を行えるため、日々愛用しています。

ところで(Neo)Vimは、非常にカスタマイズ性が高く、自分好みの様々な設定を書いたり、OSSの多様なプラグインを利用することができます。一方で、その高いカスタマイズ性ゆえに設定の難しい側面も多々あり、最初はどのようにNeovimをカスタマイズしていけば悩むことも珍しくありません…。
そこで今回の記事では、私が現在使用しているNeovimのセッティングのうち、特に愛用しているプラグインについて紹介してみたいと思います。
なにかしらの参考になれば幸いです🙏

Neovimの特徴

Neovimは、非常に歴史の長いエディタであるVimをフォークして誕生したテキストエディタです。
基本的な操作体系はVimと同一である一方、Neovim独自の機能として、

  • 本家Vimと比べて開発者フレンドリーなAPIや各種機能
  • Lua言語による設定の記述が可能(Luaのランタイムを備えています)
  • Tree-sitter(パーサー)による強力な構文解析機能
    • これにより、Neovimはパースされたプログラムの構文を受け取ることができ、テキスト操作全般おいて様々な恩恵を受けることができます🏜
  • 組み込まれたLSP(Language Server Protocol)クライアント
    • これにより、言語サーバーが提供する自動補完/定義ジャンプ/Linterによるエラー箇所を提示するDiagnosticsなど様々な機能を組み込みの機能として用いることができます

などなど、様々な特徴があります。
これらの特徴から、OSSの開発コミュニティも極めて活発であり、日々新しいプラグインが誕生しています。全体的に、Neovimを愛用する人は新しもの好きな人が多いかもしれません🤔

セットアップの方針

今回解説するNeovimの設定ファイル群はこちらのリポジトリに公開しています。

https://github.com/Nyowa450/nvim

こちらのNeovim設定ファイルのリポジトリには、普段遣いする2つのブランチがあります。

  • cocブランチ
    • このブランチは、入力補完やLSP機能など、NeovimをまるごとIDEのように拡張するプラグインであるCoc.nvimを導入してモダンなエディタとしての機能を利用しているブランチです。
  • lspブランチ
    • こちらのブランチは、Neovimの組み込みLSPクライアント(BuiltinLSP)を導入して、入力補完や各種言語ごと支援機能を実現しているブランチです。

Coc.nvimを用いる場合と、Neovimの組み込みLSPクライアントを用いる場合では、細かな部分も含めれば様々な違いがあるのですが、私は基本的にメインでCoc.nvimを用いつつ、気分でBuiltinLSPも使うようにしています。
そのため、この記事では、Coc.nvimをメインに据えたセットアップを紹介したいと思います🏜

なお、私は普段、フロントエンドを触る機会が多いため、ローカル環境下にNode.js環境が存在することを前提としています(上記のCoc.nvimもTypescriptで記述されているため、動作にはNode.js環境が必須です。他方、BuiltinLSPの場合は、必ずしも必須ではありません。)

以上を前提にセットアップを紹介していきます💪💪💪

Neovim本体の設定

Neovimの設定は、すべてLua言語で記述していきます。
デフォルトのオプションは、おおむね次のように設定することが多いです。

base.lua
vim.scriptencoding = 'utf-8'
vim.opt.encoding = 'utf-8'
vim.opt.fileencoding = 'utf-8'

vim.opt.number = true
vim.wo.number = true
vim.wo.relativenumber = false
vim.opt.mouse = 'a' --マウス操作を有効化
vim.opt.title = true
vim.opt.autoindent = true
vim.opt.smartindent = true
vim.opt.hlsearch = true
vim.opt.backup = false
vim.opt.showcmd = true
vim.opt.cmdheight = 2
vim.opt.laststatus = 2
vim.opt.expandtab = true
vim.opt.scrolloff = 10
vim.opt.shell = 'fish'
vim.opt.inccommand = 'split'
vim.opt.ignorecase = true 
vim.opt.smarttab = true
vim.opt.breakindent = true
vim.opt.shiftwidth = 2
vim.opt.tabstop = 2
vim.opt.wrap = true 
vim.opt.helplang = 'ja', 'en'
vim.opt.updatetime = 300
vim.opt.showtabline = 2
vim.opt.clipboard = 'unnamedplus' --クリップボードとレジスタを共有
vim.opt.termguicolors = true
vim.opt.signcolumn = 'yes' --行数表示の横に余白を追加
vim.opt.hidden = true
vim.opt.swapfile = false --スワップファイルを生成しない
vim.opt.wrap = true --端までコードが届いた際に折り返す


local keymap = vim.keymap
-- キーバインド
-- 画面分割
keymap.set('n', 'ss', ':split<Return><C-w>w')
keymap.set('n', 'sv', ':vsplit<Return><C-w>w')
-- アクティブウィンドウの移動
keymap.set('n', 'sh', '<C-w>h')
keymap.set('n', 'sk', '<C-w>k')
keymap.set('n', 'sj', '<C-w>j')
keymap.set('n', 'sl', '<C-w>l')

-- Emacs風
keymap.set('i', '<C-f>', '<Right>')
-- jjでEscする
keymap.set('i','jj','<Esc>')
-- 設定ファイルを開く
keymap.set('n','<F1>',':edit $MYVIMRC<CR>')

このうち欠かせない設定のひとつが、画面分割とアクティブウィンドウ移動のキーバインドです。
Neovimでは、画面内に複数のウィンドウを縦横に分割することができますが、デフォルトではやや煩雑なコマンドを打ち込む必要があります。

そこで、sキーを起点に水平・垂直の画面分割やウィンドウのカーソル移動などを自分好みにアレンジしています。

設定したキーバインドでウィンドウを分割したり移動したりしているところ
とっても便利です👍

導入しているプラグインたち

ここからは、上記の設定を行ったNeovimに導入しているプラグインを紹介します。

Packer.nvim

https://github.com/wbthomason/packer.nvim

Packer.nvimは、Neovimのプラグインを管理するためのプラグイン(プラグインマネージャー)です。

手作業でプラグインを管理するのは大変なので、このPacker.nvimやVim-PlugLazy.nvimといったプラグインマネージャーが事実上必須となります🛠

Coc.nvim

https://github.com/neoclide/coc.nvim

Coc.nvimは、これひとつをインストールするだけでNeovimをモダンなエディタに変身させるオールインワンのコーディング支援プラグインです。

Make your Vim/Neovim as smart as VS Code

と謳われているように、NeovimをまるごとVSCodeのように拡張してくれます。

例えば、

  • 言語サーバを用いた入力補完
  • 言語サーバによるコード診断を表示するDiagnostics
  • Coc-extensionsと呼ばれる拡張プラグインの独自エコシステム(VSCodeのプラグインマーケットみたいなやつです)
    などなどです。


公式リポジトリより:コーディング支援機能が作動する様子

Coc.nvimをインストールしたのち、自分が普段コーディングする言語に対応した拡張機能(coc-extensions)をインストールすることで、言語ごとのコーディング支援機能が動作するようになります✨
多くの拡張機能が存在し、メジャーな言語の大半をカバーしているのも魅力の一つです。
https://github.com/neoclide/coc.nvim/wiki/Using-coc-extensions
私の場合、フロントエンドをメインで触りつつ、たまにRustも趣味でコーディングするため、
https://github.com/neoclide/coc-tsserver
https://github.com/yaegassy/coc-tailwindcss3
https://github.com/neoclide/coc-eslint
https://github.com/fannheyward/coc-rust-analyzer
などを入れています。


coc-tsserverを用いて.jsxファイルでドキュメントをHoverしているところ


coc-tsserverで入力補完が動作しているところ


coc-eslintでプロジェクトのeslintの出力を表示

このように、いわゆるIDEやモダンなエディタで実装されているコーディング支援をNeovimで手軽に実現することができます。
プラグインとしても非常に成熟しており、動作にも安定感があり、詰まったときの情報も見つかりやすいので、多くの人におすすめできるプラグインだと思っています。

NeovimのBuiltinLSPとの比較

今回の記事ではCoc.nvimを用いることで各種のコーディング支援機能を実現していますが、もうひとつの方法として、Neovimに組み込みのLSPクライアントを設定することでも同種の機能を実現することができます。
https://zenn.dev/fukakusa_kadoma/articles/99e8f3ab855a56
具体的な設定方法については以前書いた上記記事を参照していただければと思うのですが、BuiltlinLSPを用いる場合、Coc.nvimを用いる場合と比べて必要なプラグインがグッと増え、かつ、設定の記述が複雑になります

最近のNeovim界隈ではBuiltinLSPを用いてコーディング支援機能を使ったり、LSPを活用したプラグインの開発がトレンドとなりつつありますが、一方で開発の変化が早いため不具合に出くわしたり、設定ファイルのメンテナンスが必要になりがちです。
とはいえ、Neovimの醍醐味(アーリー・アダプターにはたまらない)を味わえるのまた確かであり、Neovimになにを求めるかによって選択すると良いのではないかと考えています🤔

nvim-treesitter

https://github.com/nvim-treesitter/nvim-treesitter

nvim-treesitterは、おもにNeovimにおけるシンタックスハイライトに用いられるプラグインです。

各言語に対応する言語パーサーをインストールすることで、詳細で正確なシンタックスハイライトやインデントの自動制御を担ってくれます。

catppuccin-frappeとnvim-treesitterを組み合わせてシンタックスハイライトした例

treesitter.rc.lua
local status, treesitter = pcall(require, "nvim-treesitter.configs")
if (not status) then return end

treesitter.setup {
-- ここでハイライトしたい言語を指定しておくと、起動時にインストールされます
  ensure_installed = {"vim","dockerfile","fish","typescript","tsx","javascript","json","lua","gitignore","bash","astro","markdown","css","scss","yaml","toml","vue","php","html"},
  highlight = {
    enable = true, -- ハイライトを有効化
    additional_vim_regex_highlighting = false, -- catpuucin用
    disable = {},
  },
 indent ={
  enable =true,--言語に応じた自動インデントを有効化
   disable ={"html"},-- htmlのインデントだけ無効化
 },
  autotag = {
    enable = true,
  },
}

最近のNeovim用Colorschemeは、大抵デフォルトでnvim-treesitterに対応していることが多いため、とりあえず入れておくと幸せな気持ちになれます(?)。

Everforest(Colorscheme)など

https://github.com/sainnhe/everforest


everforest+nvim-treesitterで.jsxファイルをハイライト

普段遣いするColorschemeとして、Everforestを愛用しています。
エンジニアはとにかくディスプレイとにらめっこ状態になりがちなので、少しでも緑で癒やされたいとの思いから導入しています。穏やかな色合いでとても見やすいです🌲🌲🌲

また、気分によってはnvim-solarized-luaonenordを使うこともあります。
https://github.com/ishan9299/nvim-solarized-lua
https://github.com/rmehri01/onenord.nvim
こちらもクールで触ってて楽しいです!

Fern.vim

https://github.com/lambdalisue/fern.vim

Fern.vimは、(Neo)vimにおいてファイラー機能を強力に拡張するプラグインです。
Vimにも一応、デフォルトでファイラー(ディレクトリ内のファイルを管理する機能)が備わってはいるのですが、そこまで使いやすくはないため、Fern.vimで拡張しています。


Fernでファイルを開いたりしている様子

Fernでは、画面の端にディレクトリツリーを表示するProject drawerスタイルと、開いているウィンドウのなかでそのままディレクトリツリーを表示するSplit windowsスタイルが選べます。
私は画面をできる限り広く使いたいため、基本的にSplit windowsスタイルで使用しています(画像参照)。

マウスを一切使うことなくファイルやディレクトリを効率よく操作できるため、大好きなプラグインの一つです🏜

barbar.nvim

https://github.com/romgrk/barbar.nvim


公式リポジトリより

barbar.nvimは、Neovimのtabline(Neovim上部のタブやBufferが表示される箇所)を強力に拡張し、Neovim上でメモリに展開されたBufferやタブの管理をとっても便利にしてくれるプラグインです。

barbar.rc.lua
require'bufferline'.setup {
-- 好みの設定をここに書く
}
local map = vim.api.nvim_set_keymap
local opts = { noremap = true, silent = true }

-- Move to previous/next
map('n', '<C-j>', '<Cmd>BufferPrevious<CR>', opts)--Ctrl+jで前のBufferに移動
map('n', '<C-k>', '<Cmd>BufferNext<CR>', opts)--Ctrl+kで次のBufferに移動
-- Close buffer
map('n', '<leader>e', '<Cmd>BufferClose<CR>', opts) --<leader>+eでBufferを削除



公式リポジトリより

Fernと組み合わせて用いることで、ファイルやディレクトリの操作の効率が格段にアップします!
Fernで複数のファイルをBufferとして開く➔なんやかんや編集する➔必要に応じてBuffer間を移動したり不要なBufferを消去する、といった形で利用しています🏜

Telescope.nvim

https://github.com/nvim-telescope/telescope.nvim

Telescope.nvimは、Lua言語製で、高速に動作するファイル検索(あいまい検索)プラグインです。あいまいなワードでディレクトリ配下にあるファイルを検索したり、ファイル内の単語をリアルタイムでGrepしたり、はたまたLSPから出力されているエラーを検索したり、Gitのコミットを検索したりと、非常に多機能で便利です🔍(もしかしたら、Neovimのプラグインでもっとも有名なものの一つかもしれません…🤔)


公式リポジトリより


telescopeであれこれファイル探索している様子

telescope.rc.lua
local status, telescope = pcall(require, "telescope")
if (not status) then return end

local builtin = require('telescope.builtin')

telescope.setup({
  defaults = {
    sorting_strategy = "ascending", -- 検索結果を上から下に並べる
    winblend = 4, --若干ウィンドウを透明に
    layout_strategy = 'vertical',
    layout_config = { height = 0.9 },
    file_ignore_patterns = { --検索対象に含めないファイルを指定
      "^.git/",
      "^node_modules/",
    },
  },
  extensions = {
    coc = {
      prefer_locations = false,   
    }
  },
})
telescope.load_extension("frecency") --frecency search
telescope.load_extension("coc")      -- coc integration

-- file search
vim.keymap.set('n', '<leader>f',
  function()
    builtin.find_files({
      no_ignore = false,
      hidden = true
    })
  end)
-- -- Grep
vim.keymap.set('n', '<leader>r',
  function()
    builtin.live_grep({
      no_ignore = false,
      hidden = true
    })
  end)

--Telescope-coc
--定義ジャンプ
vim.keymap.set("n", "gd", "<cmd>Telescope coc definitions<cr>", { silent = true })
-- 型定義ジャンプ
vim.keymap.set("n", "gy", "<cmd>Telescope coc type_definitions<cr>", { silent = true })
-- diagnostics
vim.keymap.set("n", "<leader>a", "<cmd>Telescope coc diagnostics<cr>", { silent = true })
--頻度検索
vim.keymap.set("n", "<leader>l", "<cmd>telescope.extensions.frecency.frecency()<CR>", { noremap = true, silent = true })

なお、私はCoc.nvimを用いてるため、Telescope.nvimの拡張プラグインであるtelescope-coc.nvimも組み合わせて、Coc.nvimが出力したDiagnosticsをTelescopeで検索したり、Telescope上で型定義を確認したりと活用しています(オヌヌメです)。
https://github.com/fannheyward/telescope-coc.nvim

git.nvim

https://github.com/dinhhuy258/git.nvim

Git.nvimは、Neovim上で直接Gitに関する操作を行うためのプラグインです

例えば、Neovimのコマンドライン上で、:Git 〇〇(Gitのコマンドなど)と入力すると、Neovimを閉じることなくGitでの操作を行うことが可能です。
また便利なコマンドも内蔵されており、キーバインドを用いてNeovim上で簡単にGit diffGit blameを実行し、出力を確認することができます(めちゃ便利です👍)


コードを一部削除したあとDiffを確認、Blameを実行しているところ

ちなみに、Git.nvimは、Vim上でGit操作を可能にするVim-fugiitiveという超有名プラグインをLua言語で書き直したものらしいです🤔

gitsigns.nvim

https://github.com/lewis6991/gitsigns.nvim

Gitsigns.nvimは、Gitで管理されたファイルの変更箇所をVirtual Textを用いてお洒落に表示したり、行ごとのBlameを表示したりと、Gitの状態に関する情報を視覚的に表示してくれるプラグインです。


Gitで管理されたファイルを編集すると、赤緑青の縦線で変更行が視覚的に表示される
これを入れておくと、自分が編集した行などがひと目でわかるためなにかと便利です🛠

nvim-colorizer.lua

https://github.com/norcalli/nvim-colorizer.lua

nvim-colorizer.luaは、Neovim上でカラーコードの含まれるファイルを開いた場合に、カラーコードの色を再現してくれます!


フロントエンドを触っていると、CSSやscssでカラーコードの色を視覚的に把握したくなる機会も多いため非常に便利です。動作も軽くてうれしい☁

nvim-surround

https://github.com/kylechui/nvim-surround

Nvim-surroundは、単語の周りを囲むもの(surrounding pairs)を効率的に編集するためのプラグインです。
ある単語の周囲に' " {] [] ()などを追加したくなる機会というのはコーディング中頻繁にありますが、このプラグインを導入すると簡単に操作することができます。

公式のREADME.mdよりコマンドの例
    Old text                    Command         New text
--------------------------------------------------------------------------------
    surr*ound_words             ysiw)           (surround_words)
    *make strings               ys$"            "make strings"
    [delete ar*ound me!]        ds]             delete around me!
    remove <b>HTML t*ags</b>    dst             remove HTML tags
    'change quot*es'            cs'"            "change quotes"
    <b>or tag* types</b>        csth1<CR>       <h1>or tag types</h1>
    delete(functi*on calls)     dsf             function calls


ノーマルモードでysiw"と入力して、hogeの周囲に"を追加

cs({と入力して、丸括弧を波括弧に変更
最初はコマンドを覚える必要がありますが、慣れると素早くペアで記号類を追加できるのでとても快適になります👍

おわりに

簡単なご紹介にはなりましたが、私が特に愛用しているプラグインは以上です🌵
このほか、他にもこまごましたプラグインを必要に応じて入れてたりもします(設定ファイルのリポジトリ参照)

Vim/Neovimのプラグイン開発コミュニティは常に活発で、面白いプラグインや便利なプラグインは他にもたくさんあります。
新しいプラグインはしばしばRedditのNeovimコミュニティなどで宣伝されてたりするので、探すととっても楽しいです。

https://www.reddit.com/r/neovim/

この記事が良き(Neo)vimライフの助けになれば幸いです🙏

Discussion