Neovim ultimate Web Dev Setup with vim plug on windows
Tags: vim, webdev, python, windows
Published: 2021-12-14 03:49:59

How to make an ultimate setup in **_neovim_** with **_dir tree_** and **code autocomplete**

![](https://miro.medium.com/max/498/1*ld_hQKE7lHjMpf21gyKPKw.gif)

first install `nvim` and go the `nvim` folder

for windows:

```
c:\users\appdata\local\nvim
```

If there is no **nvim** folder then create one with name **nvim**

Now let us code the plugin and setup the environment

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/geww24rlh0h2hf8buy92.png) 

Now create an file name **init.vim** inside the **nvim** folder

and also create a folder named autoload and create an new file named **plug.vim**

and add the following code into the **plug.vim** file

[https://gist.github.com/pravee42/f12d4425d781eb61d7713f66da2bb6b0](https://gist.github.com/pravee42/f12d4425d781eb61d7713f66da2bb6b0)

after added the code into the **plug.vim**

move out of the directory and go back to the nvim folder

inside the nvim folder open the file named **init.vim** and paste the following code

```vim
set number
set relativenumber
set clipboard=unnamed
set autoindent
set tabstop=4
set shiftwidth=4
set smarttab
set softtabstop=4
set mouse=a
:filetype indent on
:filetype plugin on
set ruler

call plug#begin('C:/Users/ABIPRAVI/AppData/Local/nvim/plugged')
" below are some vim plugins for demonstration purpose.
" add the plugin you want to use here.
Plug 'Chiel92/vim-autoformat'
Plug 'davidhalter/jedi-vim'
Plug 'raimon49/requirements.txt.vim', {'for': 'requirements'}
Plug 'hail2u/vim-css3-syntax'
Plug 'gko/vim-coloresque'
Plug 'vim-scripts/pylint.vim'
Plug 'tpope/vim-haml'
Plug 'mattn/emmet-vim'
Plug 'dracula/vim', { 'as': 'dracula' }
Plug 'joshdick/onedark.vim'
Plug 'iCyMind/NeoSolarized'
" Use release branch (recommend)
Plug 'neoclide/coc.nvim', {'branch': 'release'}
Plug 'neoclide/coc.nvim'
Plug 'junegunn/vim-easy-align'
Plug 'https://github.com/junegunn/vim-github-dashboard.git'
Plug 'scrooloose/nerdtree', { 'on':  'NERDTreeToggle' }
Plug 'tpope/vim-fireplace', { 'for': 'clojure' }
Plug 'rdnetto/YCM-Generator', { 'branch': 'stable' }
Plug 'fatih/vim-go', { 'tag': '*' }
Plug 'nsf/gocode', { 'tag': 'v.20150303', 'rtp': 'vim' }
Plug 'junegunn/fzf', { 'dir': '~/.fzf', 'do': './install --all' }
Plug 'vim-airline/vim-airline'
Plug 'vim-airline/vim-airline-themes'
Plug 'github/copilot.vim'
Plug 'https://github.com/rafi/awesome-vim-colorschemes' 
Plug 'https://github.com/ap/vim-css-color'
Plug 'https://github.com/ryanoasis/vim-devicons'
Plug 'pangloss/vim-javascript'
Plug 'sbdchd/neoformat'
Plug 'leafgarland/typescript-vim'
Plug 'peitalin/vim-jsx-typescript'
Plug 'styled-components/vim-styled-components', { 'branch': 'main' }
Plug 'tpope/vim-commentary'
Plug 'jparise/vim-graphql'
Plug 'kien/ctrlp.vim'
Plug 'jiangmiao/auto-pairs'
Plug 'ryanoasis/vim-devicons'
call plug#end()


" Use <C-l> for trigger snippet expand.
imap <C-l> <Plug>(coc-snippets-expand)
"
" " Use <C-j> for select text for visual placeholder of snippet.
vmap <C-j> <Plug>(coc-snippets-select)
"
" " Use <C-j> for jump to next placeholder, it's default of coc.nvim
let g:coc_snippet_next = '<c-j>'
"
" " Use <C-k> for jump to previous placeholder, it's default of coc.nvim
let g:coc_snippet_prev = '<c-k>'
"
" " Use <C-j> for both expand and jump (make expand higher priority.)
imap <C-j> <Plug>(coc-snippets-expand-jump)
"
" " Use <leader>x for convert visual selected code to snippet
xmap <leader>x  <Plug>(coc-convert-snippet)
vmap <leader>f  <Plug>(coc-format-selected)
nmap <leader>f  <Plug>(coc-format-selected)


command! -nargs=0 Prettier :CocCommand prettier.formatFile

let g:airline#extensions#tabline#enabled = 1
let g:airline#extensions#tabline#left_sep = ' '
let g:airline#extensions#tabline#left_alt_sep = '|'

nnoremap <C-f> :NERDTreeFocus<CR>
nnoremap <C-k> :Prettier<CR>
nnoremap <C-I> :PlugInstall<CR>
nnoremap <C-n> :NERDTree<CR>
nnoremap <C-t> :NERDTreeToggle<CR>
nnoremap <C-s> :w<CR>
:colorscheme dracula
```

Yes we have completed the 90 percentage of the code and there is only few thing to do with the **init.vim**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mo634oacoaj515rsdmmx.png)
 
after that go to the init.vim

go the command mode and type **:PlugInstall**

now you can see the plugins are installing

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8oezupdd4zquwjzlkesu.png)
 
Yes we have installed **close** and **open vim** again now you see the some of the power have been updated to **neovim**

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/av1c9k2jffkppse0j6cb.png)
 

Ok but we havent still completed

now to the **plugged folder** inside the **nvim** folder there you can see that there is an **coc.nim** folder

there you can just type

```npm
yarn install  
npm i  
npm run build  
yarn build
```

**_(NOTE: before this setup make sure that node js is installed on your system then only it will work)_**

after installing again close the **nvim** and open it now you can see that the auto completion is working fine

and also we have added some of the shortcuts

**ctrl + s ->** save the file

**ctrl + k ->** Prettier auto code formatter

**ctrl + t ->** directory tree on the left side

**ctrl + f ->** To focus on the **nred** **tree** while working in the file

![](https://miro.medium.com/freeze/max/30/1*yesaIUcWPg-UDnm4wmM52g.gif?q=20)

Finally we have completed the neovim setup

We have made it

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/75saenyzoy6bh39ohuxz.png)
 

Thanks

If You like this post make sure you follow us on

[Instagram](https://www.instagram.com/praveenkumar_abipravi/)

[Twitter](https://twitter.com/ABIPRAVI1)

[Linked In](https://www.linkedin.com/in/praveen-kumar-9b09441b7/)

[BlogPost](https://abipraviii.blogspot.com/)