How i setup neovim for speed up React, Js, Ts, etc
Tags: neovim, typescript, javascript, lsp
Published: 2022-08-15 13:13:27

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

## Ingredients 
- **Tools**:
  - [Neovim](https://github.com/neovim/neovim) - You need version >= 0.7 but i will use nightly version
  - [Ripgrep](https://github.com/BurntSushi/ripgrep) - A fast search tool

- **Neovim Plugins**:
  - [Packer.nvim](https://github.com/wbthomason/packer.nvim) - A plugin manager for Neovim
  - [catppuccin](https://github.com/catppuccin/nvim) - A very cool theme
  - [Lualine.nvim](https://github.com/hoob3rt/lualine.nvim) - A blazing fast and easy to configure Neovim statusline written in Lua
  - [LspKind](https://github.com/onsails/lspkind-nvim) - VSCode-like pictograms
  - [CMP](https://github.com/hrsh7th/nvim-cmp) - A completion plugin for neovim coded in Lua
  - [Nvim-Lspconfig](https://github.com/neovim/nvim-lspconfig) - Quickstart configs for Nvim LSP 
  - [Mason.nvim](https://github.com/williamboman/mason.nvim)- Easily install and manage LSP servers, DAP servers, linters, and formatters. 
  - [LuaSnip](https://github.com/L3MON4D3/LuaSnipo) - Snippet Engine for Neovim written in Lua
  - [Nvim-Treesitter](https://github.com/nvim-treesitter/nvim-treesitter) - Treesitter configurations and abstraction layer for Neovim
  - [Autopairs](https://github.com/windwp/nvim-autopairs) - Autopairs
  - [Ts-Autotag](https://github.com/windwp/nvim-ts-autotag) - Use treesitter to auto close and auto rename html tag 
  - [Telescope](https://github.com/nvim-telescope/telescope.nvim) - Find, Filter, Preview, Pick. All lua, all the time. 
  - [Nvim-Web-Devicons](https://github.com//kyazdani42nvim-web-devicons) - Lua fork of vim-web-devicons for neovim
  - [Bufferline](https://github.com/akinsho/bufferline.nvim) - A snazzy bufferline for Neovim 
  - [Lspsaga](https://github.com/glepnir/lspsaga.nvim) - A light-weight lsp plugin based on neovim's built-in lsp with a highly performant UI
  - [Null-Ls](https://github.com/jose-elias-alvarez/null-ls.nvim) - 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](https://aur.archlinux.org/) with [paru](https://github.com/Morganamilo/paru) an aur helper.
```sh
paru -S neovim-git
```

### Create Directory
You need to create 3 directory like this:
```sh
mkdir after/plugin -p
mkdir plugin
mkdir lua
```

### Neovim Basic Setup And Keymap
First, create `./lua/settings.lua` and make it like this:
```lua
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:
```lua
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:
```lua
require("settings")
require("maps")
```

### Install plugin manager:
Install [Packer](https://github.com/wbthomason/packer.nvim) by running the below command:

> Unix, Linux, Darwin
```sh
git clone --depth 1 https://github.com/wbthomason/packer.nvim\
 ~/.local/share/nvim/site/pack/packer/start/packer.nvim
```

> Windows
```ps
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:
```lua
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:
```lua
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
{% embed https://github.com/NotRennaru/Dotfiles/ %}

## Links
Homepage: [Click Me](https://homepage-rennaru.vercel.app/)
Links: [Click Me](https://links-rennaru.vercel.app/)