Multifunctional IDE using Neovim (2 of 3)
Tags: neovim, javascript, rust, code
Published: 2024-06-14 12:50:22

### Let's make it better

We are done with the basic settings, now let's move on to improving our working environment. We will add convenient file navigation, a search engine and much more.

let's start with the explorer, everything is pretty standard here, we install the required plugin and write its configuration in a separate file.

{% embed https://github.com/nvim-tree/nvim-tree.lua %}

Adding a plugin to `init.lua`

```lua
--init.lua


require("lazy").setup({
---

  {
    "nvim-tree/nvim-tree.lua",
    dependencies = { "nvim-tree/nvim-web-devicons" },
  },

---

})
```

Create a new file `tree_config.lua` and write all of this:

```lua
--tree_config.lua

vim.g.loaded_netrw = 1
vim.g.loaded_netrwPlugin = 1

vim.opt.termguicolors = true

require("nvim-tree").setup({
	sort = {
		sorter = "case_sensitive",
	},
	view = {
		width = 35,
	},
	renderer = {
		group_empty = true,
		icons = {
			glyphs = {
				git = {
					unstaged = "",
					staged = "S",
					unmerged = "",
					renamed = "",
					untracked = "U",
					deleted = "",
					ignored = "◌",
				},
			},
		},
	},
	git = {
		enable = true,
		ignore = false,
		show_on_dirs = true,
		show_on_open_dirs = true,
	},
	filters = {
		dotfiles = false,
	},
	diagnostics = {
		enable = true,
		show_on_dirs = true,
		icons = {
			hint = "",
			info = "",
			warning = "",
			error = "",
		},
	},
})

--Open Expkorer
vim.keymap.set("n", "<leader>e", "<cmd>NvimTreeToggle<cr>")
--Change focus from code to Explorer
vim.keymap.set("n", "<C-h>", "<C-w>w")
```

Now let's add a plugin for quick search of files or text in files, for this you need to install _telescope.nvim_. Everything is as always, we install via `init.lua` and create a new file.

{% embed https://github.com/nvim-telescope/telescope.nvim %}

```lua
--init.lua

require("lazy").setup({
---

  {
    "nvim-telescope/telescope.nvim",
    --The version is entered manually, so it may differ from the latest, so enter the version from the repository
    tag = "0.1.8",
    dependencies = { "nvim-lua/plenary.nvim" },
  },
---

})
```

And now let's set up our plugin a little. Create a file `telescope_config.lua`

```lua
---telescope_config.lua

require("telescope").setup({
  defaults = {
    file_ignore_patterns = {
      "node_modules",
      "yarn.lock"
    },
    dynamic_preview_title = true,
    path_directory = "smart"
  }
})

local builtin = require("telescope.builtin")
vim.keymap.set("n", "<leader>ff", builtin.find_files, {})
vim.keymap.set("n", "<leader>fb", builtin.buffers, {})
vim.keymap.set("n", "<leader>fh", builtin.help_tags, {})
vim.keymap.set("n", "<leader>fr", builtin.oldfiles, {})
```

Now let's add auto-completion to our config. For this we will use _nvim-cmp_ install it in the way we are already familiar with.

{% embed https://github.com/hrsh7th/nvim-cmp %}

```lua
--init.lua

require("lazy").setup({
---

  { "hrsh7th/cmp-nvim-lsp" },
  { "hrsh7th/cmp-buffer" },
  { "hrsh7th/cmp-path" },
  { "hrsh7th/cmp-cmdline" },
  { "hrsh7th/nvim-cmp" },
  { "hrsh7th/cmp-vsnip" },
  { "hrsh7th/vim-vsnip" },
  { "L3MON4D3/LuaSnip" },
  { "saadparwaiz1/cmp_luasnip" },
---

})
```

Create a new file `cmp_config.lua`

```lua
--cmp_config.lua

local cmp = require('cmp')

local kind_icons = {
  Text = "",
  Method = "󰆧",
  Function = "󰊕",
  Constructor = "",
  Field = "󰇽",
  Variable = "󰂡",
  Class = "󰠱",
  Interface = "",
  Module = "",
  Property = "󰜢",
  Unit = "",
  Value = "󰎠",
  Enum = "",
  Keyword = "󰌋",
  Snippet = "",
  Color = "󰏘",
  File = "󰈙",
  Reference = "",
  Folder = "󰉋",
  EnumMember = "",
  Constant = "󰏿",
  Struct = "",
  Event = "",
  Operator = "󰆕",
  TypeParameter = "󰅲",
}


cmp.setup({
  formatting = {
    format = function(entry, vim_item)
      vim_item.kind = string.format('%s %s', kind_icons[vim_item.kind], vim_item.kind)
      vim_item.menu = ({
        buffer = "[Buffer]",
        nvim_lsp = "[LSP]",
        luasnip = "[LuaSnip]",
        nvim_lua = "[Lua]",
        latex_symbols = "[LaTeX]",
      })[entry.source.name]
      return vim_item
    end
  },
  snippet = {
    expand = function(args)
      vim.fn["vsnip#anonymous"](args.body)
    end,
  },
  mapping = cmp.mapping.preset.insert({
    ['<C-b>'] = cmp.mapping.scroll_docs(-4),
    ['<C-f>'] = cmp.mapping.scroll_docs(4),
    ['<C-Space>'] = cmp.mapping.complete(),
    ['<C-e>'] = cmp.mapping.abort(),
    ['<CR>'] = cmp.mapping.confirm({ select = true }),
  }),
  sources = cmp.config.sources({
    { name = 'nvim_lsp' },
    { name = 'luasnip' },
  }, {
    { name = 'buffer' },
  })
})

cmp.setup.filetype('gitcommit', {
  sources = cmp.config.sources({
    { name = 'git' },
  }, {
    { name = 'buffer' },
  })
})

cmp.setup.cmdline({ '/', '?' }, {
  mapping = cmp.mapping.preset.cmdline(),
  sources = {
    { name = 'buffer' }
  }
})

cmp.setup.cmdline(':', {
  mapping = cmp.mapping.preset.cmdline(),
  sources = cmp.config.sources({
    { name = 'path' }
  }, {
    { name = 'cmdline' }
  })
})
```

Well, let's quickly write a config for treesitter. _Nvim-treesitter_ is based on three interlocking features: language parsers, queries, and modules, where modules provide features – e.g., highlighting.

{% embed https://github.com/nvim-treesitter/nvim-treesitter %}

To install, add it to `lazy.nvim`

```lua

require("lazy").setup({
---

  { "nvim-treesitter/nvim-treesitter" },

---

})
```

And as always, we write the configuration in a separate file:

```lua
--treesitter_config.lua

require 'nvim-treesitter.configs'.setup {
  -- A list of parser names, or "all" (the five listed parsers should always be installed)
  ensure_installed = { "lua", "vim", "vimdoc", "query", "javascript", "typescript", "html", "css", "rust", "markdown", "json" },

  sync_install = false,
  auto_install = true,

  highlight = {
    enable = true,
    additional_vim_regex_highlighting = false,
  },
  autotag = {
    enable = true,
  }
}

vim.opt.foldmethod = "expr"
vim.opt.foldexpr = "nvim_treesitter#foldexpr()"
vim.opt.foldenable = false
```

There is a small plugin that allows you to link brackets by color, let's add it.

```lua

require("lazy").setup({
---

  { "lukas-reineke/indent-blankline.nvim", main = "ibl", opts = {} },

---

})
```

Create a new file `indent_config.lua`:
> If you don't like the colorful theme, you can make the configuration more down to earth, but I like when the brackets are different colors.

```lua
--indent_config.lua

local highlight = {
  "RainbowRed",
  "RainbowYellow",
  "RainbowBlue",
  "RainbowOrange",
  "RainbowGreen",
  "RainbowViolet",
  "RainbowCyan",
}

local hooks = require "ibl.hooks"
hooks.register(hooks.type.HIGHLIGHT_SETUP, function()
  vim.api.nvim_set_hl(0, "RainbowRed", { fg = "#E06C75" })
  vim.api.nvim_set_hl(0, "RainbowYellow", { fg = "#E5C07B" })
  vim.api.nvim_set_hl(0, "RainbowBlue", { fg = "#61AFEF" })
  vim.api.nvim_set_hl(0, "RainbowOrange", { fg = "#D19A66" })
  vim.api.nvim_set_hl(0, "RainbowGreen", { fg = "#98C379" })
  vim.api.nvim_set_hl(0, "RainbowViolet", { fg = "#C678DD" })
  vim.api.nvim_set_hl(0, "RainbowCyan", { fg = "#56B6C2" })
end)

require("ibl").setup { indent = { highlight = highlight } }
```

Let's add two small plugins to improve your comments in code right away. The first plugin allows you to quickly comment one or more lines with one key. The second plugin allows you to expand comments, leaving notes like in a to-do list.

```lua
--init.lua

require("lazy").setup({
---

  {
    "numToStr/Comment.nvim",
    lazy = false,
  },
  {
    "folke/todo-comments.nvim",
    dependencies = { "nvim-lua/plenary.nvim" },
  },

---

})
```

And configure each of them in their own file, although for the comment switcher this is not really necessary, you can just call it in our `init.lua` file, but I'd rather separate it into a separate file.

```lua
--comment_config.lua

require('Comment').setup()
```

```lua
--todo_config.lua

require("todo-comments").setup({
  signs = true,      
  sign_priority = 8, 
  
  keywords = {
    FIX = {
      icon = " ", 
      color = "error", 
      alt = { "FIXME", "BUG", "FIXIT", "ISSUE" }, 
    },
    TODO = { icon = " ", color = "info" },
    HACK = { icon = " ", color = "warning" },
    WARN = { icon = " ", color = "warning", alt = { "WARNING", "XXX" } },
    PERF = { icon = " ", alt = { "OPTIM", "PERFORMANCE", "OPTIMIZE" } },
    NOTE = { icon = " ", color = "hint", alt = { "INFO" } },
    TEST = { icon = "⏲ ", color = "test", alt = { "TESTING", "PASSED", "FAILED" } },
  },
  gui_style = {
    fg = "NONE",         
    bg = "BOLD",         
  },
  merge_keywords = true,
  highlight = {
    multiline = true,                
    multiline_pattern = "^.",        
    multiline_context = 10,          
    before = "",                     
    keyword = "wide",
    after = "fg",                    
    pattern = [[.*<(KEYWORDS)\s*:]], 
    comments_only = true,            
    max_line_len = 400,              
    exclude = {},                    
  },
  colors = {
    error = { "DiagnosticError", "ErrorMsg", "#DC2626" },
    warning = { "DiagnosticWarn", "WarningMsg", "#FBBF24" },
    info = { "DiagnosticInfo", "#2563EB" },
    hint = { "DiagnosticHint", "#10B981" },
    default = { "Identifier", "#7C3AED" },
    test = { "Identifier", "#FF00FF" }
  },
  search = {
    command = "rg",
    args = {
      "--color=never",
      "--no-heading",
      "--with-filename",
      "--line-number",
      "--column",
    },
    -- regex that will be used to match keywords.
    -- don't replace the (KEYWORDS) placeholder
    pattern = [[\b(KEYWORDS):]], -- ripgrep regex
    -- pattern = [[\b(KEYWORDS)\b]], -- match without the extra colon. You'll likely get false positives
  },
})

vim.keymap.set("n", "]t", function()
  require("todo-comments").jump_next()
end, { desc = "Next todo comment" })

vim.keymap.set("n", "[t", function()
  require("todo-comments").jump_prev()
end, { desc = "Previous todo comment" })

--to search by comments
vim.keymap.set("n", "<leader>ft", "<cmd>TodoTelescope<cr>")
```

for css I use _colorizer_ to immediately see what color palette I applied to a given class, installation and configuration is simple

```lua
--init.lua

require("lazy").setup({
---

  { "norcalli/nvim-colorizer.lua" },

---

})
```

```lua
--conlorizer_config.lua

require("colorizer").setup({
	"*",
}, {
	names = true,
	rgb_fn = true,
	RGB = true,
	RRGGBB = true,
	RRGGBBAA = true,
	hsl_fn = true,
	css = true,
	css_fn = true,
	mode = "background",
})
```

Now our vim looks much better, but it's not over yet, there's the last section left, in it we will integrate separate cli inside our vim, further improve the UI and add many new features