Forem: Rishit Pandey

Setting Up Neovim like VSCode

Rishit Pandey — Sat, 23 Oct 2021 10:10:52 +0000

My own setup

A lot of us use vscode for our day to day development work and we are used to its features. But for some of us vscode seems to be heavy on the resource usage and lags a little. So I switched to vim editor but when I started my development work, I was missing a lot of vscode features like auto-suggestions, completions, jumping to another file, etc and then I stumbled upon something that came from heaven.

Believe me this can be done in vim (neovim) too. There are lots of vim plugins available for this and even neovim 0.5 supports this out of the box with little configuration needed with lua language.

What we need

We need a plugin manager to install plugins for our vim editor
We also need neovim instead of vim editor for our setup.
And we need nodejs and npm installed on our system.

Plugin Manager: vim-plug

The plugin manager that we will be using in our setup is vim-plug which can be found here. What this plugin manager will do is that it will install various utilities and plugins that the vim community has created without any builds required by the user. Just add the plugin name to the vim config and it will install that plugin.
Let's install vim plug now. As a neovim user, run



   sh -c 'curl -fLo "${XDG_DATA_HOME:-$HOME/.local/share}"/nvim/site/autoload/plug.vim --create-dirs \
       https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim'

This will install the vim plug manager on your system. Now since you are using neovim, create a directory nvim in your config folder which is ~/.config for UNIX-based systems, and then there create a file as init.vim.
The final structure looks like this:



   ~/.config/nvim/init.vim

Now open init.vim file and add these lines,



call plug#begin('~/.vim/plugged')

" leave some space in between

call plug#end()

" we will add keybinds below this comment.

What these lines do? These lines call a function to enable the installed plugins whenever we open our neovim editor. Here we will add the plugins for usecases.

Plugins

As a former vscode user, I use a lot of vim plugins to make the experience better and to be honest it is okay to use a lot of plugins.

NerdTree

To have a folder structure and to view or jump to different files while in the vim editor, We can use the plugin nerdtree.

We can install the plugin by adding,



   Plug 'preservim/nerdtree'

This will give you a directory management panel on your left side.
Now add below config and keybindings for nerdtree



"Changing default NERDTree arrows
let g:NERDTreeDirArrowExpandable = '▸'
let g:NERDTreeDirArrowCollapsible = '▾'

nnoremap <C-t> :NERDTreeToggle<CR>

The above lines change the arrow type when changing directories in nerdtree and the nnoremap keybind binds Ctrl + t to open nerdtree.
You can also look at the actions for the directory by pressing m while you are on the nerdtree panel.

Code Completion

For the code completion I use coc vim completion plug. For this you need nodejs and npm installed to get the language packs with which you will get suggestions and code completion.



Plug 'neoclide/coc.nvim', {'branch': 'release'}

Add this between those two plug lines that we added from the above section.
Then add these keybindings for working with coc,



nmap <silent> gd <Plug>(coc-definition)
nmap <silent> gy <Plug>(coc-type-definition)
nmap <silent> gr <Plug>(coc-references)

nmap <silent> [g <Plug>(coc-diagnostic-prev)
nmap <silent> ]g <Plug>(coc-diagnostic-next)
nnoremap <silent> <space>s :<C-u>CocList -I symbols<cr>

nnoremap <silent> <space>d :<C-u>CocList diagnostics<cr>

nmap <leader>do <Plug>(coc-codeaction)

nmap <leader>rn <Plug>(coc-rename)

Then to add the language packs for coc,



let g:coc_global_extensions = [
  \ 'coc-tsserver',
  \ 'coc-json',
  \ 'coc-css',
  \  'coc-eslint',
  \  'coc-prettier'
  \ ]

These are some of the language packs that I use. You can go here and can look for other language packs as well.

Now in the same directory where we created init.vim, create another file as coc-settings.json. Then add the following,



