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