Bjørn Enki’s web design blog

Vim editor for website development - PHP, XHTML, CSS, JavaScript, etc.

Vim is a powerful, highly configurable text editor used mainly for programming. I develop all my websites in Vim, including XHTML, CSS, JavaScript and PHP code. This post is simply meant as a teaser—to showcase the possibilities of the amazing Vim editor and let more people know it exists.

Vim editor for website development - PHP, XHTML, CSS, JavaScript, etc.

In my quest for an editor to develop my custom website designs in, I stumbled upon Vim - and never looked back. Created as an extension to Vi (Vim stands for Vi improved), Vim is the result of programmers working for years (currently 34) on an editor that's mainly for programming.

Vim Features

Along with the standard features you might expect from a powerful editor, Vim offers some extremely valuable tools for professional website design, including:

But what makes Vim my absolute favorite editor for creating websites is how the actual typing interface works; adding, editing, re-arranging text, and so on can all be done without the mouse in extremely efficient manners—and it gets better and better the more you learn.

Modifying text in Vim

Vim basically has two "modes" that are toggled by the escape key (often mapped to Caps-Lock instead). One for inserting text (insert mode) and one for modifying text (command mode). In insert mode, most keys will work as expected and whatever is typed appears on the screen. In command mode, every key has a specific function that, once memorized, make manipulating text or code in Vim extremely effective.

Here are a few examples of modifications to text done in Vim's command mode. Starting with the following 4 lines of code in a file:

79.    $content = '
80.       <h1>'.ucfirst($cat['title']).' related posts</h1>
81.       <div class="hr iepngfix"></div>
82.       <h2>'.$cat['summary'].'</h2>

With the cursor anywhere in the file, typing "81Gddp" would delete line 81 and paste it after the current line number 82, resulting in this:

79.    $content = '
80.       <h1>'.ucfirst($cat['title']).' related posts</h1>
81.       <h2>'.$cat['summary'].'</h2>
82.       <div class="hr iepngfix"></div>

Typing "/ucfirst" followed by "cwstrtoupper" would move the cursor to the first found instance of "ucfirst" then "cwstrtoupper" would change the word in front of the cursor to strtoupper, resulting in this:

79.    $content = '
80.       <h1>'.strtoupper($cat['title']).' related posts</h1>
81.       <h2>'.$cat['summary'].'</h2>
82.       <div class="hr iepngfix"></div>

There are also a number of options for navigating the cursor to certain pieces of code in command mode. (the mouse is also supported). For example:

These commands might seem a bit confusing at first, but there's actually lot of logic behind them,and once memorized they make manipulating text files a whole lot quicker.

Vim Resources

Vim is extremely well documented, and there are a great number of quality resources on the editor. Here are a few:

Posted May. 7, 2009 at 7:37 pm under: website development, linux, vim

Related post:


Dre, May. 25, 2012 at 7:34 pm
I was lucky enough to use VIM from the beginning of my programming career and the efficiency is unmatched. If your a fan of something with a high learning curve but eventual awesomeness... use VIM... let the fools use dreamweaver
Byron Mondala, Aug. 13, 2010 at 4:23 pm
I hated using vi/vim during those college years, but nowadays I'm tired of lifting my arm to use my mouse. I'm moving away from IDEs such as Aptana, Dreamweaver... etc. and re-aquainting myself with vim and re-discovering its power.
Leave a response!