Subscribe now

How to use Vim for React Native [06.15.2017]

Introduction

Recently, I completely changed my text editor for Vim, even for my Javascript projects. I was using Sublime at the time. Sublime is pretty good. I also tried VS Code. But I really love my current vim configuration. Probably this is something really personal, but I think this might be something people want to try and use.

I have set up in my Vim: Prettier and Flow. I will show you how to do that and have a good vim configuration that can make you more productive and faster.

About Vim

If you don't know what vim is, their website says:

Vim is an advanced text editor that seeks to provide the power of the de-facto Unix editor 'Vi', with a more complete feature set. Vim is often called a programmer's editor, and so useful for programming that many consider it an entire IDE. It's not just for programmers, though. Vim is perfect for all kinds of text editing, from composing email to editing configuration files.

Set up

I'm using nvim rather than the original vim version. Installing nvim is pretty easy, it has support for Mac and Linux. Here is a good blog post talking about the benefits of nvim compared to vim.

Suppose you have already installed neovim in your machine, let's install some important libraries, and then Prettier and Flow.

From now on, I will just say vim rather than neovim, but you know I'm using neovim. Also I have an alias: every time I type vim it runs nvim.

Important libraries

First of all, neovim uses as its default vimrc path ~/.config/nvim/init.vim.

So, let's create this file:

mkdir ~/.config/
mkdir ~/.config/nvim
vim ~/.config/nvim/init.vim

Basic Configuration

Before installing some dependencies, let's do something really basic in our vim configuration. Set the tabs as spaces, and set the tab as 2 spaces. The max text width will be 80 and we set up some formatting option you can find better on the vim documentation.

I also turn my mouse off, and set my leader as \\.

""" Tabs #tabs
" - Two spaces wide
set tabstop=2
set softtabstop=2
" - Expand them all
set expandtab
" - Indent by 2 spaces by default
set shiftwidth=2
" turn off mouse
set mouse=""
""" Leader #leader
let g:mapleader='\\'
"" Format Options #format-options
set formatoptions=tcrq
set textwidth=80

Plug

To install libraries and dependencies for vim, I'm using Plug. Let's install this.

Once we have installed Plug, let's create a block in our configuration file. All the plugins we will install should be in this block.

"" Libraries
call plug#begin()
... Plugins will be here
call plug#end()

Prettier

The first plugin we will install will be Prettier. It is an opinionated code formatter. I don't want to worry too much about styling and I have Prettier installed and configured to reformat my code once I save my file. I've mentioned here a couple times it's good to have a standard to your project, for you and for your coworkers. Prettier does this for me and I don't need to worry about it.

I'm using Neoformat, it has prettier as default.

Let's add the Neformat as a dependency.

"" Libraries
call plug#begin()
Plug 'sbdchd/neoformat'
call plug#end()

To install that, just open and close your vim and do a :PlugInstall.

To have Neformat executing Prettier every time we save our file, let's do that:

autocmd BufWritePre *.js Neoformat

This will format our js code every time we save it. Let's try that. Restarting our vim and trying.

Here we have a JavaScript file not formatted. Let's just open this and save it!

vim ~/tmp/test.js

Boom! It has formatted our code! As you can see, it has added commas and it has fixed the indentation for our brackets. Really good!

Ok, we have set up Prettier! Let's check out Flow.

Flow

We saw in a previous episode about Flow and how it can help us in our development phase. We are going to add Flow to our vim configuration. I suppose you already have flow-bin installed.

Let's add flowtype/vim-flow into our vim configuration:

Plug 'flowtype/vim-flow'

And let's install that with a :PlugInstall.

Let's test that! We will create a file and enable flow on this file. Also, we need to initialize flow, by doing a flow init.

mkdir ~/tmp/testing-flow/
cd ~/tmp/testing-flow/
flow init
vim test.js

Let's use a really simple example from the flow website. Here we have a function square that receives a number and returns a number. We will pass a string for this function.

// @flow
function square(n: number): number {
  return n * n;
  }

  square("3");

Once we save it! Boom! The flow errors appear on the bottom! Really useful!

Summary

Today, we saw how to set up a good vim configuration for our React Native projects. Our configuration uses neovim, using Prettier to help us with consistent code style. Also, we have set up flow for our project and installed its vim integration.

I hope you can see how help vim can be for your projects.

Resources