Neovim ultimate Web Dev Setup with vim plug on windows

How to make an ultimate setup in neovim with dir tree and code autocomplete

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

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

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

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

after that go to the init.vim

go the command mode and type :PlugInstall

now you can see the plugins are installing

Yes we have installed close and open vim again now you see the some of the power have been updated to neovim

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

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

Finally we have completed the neovim setup

We have made it

Thanks

If You like this post make sure you follow us on