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:

Command, variable, and word completion based upon file contents and/or dictionaries.
Fully customizable auto-indenting of code.
Multiple buffers for storing cut/copied code.
Recording of actions for automated repetiton.
Many, many more...

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:

To move 5 words forward one could type 5w
To move 3 lines down one could type 3j
To move to the first character of the current line one could type ^
To move to the end of a file one could type G

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:

The Vim homepage
Download Vim for free
Vim's online manual (HTML, also available as PDF)
Learning the Vi and Vim editor (book by O'Reilly that I can recommend)

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

Color scheme for Vim and gVim made specifically for website development

Comments

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.

Bjørn Enki’s web design blog