【Mac】Neovimのdiagnosticsアイコンを変更する

13 min
B!

こんにちは。ナミレリです。この記事では、LualineやNeo-tree、statuscolumnに表示されるdiagnosticsのシンボルを変更する方法を紹介します。

Lualineのdiagnosticsシンボルを変更したけど、Neo-tree、statuscolumnのdiagnosticsのシンボルも合わせたい！という方も多いと思います。今回は下の画像のようにLualine、Neo-tree、statuscolumnのdiagnosticsシンボルを変更していきます。

diagnosticsシンボル変更前

diagnosticsシンボル変更後

Lazy.nvimの導入や初期設定について

Lazy.nvimの導入や初期設定、LSP環境の構築については下の記事を参考にしてください。

関連

【Mac】Lazy.nvimで最初にやっておきたい初期設定

関連

【Mac】Lazy.nvimでPythonとLuaのLSP環境を構築する方法

この記事はこんな人にオススメ

  • Lualine、Neo-tree、statuscolumnに表示されるdiagnosticsのシンボルを統一したい
  • Neovimでアイコン、シンボルとしてNerdFontsを効率的に管理したい
  • Neovimの設定をLuaでカスタマイズすることが好きな方
  • Neovimを使い始めたばかりの方
この記事のMac環境
Parallels Desktop 20 for Macの無料トライアル もありますので、ぜひダウンロードして試してみてください。M1/M2/M3のMac上で快適にMacやUbuntu、Windowsが動作します。

Neovimのディレクトリ構成

ディレクトリ構成はこだわりや好みで自由に構成することができます。

このブログではLazy.nvim用に下のような構成にします。

ディレクトリ・ファイル説明
~/.config/nvim/init.luaLazy.nvimのブートストラップスクリプトを書きます。
~/.config/nvim/lua/plugins/このディレクトリ配下の個別ファイルにプラグインを記述。
~/.config/nvim/lua/plugins/plugins_lazy.luaインストールするプラグインをこのファイルに列挙。
~/.config/nvim/lua/core/このディレクトリ配下に、プラグイン以外の基本的な設定を記述。
~/.config/nvim/lua/user/このディレクトリ配下に、個別カスタマイズの設定を記述。
~/.config/nvim/
├── init.lua
└── lua/
       ├── plugins/
       │       ├── plugins_lazy.lua<= 編集
       │       ├── lualine_cfg.lua<= 追加
       │       ├── neo-tree_cfg.lua<= 追加
       │       ├── lsp_cfg.lua
       │       └── nvim_cmp_cfg.lua
       ├── core/
       │       ├── autocmds.lua
       │       ├── keymaps.lua
       │       └── options.lua
       └── user/
               ├── icons.lua<= 追加
               └── ui.lua<= 編集

設定の概要

この記事で紹介する設定の概要です。大まかな流れです。

  1. STEP

    ~/.config/nvim/lua/user/icons.luaを作成します。

    icons.luaはアイコン名（シンボル名）とNerd Fontsの対応表でリスト形式で作成します。以下のような対応表です。

    ~/.config/nvim/
└── lua/
       └── user/
               └── icons.lua<= 追加

    ~/.config/nvim/lua/user/icons.lua

    
return {
    error_icon = " ",
    warn_icon = " ",
    hint_icon = "󰌵 ",
    info_icon = " ",
}
  2. STEP

    ~/.config/nvim/lua/plugins/plugins_lazy.luaからLualineとNeo-treeの設定を分離します。

    以前の記事では、plugins_lazy.luaにLualineとNeo-treeの設定を書きましたが、それぞれの設定内容が多くなるので、管理し易くするためにファイルを分離します。

    分離した後に、STEP1で作成したicons.luaを、分離したファイルからrequireしてシンボル設定していきます。

    ~/.config/nvim/