{
  "eslint.autoFixOnSave": true,
  "eslint.filetypes": ["javascript", "javascriptreact", "typescript", "typescriptreact"],
  "coc.preferences.formatOnSaveFiletypes": [
    "javascript",
    "javascriptreact",
    "typescript",
    "typescriptreact"
  ],
  "tsserver.formatOnType": true,
  "coc.preferences.formatOnType": true
}

Note that these settings are only for the language packs that I use so if you are using the same packs with additional packages on top of it, you can have these configs otherwise it might create problems or give you an error when you open vim.

Colorscheme

For the color scheme, I use spaceduck, which is a blue coloured theme. To install this, add Plug pineapplegiant/spaceduck', { 'branch': 'main' }

And then add these lines below the plug function,



    if exists('+termguicolors')
      let &t_8f = "\<Esc>[38;2;%lu;%lu;%lum"
      let &t_8b = "\<Esc>[48;2;%lu;%lu;%lum"
      set termguicolors
    endif

   colorscheme spaceduck

For more details, you can look here,
dotfiles.

Thanks for reading and let me know if I can help you!

My Linux Fish Shell Workflow

Rishit Pandey — Mon, 18 Oct 2021 10:27:31 +0000

Hey Everyone!, I will be sharing my fish shell workflow on linux and how to set it up for your productivity boost.
Let's get started!

A little about fish shell

So you know about bash and zsh and how they work right? The fish shell is not like those shells. I mean they kinda have similarities but they do differ very much. ZSH can execute bash commands in a native as bash does but fish shell requires some editing to it specially when it comes to setting variables and exporting paths.

What's my workflow?

I usually work on the terminals only and for that I frequent switch between different directories, editing them in vim (I use neovim), etc. So for me having a built-in autocompletion for shell with syntax highlighting and is a plus point.
With that I also use this. This is a fish shell tool for jumping different directories with two word command.
For example, I have a very nested directory that I want to visit and from there I need to go to another nested directory and let's name the first directory as portfolio and my terminal config. Now for that I use the z tool and using the z tool I can create aliases for that directory.

z portfolio

You can create the alias for that directory by going to that directory and then run

z <short-name-of-that-directory>

Now go back to your home directory and then run

z <name-of-that-directory>

and whoosh! you are straight into that directory.

Now I know some of you will say that we can create aliases in the shell itself but for that you have to go to its config file and then add that alias and the source the config file for every directory. Z tool helps to create aliases on the fly.

For the fish prompt, I use starship cross-platform shell prompt. Its very minimal and easy to use with all the information you need for the directory is being displayed on your terminal in a very minimal way.

How to set it up?

So first we will install fish shell.
For mac users,

brew install fish

For linux user, (chad users)

sudo pacman -S fish
sudo dnf install fish
sudo apt install fish

Once the shell is installed, we will change the default shell for the user,

chsh -S /usr/bin/fish

If you just want to try out the fish shell, you can enter into fish shell just by running fish in your terminal.

Then we need to install a package manager for fish shell. The name is fisher. Fisher is a package manager for fish shell and is very fast.
Install fisher by running,

curl -sL https://git.io/fisher | source && fisher install jorgebucaran/fisher

Now the package manager is installed we can move on to installing and customizing the shell.

Add tools and Customize your shell!

First we will install z tool. Using fisher we can run,

fisher install jethrokuan/z

Now you can create aliases for your directories and jump across them.

For the prompt, I use Starship Prompt. For installing this I had some problem while running the below command in fish so I went to bash shell and executed the command and it installed the prompt successfully.

sh -c "$(curl -fsSL https://starship.rs/install.sh)"

The problem I faced was because of the different syntax that fish uses in contrast of what bash and zsh use.

Now you can also customize the prompt itself using a config file. I have my config here or you can read the starship docs here.

Thats it! Enjoy with your new terminal friend.

Extras

You can also use tide which is powerlevel10k for fish and is much more customizable too.
Also for icon support in the terminal while displaying directories, you can visit ptSh and exa.

Thanks for taking time to read and I appreciate your interest in my blog. This is my first blog so feel free to point out the mistakes and I will surely learn from them!