How i setup neovim for speed up React, Js, Ts, etc

Hello

Hi, I'm Rennaru.
Today i have rewrite my neovim configuration that aim to speed up React, Js, Ts, etc.

Ingredients

• Tools:

  • Neovim - You need version >= 0.7 but i will use nightly version
  • Ripgrep - A fast search tool

• Neovim Plugins:

  • Packer.nvim - A plugin manager for Neovim
  • catppuccin - A very cool theme
  • Lualine.nvim - A blazing fast and easy to configure Neovim statusline written in Lua
  • LspKind - VSCode-like pictograms
  • CMP - A completion plugin for neovim coded in Lua
  • Nvim-Lspconfig - Quickstart configs for Nvim LSP
  • Mason.nvim- Easily install and manage LSP servers, DAP servers, linters, and formatters.
  • LuaSnip - Snippet Engine for Neovim written in Lua
  • Nvim-Treesitter - Treesitter configurations and abstraction layer for Neovim
  • Autopairs - Autopairs
  • Ts-Autotag - Use treesitter to auto close and auto rename html tag
  • Telescope - Find, Filter, Preview, Pick. All lua, all the time.
  • Nvim-Web-Devicons - Lua fork of vim-web-devicons for neovim
  • Bufferline - A snazzy bufferline for Neovim
  • Lspsaga - A light-weight lsp plugin based on neovim's built-in lsp with a highly performant UI
  • Null-Ls - Use Neovim as a language server to inject LSP diagnostics, code actions, and more via Lua

Structure (After Setup)

📂 .config/nvim
├── 📂 after
│  └── 📂 plugin
│     ├── 🌑 auto.rc.lua
│     ├── 🌑 bufferline.rc.lua
│     ├── 🌑 catppuccin.rc.lua
│     ├── 🌑 cmp.rc.lua
│     ├── 🌑 lspkind.rc.lua
│     ├── 🌑 lualine.rc.lua
│     ├── 🌑 mason.rc.lua
│     ├── 🌑 telescope.rc.lua
│     └── 🌑 treesitter.rc.lua
├── 🌑 init.lua
├── 📂 lua
│  ├── 🌑 maps.lua
│  ├── 🌑 plugins.lua
│  └── 🌑 settings.lua
└── 📂 plugin
   ├── 🌑 lspconfig.rc.lua
   ├── 🌑 lspsaga.rc.lua
   └── 🌑 null-ls.rc.lua

Setting up Neovim

Ok, now let setup neovim!

Install Neovim

First, we need to install neovim i will install it from aur with paru an aur helper.

paru -S neovim-git

Create Directory

You need to create 3 directory like this:

mkdir after/plugin -p
mkdir plugin
mkdir lua

Neovim Basic Setup And Keymap

First, create ./lua/settings.lua and make it like this:

vim.cmd("autocmd!")

local config = {
  encoding = "utf-8",
  fileencoding = "utf-8",
  title = true,
  autoindent = true,
  smartindent = true,
  expandtab = true,
  hlsearch = true,
  backup = false,
  laststatus = 2,
  cmdheight = 1,
  showcmd = true,
  scrolloff = 3,
  shell = "zsh",
  backupskip = { "/tmp/*", "/private/tmp/*" },
  inccommand = "split",
  ignorecase = true,
  smarttab = true,
  breakindent = true,
  shiftwidth = 2,
  tabstop = 2,
  wrap = false,
  backspace = { "start", "eol", "indent" },
  cursorline = true,
  termguicolors = true,
  winblend = 0,
  wildoptions = "pum",
  pumblend = 5,
  background = "dark",
  swapfile = false
}

vim.scriptencoding = "utf-8"
vim.wo.number = true
vim.opt.path:append({ "**" })
vim.opt.wildignore:append({ "*/node_modules/*" })
vim.opt.formatoptions:append({ "r" })
vim.opt.clipboard:append({ "unnamedplus" })

vim.api.nvim_create_autocmd("InsertLeave", {
  pattern = "*",
  command = "set nopaste"
})

vim.cmd([[let &t_Cs = "\e[4:3m"]])
vim.cmd([[let &t_Ce = "\e[4:0m"]])

