Using Vim as your main editor for web development

Real Programmers by XKCD

Finding the code editor or IDE (from now on I'll be referring to both) that is the best match for you is one of those unexpected rites of passage that every developer goes to in the journey of learning how to code. In my case, I started learning programming with python some 9 years ago, I remember jumping from one editor to another in a weekly basis, the first one was IDLE, and from the top of my mind, I remember trying Boa Constructor, Komodo, and Notepad++ to name a few.

In this process of finding your go-to editor, you learn about the editor war and start understanding the several inside jokes about Vim and Emacs.

It is at this point where you decide to learn either Vim or Emacs, and your journey down the rabbit hole begins.

By the title of this post, you have already guessed that my preferred editor is Vim, but I'm not going to try and sell you into it or convince you to spend countless hours modifying your current development environment to adapt it to use Vim.

My goal for this post is to share the customizations I have implemented in order to efficiently use Vim as my main editor for web development projects.

Vim plugins for Web Development

As a web developer most of your time you are basically going to be working on HTML, CSS and JavaScript files, and depending on your preferences, or the requirements of the projects you are working on, you will probably going to be using some framework (React, Vue or Angular) and an assortment of tools like babel, webpack, grunt, etc.

Personally, I try to use as few plugins as possible, I only install them when the benefit they bring to the table are tangibles and it really improves my workflow.

At the moment the plugins I have installed are the following:

• Emmet.vim
• indentline & vim-jsx-pretty
• vim-commentary
• ALE (eslint & prettier)

Emmet.vim

Emmet is an amazing tool for high-speed coding and editing, it allows you to create complex HTML structures with one line of code.

indentline & vim-jsx-pretty

These are two plugins for improving the visual style of Vim. indentline adds vertical lines to easily show indent levels, and vim-jsx-pretty highlights JSX code for when you are for example working with ReactJS.

vim-commentary

This plugin allows you to comment/uncomment code easily, you just select the code you want and press <g-c>.

ALE (eslint & prettier)

ALE (Asynchronous Lint Engine), allows you to use linters and fixers making your life a lot easier, is one of those things that you don't think you need until you try. In my case, I'm mainly using ALE to enable prettier while using Vim.

Implementing live preview (hot reloading)

Watching live the effects of the modifications you are making is something that greatly impacts your workflow in a positive way, most of the time this is something that's build into your development environment when you're for example working on a React or Gatsby project, but for the cases that you are just creating a simple webpage (HTML, CSS, and JavaScript) editors like Atom, Brackets or VSCode have the option to show you live on a side panel, the page you are working on.

Stubborn as I am, I wanted this functionality while working with Vim, and while there are several plugins that can implement this, I decided to go on another route.

In this case I decided to implement an editor agnostic solution, basically what we need in this case is to run a local server, watch the files for any modification and update the page on the server every time a file updates.

It sounds more complicated than it really is, we just need to install and run browser-sync inside our project folder.

I'm assuming you already have nodejs installed in your system, so let's go ahead and install browser-sync globally.

npm install -g browser-sync

After installing browser-sync we can run it inside any folder in our system and it will create a local server (automatically displaying the default index.html file you have in the folder).

browser-sync start --server --files .

If you're working inside Linux (and you should), you can create an alias to simplify the process of running the server. Open up your .bashrc file inside your home folder and add the following.

# Command line alias to start the browser-sync server
alias serve="browser-sync start --server --files ."

In my case, I went one step further in order to access the server inside my private network and test the webpage on several devices.

# browser-sync config
# Get the current local IP address
export SERVER_IP=`hostname -I`

# The command alias to start the browser-sync server
alias serve="browser-sync start --server --files . --no-notify --host $SERVER_IP --port 9000"

Thanks for reading!.

Comments

[Jonas Antonio Reyes Casanova]

Excelente, gracias hermano. Justo quería saber un poco más sobre el uso de browser-sync con neovim, he probado instalar live-server pero no me sirve si estoy trabajando con vue, u otras librerías reactivas. Que grata coincidencia seas de .VE

[maxdevjs]

Vim just highlights keywords

This is not Vim fault per se. I am not sure what exactly Vim exposes as API to create syntax highlights, but to create accurate themes is a not so easy. Also, is time consuming task.

Yesterday I started to port (to port, not to create from scratch) a VSCode theme to (n)Vim and I can relate that the raw experience is not so thrilling (but I wonder if VSCode would recognize any syntax without specific implementation).

I now decided to rely on language packs (specific syntax/regex/etc implementation) and the (n)Vim colorscheme is getting almost exactly as the original VSCode theme (I still have to cover a few edge cases).

In general, vim-polyglot (or specific syntax highlighting / indentation bundles) + a decent colorscheme should help to avoid aesthetics nightmares.

[Clive Da]

(as a vi user) i love the emacs graph

[Rasoul Nayebpour]

Thank you so much, I enjoyed reading it

[James Bridgewater]

I don't wait for ALE unless I'm trying to get rid of an error message, in which case writing the file seems to trigger ALE to re-parse the code.

[Erwan ROUSSEL]

How do you install plugins for vim?

[FidelVe]

there are several plugin managers for vim, I personally use vundle.

[Matthieu Cneude]

Good article! I didn't know Browser Sync at all.

If somebody is searching how to configure Vim for PHP, I wrote an article some time ago how to do that.

I describe basically the plugins you might need. You can choose whatever you want, install them and configure them.

Many of them can be used for other languages as well, like the fantastic fzf for fuzzy find everything you want.

It's here: thevaluable.dev/vim-php-ide/.

Hope it helps!

[James Bridgewater]

Thanks for the link. What's your take on the current state of Vdebug? It seems like it's gotten a bit buggy over the last couple of years.

[Matthieu Cneude]

I didn't use Vdebug for quite some time, my tests are enough for debugging. Sorry.

[Gergely Polonkai]

If you add the learning curve image, you should tell people if there is a way to exit Vi/ViM without killing it from another terminal </troll>

[arhuman]

Nice Article.

You might maybe want to also check:
_ tomtom/tcomment_vi which is said to better handle mix languages.
_ tpope/vim-surround which is a good emmet complement.

[FidelVe]

Thank you!

I'll give them a look!

[Marc Hanisch]

Thanks for this article. I'm using YouCompleteMe without problems for years, but good to know in which direction the Vim community is moving :-)

Btw. you can also execute browser-sync straight direct in your Vim with the help of the :terminal command:

:terminal ++close browser-sync start --server --files .

(assuming that your current working directory is where your index.html lives)

You could also create a custom command for this in your .vimrc:

command Serve terminal ++close browser-sync start --server --files .

Now you have to type just :Serve and you don't have to leave Vim.