└── lua/
       └── plugins/
               ├── plugins_lazy.lua<= 編集
               ├── lualine_cfg.lua<= 追加
               └── neo-tree_cfg.lua<= 追加
  3. STEP

    ~/.config/nvim/lua/user/ui.luaの編集

    statuscolumnの設定は、このui.luaに設定します。STEP1で作成したicons.luaをui.luaからrequireしてシンボルを設定していきます。

    ~/.config/nvim/
└── lua/
       └── user/
               └── ui.lua<= 編集

それでは、このSTEPで実際に設定していきます。

【1】~/.config/nvim/lua/user/icons.luaを作成

icons.luaはアイコン名（シンボル名）とNerd Fontsの対応表でリスト形式で作成します。以下のように作成します。今回は、diagnosticsのシンボルとして、error、warn、hint、infoの4つを定義します。

Nerd Fonts Cheat Sheet https://www.nerdfonts.com/cheat-sheet

~/.config/nvim/lua/user/icons.lua


return {
    error_icon = " ",
    warn_icon = " ",
    hint_icon = "󰌵 ",
    info_icon = " ",
}

使い方ですが、シンボルを設定したい（使いたい）ファイルからlocal icons = require("user.icons")し、icons.hint_icon、icons.error_iconのように指定します。

icons.luaの使い方例

~/.config/nvim/test.lua


local icons = require("user.icons")

-- 各アイコンが正しく読み込まれたか確認
print("Error Icon: " .. icons.error_icon)
print("Warning Icon: " .. icons.warn_icon)
print("Hint Icon: " .. icons.hint_icon)
print("Info Icon: " .. icons.info_icon)

-- Neovimの通知機能を使って表示を確認
vim.notify("Error Icon: " .. icons.error_icon, vim.log.levels.ERROR)
vim.notify("Warning Icon: " .. icons.warn_icon, vim.log.levels.WARN)
vim.notify("Hint Icon: " .. icons.hint_icon, vim.log.levels.INFO)
vim.notify("Info Icon: " .. icons.info_icon, vim.log.levels.INFO)

Neovimで、:luafile ./test.luaでテスト確認できます。

【2】~/.config/nvim/lua/plugins/plugins_lazy.luaから分離

以前の記事では、plugins_lazy.luaにLualineとNeo-treeの設定を書きました。それぞれの設定内容が多くなるので管理し易くするためにファイルを分離します。

分離するファイルは、以下のファイルとします。

~/.config/nvim/lua/plugins/neo-tree_cfg.lua

~/.config/nvim/lua/plugins/lualine_cfg.lua

Neo-treeの分離

それでは、~/.config/nvim/lua/plugins/neo-tree_cfg.luaの内容です。Neo-treeにはdiagnosticsのシンボル、modifiedのシンボル、git_statusのシンボルなどを設定することができますが、まずはdiagnosticsのシンボルを設定します。

24行目から33行目がその設定です。

~/.config/nvim/lua/plugins/neo-tree_cfg.lua


local icons = require("user.icons")

return {
    {
        "nvim-neo-tree/neo-tree.nvim",
        branch = "v3.x",
        dependencies = {
            "nvim-lua/plenary.nvim",
            "nvim-tree/nvim-web-devicons",
            "MunifTanjim/nui.nvim",
        },
        opts = {
            window = {
                position = "left",
            },
            event_handlers = {
                {
                    event = "file_open_requested",
                    handler = function()
                        require("neo-tree.command").execute({ action = "close" })
                    end,
                },
            },
            default_component_configs = {
                diagnostics = {
                    symbols = {
                        hint = icons.hint_icon,
                        info = icons.info_icon,
                        warn = icons.warn_icon,
                        error = icons.error_icon,
                    },
                },
            },
        },
        cmd = "Neotree",
    },
}

分離したらplugins_lazy.luaからNeo-treeの設定を削除しておきます。

Lualineの分離

次にLualineの設定を、~/.config/nvim/lua/plugins/lualine_cfg.luaに分離します。Lualineはdiffのシンボルなども簡単に変更できます。カスタマイズ性が高く何でもできるLualineですが、今回はdiagnosticsのシンボルの設定にフォーカスします。

