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!.