Aug
23
2011
Collection // Linux // Programming

Essential VIM Plugins for Web Developers

Author An article by Rabi C Shah    Comments 4 Comments

Laziness is a virtue that every programmer needs to some degree. Efficiency is always a trademark of a good programmer. A programmer’s effort should be directed in a way to achieve maximum outcome in less time.

I have seen many programmers opting for vim editor. Yet, most of the programmers are unaware about the plugins available for vim editor. These plugins drastically extend its capabilities whilst reducing the effort you need to put in.

In this stone, I have listed 7 plugins for vim which are more lenient towards web developers. I have included plugins for tags, comments, parenthesis and quotes, exploring filesystem and listing recently used files. Snipmate, sparkup, matchit plugins are especially helpful in writing and finding tags, NERDTree for exploring filesystem, NERDCommenter for comments and mru for recently used files.

Before you begin reading this article, I recommend you to go through our previous stones on vim.

Snipmate

A snippet is a piece of often-typed text that you can insert into your document using a trigger word followed by a <tab>.

For instance, in a HTML file, if you type “html<tab>” in insert mode, it will expand into

<html>
</html>

By default this plugin has 17 predefined snippets for more than a dozen language. e.g. C , C++ HTML, Java , JavaScript, Objective C, Perl, PHP, Python, Ruby, Tcl, Shell, HTML, Mako templates, LaTeX, VimScript. So, don’t forget to check in ~/.vim/snippets directory.

Installation

1. Download snipmate.zip

2. Extract to .vim directory

unzip snipMate.zip -d ~/.vim

To activate the helptags, type in the vim editor

:helptags ~/.vim/doc ( Now you can read help by running :help snipmate )

3. Restart the vim editor

Remember to enable filetype-plugin-on by adding filetype plugin on in .vimrc file found in ~/.vim/ directory.

snipMate.vim Introductory Screencast from Michael Sanders on Vimeo.

Sparkup

This has to be one of my favorite vim plugin. It allows you to rapidly create HTML structures.

For instance, in a vim editor, if you type

nav > ul > li > a*4 { Links }

and press Ctrl + E , it will expand into

<nav>
   <ul>
      <li>
         <a href=""> Links </a>
         <a href=""> Links </a>
         <a href=""> Links </a>
         <a href=""> Links </a>
      </li>
   </ul>
</nav>

Ultimately, you will be saving a lot of time while coding. For more tutorial on Sparkup, go through this link

http://net.tutsplus.com/tutorials/other/vim-essential-plugin-sparkup/

Installation

1. Download Sparkup zip file

2. Extract to a directory

unzip sparkup-20091205.zip -d sparkup

3. Move the folder ftplugin inside snipmate to .vim directory

cd sparkup/vim

mv ftplugin ~/.vim/ftplugin

4. Run :helptags ~/.vim/doc ( Now you can read help by running :help sparkup )

5. Restart your vim editor

3. Surround

This plugin is a tool for dealing with pairs of “surroundings.” Examples of surroundings include parentheses, quotes, and HTML tags.

For example, if you place the curson inside the text, foo and type dst in normal mode of vim , then the tag gets removed to give you foo.

For more information, check out Peteris Krumins’ blog.

Installation

1. Download surround.zip

2. Extract surround.zip to surround

3. mv surround/plugin/* ~/.vim/plugin/
mv surround/doc/* ~/.vim/doc/

4. Run :helptags ~/.vim/doc

5. Restart vim

Type :help surround to read help

4. NERDTree

The NERDTree plugin allows you to explore your filesystem and to open files and directories. It presents the filesystem to you in the form of a tree which you can manipulate with the keyboard and/or mouse.

type :NERDTree to open this plugin. You will see a sidebar with list of files of your current directory.

Installation

1.Download NERD_tree.zip

2.Extract the file
unzip NERD_tree.zip -d ~/.vim/

 3.Run :helptags ~/.vim/doc

4.Restart vim

Type :help NERDTree to read help

For more information, check out Peteris Krumins’ blog.

5. NERDCommenter

The NERD commenter provides many different commenting operations and styles which are invoked via key mappings and a menu.

Installation

1. Download nerdcommenter.zip

2. Extract the file
unzip nerdcommenter.zip -d ~/.vim/

3. Run :helptags ~/.vim/doc

4. Restart vim

Type :help NERDCommenter to read help

For more information, check our this link.

6. MRU

The Most Recently Used (MRU) plugin provides an easy access to a list of recently opened/edited files in Vim. This plugin automatically stores the file names as you open/edit them in Vim.

Type :MRU in vim editor to use this plugin. It will display the recently opended/edited files.

Installation

1. Download mru.vim file

2. Copy the file to ~/.vim/plugin/ directory

cp mru.vim ~/.vim/plugin/

7. matchit

The matchit.vim script allows you to configure % to match more than just single characters. You can match words and even regular expressions. Also, matching treats strings and comments intelligently.

For instance, this plugin is able to find the HTML tag pairs.  Place the cursor in thetag, press % and it will find its pair i.e.

vim plugins

……

Installation

1. Download matchit.zip

2. Extract the file
unzip matchit.zip -d ~/.vim/

3. Run :helptags ~/.vim/doc

4. Restart vim

Type :help matchit to read help

For more information, check our this link.

Subscribe to fortystones.
Follow @fortystones on Twitter.
Get updated from our Facebook Fanpage.

Share
Tags: , , , , , , , ,

Related Posts

About the Author: Rabi C Shah

Rabi C Shah, pursuing his under-graduate program with a major in Information Technology in Indian Institute of Information Technology Allahabad (IIIT-A), is a passionate programmer. A Photoshop enthusiast, he is interested in Linux, C and C++. Rabi has completed many mini college projects in java and php. He is the Linux guy of our fortystones team.

4 Comments + Add Comment

  • Jó kis VIM pluginok. :) Te melyiket használod? Használsz esetleg másmilyet? | szimpatikus.hu trackback proxy August 25, 2011 at 1:05 am

    [...] Szimpatikus.hu Közösség, a “Jó kis VIM pluginok. Te melyiket használod? Használsz esetleg másmilyet?” című bejegyzésre szeretném felhívni a figyelmeteket. Várom a hozzászólásokat, [...]

    Reply
  • VIM Plugins for C / C++ developers | fortystones September 25, 2011 at 9:42 pm

    [...] Posts Essential VIM Plugins for Web Developers 10 Tips to Make Your C Program Effective Navigation in [...]

    Reply
  • painem October 2, 2011 at 10:39 am

    thank you very much :D

    Reply
  • Fran December 6, 2011 at 1:11 am

    1. Download Sparkup zip file

    2. Extract to a directory

    Hi!

    I’m installing them one by one, but I found problems with the second. According to your instructions we do not create nothing on .vim/doc folder from sparkup, so there’s no new help files there. So, for me :help sparkup says that there’s no help for that.

    Any hint?

    TIA,

    :wq!

    ;-)

    Reply

Leave a comment

CAPTCHA Image
*