16行目から24行目がその設定です。

~/.config/nvim/lua/plugins/lualine_cfg.lua


local icons = require("user.icons")

return {
    {
        "nvim-lualine/lualine.nvim",
        dependencies = {
            "nvim-tree/nvim-web-devicons",
        },
        opts = {
            sections = {
                lualine_b = {
                    {
                        "branch",
                        color = { gui = "bold" },
                    },
                    {
                        "diagnostics",
                        symbols = {
                            error = icons.error_icon,
                            warn = icons.warn_icon,
                            hint = icons.hint_icon,
                            info = icons.info_icon,
                        },
                    },
                },
            },
        },
        event = "VeryLazy",
    },
}

分離したらplugins_lazy.luaからLualineの設定を削除しておきます。

【3】~/.config/nvim/lua/user/ui.luaの編集

最後にstatuscolumnの設定をします。statuscolumnの設定は~/.config/nvim/lua/user/ui.luaに設定していきます。

~/.config/nvim/lua/user/ui.lua


local icons = require("user.icons")

local signs = { Error = icons.error_icon, Warn = icons.warn_icon, Hint = icons.hint_icon, Info = icons.info_icon }
for type, icon in pairs(signs) do
    local hl = "DiagnosticSign" .. type
    vim.fn.sign_define(hl, { text = icon, texthl = hl, numhl = hl })
end

エラーや警告のために適当なコードを書いて表示してみると、以下のように指定したdiagnosticsのシンボルに変更されていると思います。

modified symbolとgit_status symbolの変更

diagnosticsのシンボルの変更方法以外に、modifiedやgit statusの各シンボルの変更方法も紹介します。

変更前は以下の画像です。

~/.config/nvim/lua/user/icons.luaにmodifiedやgit statusの各シンボルを追加します。

~/.config/nvim/lua/user/icons.lua


return {
    error_icon = " ",
    warn_icon = " ",
    hint_icon = "󰌵 ",
    info_icon = " ",
    modified_icon = " ",
    added_icon = " ",
    removed_icon = " ",
    deleted_icon = " ",
    renamed_icon = "󰛂 ",
    untracked_icon = " ",
    ignored_icon = " ",
    unstaged_icon = " ",
    staged_icon = " ",
    conflict_icon = "",
    code_icon = " ",
    win_icon = " ",
    linux_icon = " ",
    mac_icon = " ",
    readonly_icon = "󰌾 ",
    branch_icon = " ",
}

以下のNeo-treeとLualineの設定ファイルに、modifiedやgit statusの各シンボルを設定します。

~/.config/nvim/lua/plugins/neo-tree_cfg.lua

~/.config/nvim/lua/plugins/lualine_cfg.lua

~/.config/nvim/lua/plugins/neo-tree_cfg.lua


local icons = require("user.icons")

return {
    {
        "nvim-neo-tree/neo-tree.nvim",
        branch = "v3.x",
        dependencies = {
            "nvim-lua/plenary.nvim",
            "nvim-tree/nvim-web-devicons",
            "MunifTanjim/nui.nvim",
            -- "3rd/image.nvim",
        },
        opts = {
            window = {
                position = "left",
            },
            event_handlers = {
                {
                    event = "file_open_requested",
                    handler = function()
                        require("neo-tree.command").execute({ action = "close" })
                    end,
                },
            },
            default_component_configs = {
                diagnostics = {
                    symbols = {
                        hint = icons.hint_icon,
                        info = icons.info_icon,
                        warn = icons.warn_icon,
                        error = icons.error_icon,
                    },
                },
                modified = {
                    symbol = icons.modified_icon,
                },
                git_status = {
                    symbols = {
                        -- Change type
                        added = icons.added_icon,
                        modified = icons.modified_icon,
                        deleted = icons.deleted_icon,
                        renamed = icons.renamed_icon,
                        -- Status type
                        untracked = icons.untracked_icon,
                        ignored = icons.ignored_icon,
                        unstaged = icons.unstaged_icon,
                        staged = icons.staged_icon,
                        conflict = icons.conflict_icon,
                    },
                },
            },
        },
        cmd = "Neotree",
    },
}

