Configuring a perfect editor for frontend development
Tags: vim, config, javascript, development
Published: 2019-10-21 06:12:04

---
title: Configuring a perfect editor for frontend development
published: true
description: I've seen a lot of tweets recently that basically state that vim is not suitable for frontend development. So I decided to do a small overview of my setup.
tags: vim, config, javascript, development
cover_image: https://thepracticaldev.s3.amazonaws.com/i/g6fvut3zhmekguyt7qo6.jpg
---

I've seen a lot of tweets recently that basically state that `vim` is not suitable for frontend development. So I decided to do a small overview of my setup(I'm mostly a frontend developer although I do some backend and devops stuff as well).

## My setup

You can find all configuration and instructions on how to install it in my github repo:

{% github gko/vimio %}

### File structure

The main file is `init.vim` that is symlinked to `.vimrc` during the installation. All the configuration scripts are stored in `after/plugin/*.vim`. This way I can just add another script to that folder(with a name of a plugin for instance) and it will be automatically loaded during vim startup. It also helps me to keep things modular. 

## Spoiler

I should point out right away that perfect editor doesn't exist or at least it's different for everyone.

### Why vim

I think there are many great  editors and IDEs out there but there is one thing among others that stands out if you're using vim: you don't switch environment. So if you're in terminal and you've cloned a project, once you open it you're still in terminal. Even if you quit vim you're  still in the same environment. For me, that's the most important thing about using vim(beside many other things, obviously).

With that out of the way let's take a look at some key features of my config.

## Opening a project

In my mind any project is strongly linked with a repository(except monorepos of course), so when I open any file in a repository I want my editor to go to the root of the project(i.e. where the .git folder is located). There is a plugin for that:

{% github airblade/vim-rooter no-readme %}

It goes through parent folders until it finds a repo, or your custom file or folder pattern that you can configure.

{% github mhinz/vim-startify no-readme %}

will help me quickly go back to recent projects.

### Opening a file

#### Locally

I use `fzf` and `ctrlp` extensions. 
The second one has also a <kbd>ctrl</kbd><kbd>b</kbd> shortcut to switch between buffers.

In future [I would like to use only fzf](https://github.com/gko/vimio/issues/14)

Also with this plugin:
{% github wsdjeg/vim-fetch no-readme %}
I can open a certain line, for instance:
```shell
vim ~/.vimrc:123
```
will open line 123 of `.vimrc` file.

#### Opening file in the browser

Sometimes when you have a file opened you want to quickly jump to a Web version(for instance to leave a comment). For this I use the following plugin:

{% github ruanyl/vim-gh-line no-readme %}

The main shortcuts are:
- <kbd>Leader</kbd><kbd>gh</kbd> — open file in the browser(current revision) 
- <kbd>Leader</kbd><kbd>gb</kbd> — open blame view for current file
- <kbd>Leader</kbd><kbd>go</kbd> — open repository in the browser

Please note, that if you use it in visual mode, it will automatically highlight selected line(s). 

### Sharing code via Carbon

[Carbon](https://carbon.now.sh/about) is a code sharing website, that adds swag to it. To share selection(if you're in visual mode) or the whole file I use following vim extension:
{% github kristijanhusak/vim-carbon-now-sh no-readme %}

Here's my `Carbon` config:
```vimscript
let g:carbon_now_sh_options = {
\  'ln': 'true',
\  'bg': 'rgba(74,144,226,1)',
\  't': 'night-owl',
\  'wt': 'none',
\  'ds': 'true',
\  'dsyoff': '20px',
\  'dsblur': '68px',
\  'wc': 'true',
\  'wa': 'true',
\  'pv': '56px',
\  'ph': '56px',
\  'fm': 'Fira Code',
\  'fs': '14.5px',
\  'lh': '141%',
\  'si': 'false',
\  'es': '2x',
\  'wm': 'false'
\}
```

### Miscellaneous

To configure `vim` to change indentation rules per project I use:
{% github editorconfig/editorconfig-vim no-readme %}

To search text within all files and replace it I use [ripgrep](https://github.com/BurntSushi/ripgrep) that is supported natively in `fzf` extension(`Rg` command):
{% github junegunn/fzf.vim no-readme %}

## Taking notes with vim

I recently wrote a post about how to configure vim to quickly take notes:
 
{% post https://dev.to/konstantin/taking-notes-in-vim-revisited-558k %}

I can add following plugin to that article:

{% github MattesGroeger/vim-bookmarks no-readme %}

It allows you to bookmark anything anywhere(even in NERDTree).

## Color themes

By default I use:
{% github cormacrelf/vim-colors-github no-readme %}

But I also installed the [base16](danielwe/base16-vim)(this is a fork, due to some problems with the original repo) themes and configured vim so that it looks into `~/.vimrc_background` file and takes current `base16` theme from there:
```vimscript
" set colorscheme
" if you have base16 installed take that colorscheme
try
    if filereadable(expand("~/.vimrc_background"))
        let base16colorspace=256
        source ~/.vimrc_background
        let g:airline_theme='base16'
    else
        colorscheme github
 
        " https://github.com/cormacrelf/vim-colors-github/pull/5
        hi! link SignColumn LineNr
 
        let g:airline_theme = "github"
    endif
catch /^Vim\%((\a\+)\)\=:E185/
    colorscheme default
endtry
```

This way vim stays consistent with terminal theme.

## Autocompletion

For autocompletion I use [coc.nvim](https://github.com/neoclide/coc.nvim).

It's based on the same language server as `vscode`.

### Javascript

By default you won't have an autocompletion in javascript. To enforce typescript to enable autocompletion within javascript you have to add:
```javascript
// @ts-check
```

At the top of the file. In my setup I have 
a [templates] (https://github.com/gko/vimio/blob/master/templates) folder that contains predefined templates for new files(config can be found in [templates.vim] (https://github.com/gko/vimio/blob/master/after/plugin/templates.vim)). So once I create new js file it already contains that comment.

### Jumping between files

`Coc` already provides different shortcuts to jump to function definition and what not:
```vimscript
nmap <silent> gd <Plug>(coc-definition)
nmap <silent> gy <Plug>(coc-type-definition)
nmap <silent> gi <Plug>(coc-implementation)
nmap <silent> gr <Plug>(coc-references)
```

However `vim` provides a magic shortcut `gf` that allows you to jump to a file under cursor. The magic is that you can alter it's behavior per file type. For instance, in javascript we want to use the following algorithm to resolve the file:
1. Check file locally
2. If it doesn't exist check file in node_modules
3. If it exists and it is a folder check the `package.json` for `main` field. If it is present open it. 
4. If the main field is not there check for `index.js`

You can find the implementation in the [after/ftplugin/javascript.vim] (https://github.com/gko/vimio/blob/master/after/ftplugin/javascript.vim) file.

## Linters

For linting I use `Ale`(config — [ale.vim](https://github.com/gko/vimio/blob/master/after/plugin/ale.vim)):
{% github w0rp/ale no-readme %}

and prettier to autoformat:
{% github prettier/vim-prettier no-readme %}

## Conclusion

Here I highlighted key features of my configuration. I encourage you to go check the full list of extensions that I use in the [init.vim] (https://github.com/gko/vimio/blob/master/init.vim) file and the configuration scripts in the [after/plugin/] (https://github.com/gko/vimio/blob/master/after/plugin) folder. I listed all the file types and commands for every extension explicitly so that there is nothing that fires up randomly.