Vim for React and TypeScript Oh My!

What follows is my spin on a configuration for the awesome Vim editor; supporting Facebook’s React framework, as well as modern Javascript and Microsoft’s TypeScript language. As always, Vim gives us excellent support for all our development needs. Let’s go!

Getting the latest Vim

I recommend a recent version of a GUI-based Vim to support the plugins of this guide. At least, you should make sure you are running Vim version 8.

On a Mac? I recommend MacVim https://macvim-dev.github.io/macvim/

Linux? Install the latest gvim package from your distribution’s package manager.

You can also use a terminal version (text-based) Vim for most of the features in this guide. However, for the best support I recommend gvim.

MacVim 8.1 no plugins, yet :-)

Plugin Manager vim-plug

Plugin managers make it super easy to install and maintain all of the plugins we will use to support our development environment. I recommend the vim-plug plugin manager https://github.com/junegunn/vim-plug

Vim-plug has a simple syntax and does a nice job of getting our plugins installed and updated with minimal fuss.

The vim-plug Github page has detailed guides for getting the tool installed. However, if you are on Linux or macOS, the following command should get you started:

curl -fLo ~/.vim/autoload/plug.vim --create-dirs https://raw.githubusercontent.com/junegunn/vim-plug/master/plug.vim

Next, we need to add vim-plug to our ~/.vimrc file so that the plugin manager is loaded each time we launch Vim:

That’s it! Let’s add some plugins ;-)

React, Javascript and Typescript Plugins

Javascript

For Javascript support, we will use Darrick Wiebe’s plugin, available at https://github.com/pangloss/vim-javascript

TypeScript

For TypeScript support, we will use Leaf Garland’s plugin, available at https://github.com/leafgarland/typescript-vim

React

For React support, we will use Kento Tsuji’s plugin, available at https://github.com/MaxMEllon/vim-jsx-pretty

Install the Plugins

First, we will configure vim-plug to install the plugins via our ~/.vimrc file:

Then, launch Vim, and run the :PlugInstall command. Vim-plug will download and install the plugins for you:

vim-plug results of the :PlugInstall command

Success!

Congratulations! At this point, your Vim has all the basics required for React, Javascript and Typescript development. Read on for some Bonus Plugins that will make your Vim even better!

Vim rendering a React component with JSX support

Bonus Section

prettier.io code formatter

The Prettier code formatter does a nice job of automatically reformatting your code each time you save it in Vim.

We will use the offical vim-prettier plugin to integrate the formatter by adding the following code to our ~./vimrc plugin section:

Plug 'prettier/vim-prettier', { 'do': 'yarn install', 'for': ['javascript', 'typescript', 'css', 'less', 'scss', 'json', 'graphql', 'markdown', 'vue', 'yaml', 'html'] }
let g:prettier#autoformat = 0
autocmd BufWritePre *.js,*.jsx,*.mjs,*.ts,*.tsx,*.css,*.less,*.scss,*.json,*.graphql,*.md,*.vue,*.yaml,*.html PrettierAsync

Then, run :PlugInstall to install the plugin. [ Note: Prettier requires the Yarn package manager to be installed. See https://yarnpkg.com ]

prettier auto-formatting a file on save

Some more useful Plugins for you to try:

• vim-react-snippets A collection of common Javascript and Typescript snippets for developing React applications.
• deoplete A code completion plugin for easy autocompletion suggestions.
• NERDTree A file tree explorer for Vim
• FZF Quickly find and open files using fuzzy searches
• vim-fugutive Manage Git commands with ease
• airline Supercharge your Vim status bar
• vim-multiple-cursors Multi-cursor support for Vim
• vim-surround Automatically wrap your text selections in brackets

Happy Coding!

Vim provides a robust environment for developing modern applications with Javascript, Typescript and React. I hope you enjoyed this guide — Long live Vim!