~/.config/nvim/lua/plugins/lualine_cfg.lua


local icons = require("user.icons")

local M = {
    "nvim-lualine/lualine.nvim",
    dependencies = {
        "nvim-tree/nvim-web-devicons",
    },
    opts = {
        theme = "catppuccin",
        sections = {
            lualine_b = {
                {
                    "branch",
                    icon = icons.branch_icon,
                    color = { gui = "bold" },
                },
                {
                    "diagnostics",
                    symbols = {
                        error = icons.error_icon,
                        warn = icons.warn_icon,
                        hint = icons.hint_icon,
                        info = icons.info_icon,
                    },
                },
            },
            lualine_c = {
                {
                    "diff",
                    symbols = {
                        added = icons.added_icon,
                        modified = icons.modified_icon,
                        removed = icons.removed_icon,
                    },
                },
                {
                    function()
                        -- ファイル名を取得
                        local file = vim.fn.expand("%:t") -- ファイル名を取得（パスなし）

                        -- ファイル名がない場合の表示
                        if file == "" then
                            return "[No Name]"
                        end

                        -- アイコンとファイル名を設定
                        local icon = icons.code_icon .. file

                        -- 変更されたファイルの場合に`modified`アイコンを追加
                        if vim.bo.modified then
                            icon = icon .. " " .. icons.modified_icon
                        end

                        -- 読み取り専用ファイルの場合に`readonly`アイコンを追加
                        if vim.bo.readonly then
                            icon = icon .. " " .. icons.readonly_icon
                        end

                        return icon
                    end,
                    color = { fg = "#f9e2af", gui = "bold" },
                },
                {
                    "filetype",
                    color = { fg = "#f5c2e7", gui = "bold" },
                },
            },
            lualine_x = {
                {
                    "encoding",
                    color = { fg = "#f5c2e7", gui = "bold" },
                },
                {
                    function()
                        local fmt = vim.bo.fileformat
                        if fmt == "unix" then
                            return icons.linux_icon
                        elseif fmt == "dos" then
                            return icons.win_icon
                        elseif fmt == "mac" then
                            return icons.mac_icon
                        end
                    end,
                    color = { fg = "#89b4fa" },
                },
            },
        },
    },
    event = "VeryLazy",
}

return M

以下のキャプチャのようになったと思います。

最後に

最後まで読んでいただきありがとうございます。今回のNeovimのdiagnosticsアイコンを変更するはいかがでしたでしょうか。

次回以降は、Nerd Fontsを使ったより多くのLualineやNeo-treeのカスタマイズを紹介します。

定番おすすめ記事

Neovimをかっこ良くクールに使う設定

MacでもUbuntuでもNeovimをかっこ良くクールに使う設定を紹介！
関連

【Mac】Lazy.nvimで最初にやっておきたい初期設定

関連

【Mac】Lazy.nvimでPythonとLuaのLSP環境を構築する方法

関連

【Mac】Neovimのdiagnosticsアイコンを変更する

関連

【Mac】Neovimの最初にやっておきたい初期設定

関連

【Mac】Neovimのおすすめプラグイン（見た目をクールに！デザイン・UI関連）

関連

【Mac】NeovimでPythonとLuaのLSP環境を構築する方法

関連

【Mac】NeovimでTelescopeを設定する

関連

【Mac】Neovimを半透明でかっこ良く設定する：neovim transparent

関連

【Mac】NeovimのステータスラインにIMEの状態を表示する

関連

【Mac】Neovimのスムーズスクロールとカーソル移動アニメーションでかっこ良くする

関連

【Mac】NeovimのGUI、Neovideのインストールと設定

関連

【Mac】NeovimでChatGPTと会話する

B!
カテゴリー：
<前の記事
【Mac】Lazy.nvimでPythonとLuaのLSP環境を構築する方法
関連記事