Simple Vim plugin management for Javascript development

I've written about vim as an IDE before. In this case, however, in order to prepare for node hacking, and also in line with a recent discussion about IDE's on the node mailing list, I'm documenting here notes I made while getting geared up with gvim (macvim) for SSJS development with some of the more important plugins that were mentioned (you know, it's that "so how do I actually do this" moment) (this should all work fine on either MacBook Pro or Ubuntu/Linux):

Posted on: Last updated on: Written by:

I’ve written about vim as an IDE before. In this case, however, in order to prepare for node hacking, and also in line with a recent discussion about IDE’s on the node mailing list, I’m documenting here notes I made while getting geared up with gvim (macvim) for SSJS development with some of the more important plugins that were mentioned (you know, it’s that “so how do I actually do this” moment) (this should all work fine on either MacBook Pro or Ubuntu/Linux):

  • Discussion on vim plugins: http://groups.google.com/group/nodejs/browse_thread/thread/c5fe809d3cf9ca72
  • Joyent Wiki entry on vim plugins: https://github.com/joyent/node/wiki/Vim-Plugins
  • vim config directory example (note “vimrc shoud be .vimrc for Mac and Linux): https://github.com/Floby/vim-config   
  • Before you do anything at all, check out all the lovely stuff there is at /usr/share/vim/vim72 or current, you may have too much already 🙂
  • Create an empty ~/.vimrc file if none exists (your local configuration file) and a local ~/.vim directory to put your local user goodies.
  • First I installed pathogen (because I really am a vim user).
    • http://www.vim.org/scripts/script.php?script_id=2332
    • https://github.com/tpope/vim-pathogen
    • Added invocation at top of ~/.vimrc:
      bash-3.2$ head .vimrc
      "pathogen
      filetype off
      call pathogen#runtime_append_all_bundles()
      call pathogen#helptags() "call this when installing new plugins
      filetype plugin on
    • Downloaded tarball and placed pathogen.vim in ~/.vim/autoload
      bash-3.2$ ls -l .vim/autoload/pathogen.vim
      -rw-r–r–@ 1 victorkane  staff  5354 Jun  8 10:13 .vim/autoload/pathogen.vi
    • Created ~/.vim/bundle directory
    • Created  ~/.vim/bundle-available directory
      As explained in README.md at https://github.com/Floby/vim-config: “In order to install a new bundle, one must add it in the bundle-available directory…. bundles live in the bundle directory. In order to be able to activate/deactivate bundles everything in bundle is a symlink to the real module in bundle-available”. OK!
$ npm install jslint
$ node_modules/.bin/jslint this01.js

Express examples dir with Vim IDE

Express examples dir with MacVim (gvim) “IDE”

 

  • web-indent a.k.a JavascriptIndent
    • The one and only true javascript (and html) indentation plugin: see http://stackoverflow.com/questions/620247/how-do-i-fix-incorrect-inline-javascript-indentation-in-vim/4183349#4183349
    • Went to http://www.vim.org/scripts/script.php?script_id=3081 and downloaded the package.
    • Unpacked web-indent directory into ~/.vim/bundle-available/
    • From ~/.vim/bundles made symbolic link to activate web-indent
      bash-3.2$ cd
      bash-3.2$ cd .vim/bundle
      bash-3.2$ ln -s ../bundle-available/web-indent/ web-indent
    • Important!!! Add the following line to your ~/.vimrc file:
      filetype plugin indent on
    • I’ve also added some stuff in my ~/.vimrc file to change tabs to spaces and set tabs to 2 spaces: 
      "pathogen
      filetype off
      call pathogen#runtime_append_all_bundles()
      call pathogen#helptags() "call this when installing new plugins
      filetype plugin on

      "indent stuff
      filetype plugin indent on
      set tabstop=2
      set shiftwidth=2
      set expandtab