init.vim for React devs

In the “Senior Phase” of the coding bootcamp that I’m almost done with, we’ve had to deploy a few apps. Setting up continuous integration for the first time has been tricky and there has been a few times where it has been advantageous to be able to edit files from the command line, and with the very classic first google search of “how do I exit vim?” I was off to a customization wonderland that VScode could not offer me. I’m gonna show off a few examples

Here I am searching my repo for “listen”, a place I know I can find the definition of my server. I think this is snappier, and cleaner than VScodes search tool.

Here I have opened up a floating terminal window Inside vim that I can toggle on and off and let persist in the background.

Here I have my windows split into something probably familiar to most and I’m showing the navigation tree available to select and view files in the cwd (“current working directory”). As you can see, I have full syntax highlighting for Javascript react, using tsserver, or the same language server VScode uses to generate your autocompletion results.

So far I have shown six plugins.

Quick note about plugins, you install them with vim plug, it usually involves adding Plug ‘author/repo’

https://github.com/junegunn/vim-plug

with a file called .vimrc if you're using vim, and init.vim if you are using neovim, a more modern fork.

vim — dashboard: https://github.com/glepnir/dashboard-nvim

This is taking care of that cool custom header image and the nice starting screen.

vim-telescope: https://github.com/nvim-telescope/telescope.nvim

This is taking care of that great live search tool, and has similar features to search for local files and even color schemes.

vim-floaterm: https://github.com/voldikss/vim-floaterm

Floaterm is… you guessed it that floating terminal in front of the screen

nerdtree-vim: https://github.com/preservim/nerdtree

This is that file browser that i opened on the left!

vim-jsx-pretty: https://github.com/MaxMEllon/vim-jsx-pretty

This adds the nice highlighting for jsx files. My theme is mononoki_pro.

This ones the monster.

CoC, conquer-of-completion: https://github.com/neoclide/coc.nvim

This is the autocompletion engine that I have chosen to use, however there are a few great options that all do the trick. Vim even comes with LSP (language server protocol) out of the box, but I like this one. Its highly configurable, and the most similar to VScode (it provides those little snippets for each item). You install a plugin for coc for each language you need it to handle. Its always worked right away for me and makes me feel like I’m in a whole IDE.

Last but not least, here are my dotfiles https://github.com/Rogersiver/dotfiles

By replacing your nvim folder with mine (backing up first obviously) you can give my nvim config a shot and see if it fits your needs for development!