Aubrey Portwood

WordPress — Stoicism — 🎾

Diving into Vim/gVim on Windows; How I customized Vim to edit HTML, CSS, Javascript and PHP w/ ZenCoding, SnipMate, Surround and DelimiMate

| Permalink

Different Flavors of Vim

I have released my gVim configuration as an installable application for windows, check it out: Aubrey’s gVim

It all started with an annoyance with Notepad++, the CTRL+Y (Redo) key was not working and a NetTuts screencast. About two months ago I complained about VIM, yet I still have an itch to use it.  I spent all day yesterday trying to get Vim going, and today I find myself frustrated again. Vim is very customizable, something I really like. But, that customization should ‘just work,’ hell I can’t even get a plugin installed correctly!

I installed a few different forks of Vim (called Cream) and a few vimrc/plugin combinations. But, I have currently reverted to base install gVim/Vim for Windows and started fresh. I will share my finding below.

[adsense metakey=”adsense-1″]
  • This video helped me figure out plugins and how Vim uses folders and files. I used this video as a guide to install (and understand) pathogen and install ZenCoding.
  • I copied the content (extracted on my desktop) of to the bundle folder. This should automatically load your plugin since I installed pathogen.
  • Loaded gVim and typed div
  • ZenCoding gave me hell, real hell, because I couldn’t figure out how to expand the abbreviations. But, after a little digging around, I found out <c-y> means type: CTRL+Y then a comma (,). I have a feeling Vim explanations like this are going to cause me not to use Vim. It worked though.
  • I opted to install more plugins, starting with snipMate.
  • I started installing most of the plugins mentioned in this post, or in this post under the ‘Most of the bundles are git submodules facilitating easy updating and configuration’ section. Note, I did not opt to use the Ultimate Vim config, just the plugin suggestions he was giving.
    • The first was the colors. Once I installed it into the bundle folder, I could use (in gVim) the command “:color bluegreen”. For a list of the color schemes, I found this.
      • I had to edit my c:Program FilesVim_vimrc file and added “color bluegreen”.
      • Note: there is a menu, but it does not save the theme you are using as permanent.
    • Then I got to tcomment, and discovered (once I followed the install directions, not putting it in my bundle folder) that it seems to have installed in C:Program FilesVimvimfilesbundleColorSamplerPackautoload, which is kind of weird.
    • I installed HTML AutoCloseTag, but not with the bundle way, that did not work. I followed the install directions (putting it in C:Program FilesVimvimfilesftplugin) and it worked. I typed <body> and it would </body> and put my cursor in the middle.
      • I added au FileType xhtml,xml,php so c:/Program Files/Vim/vimfiles/ftplugin/html_autoclosetag.vim to my _vimrc file to make it work in PHP files also, because often I an doing PHP/HTML coding in a single PHP file.
    • At this point I was starting to feel comfortable with Vim plugins (finally!)
    • I installed delimitMate, which gives you auto completion of ",',[,{,( etc. I used the bundle method for that and downloaded the zip file; I did not use Git.
    • At this point, I was happy with the plugins I had.
  • Now I wanted to start customizing my _vimrc file. I found this post, which gave me a good look at the things I could customize.
    • At this point I was actually editing my _vimrc file using gVim.
    • I noticed CTRL+V worked for paste! Although I did want to use Vim, I did not want to ignore my normal keys. CTRL+C,V,X, etc and the arrows.
    • Here is what I pasted into my _vimrc file:
      set autoindent
      set smartindent
      set tabstop=4
      set shiftwidth=4
      set showmatch
      set guioptions-=T
      set vb t_vb=
      set ruler
      set incsearch
      set virtualedit=all
    • Again, I had to do a :w! to write the file in Vim since it was in C:Program FilesVim.
    • I found this _vimrc file which had a lot of custom things I wanted. I added these to my _vimrc file. I did not overwrite my _vimrc file, just took what I wanted out of it.
      set number
      set guifont=Consolas:h10.5
      "set guioptions+=b "show horizontal scroll bar
      set ttyfast
      set ignorecase
      set list
      set listchars=tab:>-,trail:-
      set showmode
    • Then I noticed all the ~backup files that were getting created, annoying! I added set backupdir=c:temp to my _vimrc file and they were all stored in c:temp. I like the idea of having a backup, just not in the folder I am working in.

And now to see how it goes. I am going to create a separate post for this, but I am going to ZIP up my Vim folder and offer it as a start-off solution. I am probably going to use Vim/gVim for a couple days to edit HTML, CSS, Javascript and PHP and see if it works well first.

Leave a Comment