for i, v in pairs(config) do
  vim.opt[i] = v
end

Then, create ./lua/maps.lua and make this like this:

local keymap = vim.keymap

keymap.set('n', 'x', '"_x')

keymap.set('n', '+', '<C-a>')
keymap.set('n', '-', '<C-x>')

keymap.set('n', 'dw', 'vb"_d')

keymap.set('n', '<C-a>', 'gg<S-v>G')

keymap.set('n', 'te', ':tabedit<Return><C-w>w', { silent = true })
keymap.set("n", "tg", "gt")
keymap.set("n", "tG", "gT")
keymap.set('n', 'ss', ':split<Return><C-w>w', { silent = true })
keymap.set('n', 'sv', ':vsplit<Return><C-w>w', { silent = true })

keymap.set('n', '<Space>', '<C-w>w')
keymap.set('', 'sh', '<C-w>h')
keymap.set('', 'sk', '<C-w>k')
keymap.set('', 'sj', '<C-w>j')
keymap.set('', 'sl', '<C-w>l')

keymap.set('n', '<C-w><left>', '<C-w><')
keymap.set('n', '<C-w><right>', '<C-w>>')
keymap.set('n', '<C-w><up>', '<C-w>+')
keymap.set('n', '<C-w><down>', '<C-w>-')

You can change these two config if you want!

Last, require this two file from ./init.lua like this:

require("settings")
require("maps")

Install plugin manager:

Install Packer by running the below command:

Unix, Linux, Darwin

git clone --depth 1 https://github.com/wbthomason/packer.nvim\
 ~/.local/share/nvim/site/pack/packer/start/packer.nvim

Windows

git clone https://github.com/wbthomason/packer.nvim "$env:LOCALAPPDATA\nvim-data\site\pack\packer\start\packer.nvim"

Then, make ./lua/plugins.lua look like this:

local success, packer = pcall(require, "packer")
if (not success) then
  print("Packer not found!")
  return
end

vim.cmd([[packadd packer.nvim]])

packer.startup(function(use)
  use "wbthomason/packer.nvim"
  use { "catppuccin/nvim", as = "catppuccin" }
  use "hoob3rt/lualine.nvim"
  use "onsails/lspkind-nvim"
  use "hrsh7th/nvim-cmp"
  use "hrsh7th/cmp-nvim-lsp"
  use "hrsh7th/cmp-buffer"
  use "neovim/nvim-lspconfig"
  use 'williamboman/mason.nvim'
  use 'williamboman/mason-lspconfig.nvim'
  use "L3MON4D3/LuaSnip"
  use { "nvim-treesitter/nvim-treesitter", run = ":TSUpdate" }
  use "windwp/nvim-autopairs"
  use "windwp/nvim-ts-autotag"
  use { "nvim-telescope/telescope.nvim", tag = "0.1.0", requires = { "nvim-lua/plenary.nvim" } }
  use 'nvim-telescope/telescope-file-browser.nvim'
  use "kyazdani42/nvim-web-devicons"
  use "akinsho/bufferline.nvim"
  use "glepnir/lspsaga.nvim"
  use "jose-elias-alvarez/null-ls.nvim"
  use "MunifTanjim/prettier.nvim"
  use "MunifTanjim/eslint.nvim"
end)

Then, require it from ./init.lua like this:

require("plugins")

Now let restart neovim and run

:PackerInstall

Don't worry if it ask you to delete it self (packer.nvim) just say y

Setup Plugins

For my plugins config, you need to get it in my dotfiles repo

NotRennaru / Dotfiles

My personal dotfiles

Dotfiles

My personal dotfiles

Ingredients

Program	Name
🎨 Color Scheme	Nord & Catppuccin
🚀 Window Manager	Mutter
💾 Launcher	Ulauncher
🌍 Web Browser	Firefox
🖊️ Text Editor	Neovim
🐚 Shell	ZSH
⌨️ Terminal	Hyper
🎵 Music Player	Spotify

License

Dotfiles is available under the terms of the MIT LICENSE

View on GitHub

Links

Homepage: Click Me
Links: Click Me

Comments

[andreas]

catppuccin - A very cool theme

Very based! Nice little roundup for setting up NVIM as well. ^—^