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

  • 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
AttachmentSize
20110609-vim-ide.png335.65 KB

Saw you article

Nice article, detailed enough for beginners. I would never have the patience to do this.
Consider adding web-indent to the wiki page!

Also vimrc is not my actual vimrc. Well it is because it's symlinked to from ~/.vimrc it's just here to be included in the repository. When I install my config I set up the symlinks.

ThanksI love sharing what I am doing,

I find it's the best way for me to objectivize my own knowledge :) And the best time is when one is diving in.

Am starting pedagogic (for me and others I hope) node app today, will be publishing a bit every day; from the point of view of software engineering best practices: how does one go from user stories, analysis and design, to node code? is the question I am hoping to answer.

Given absence of viewing hidden files on Mac Finder, what you are doing with vimrc sounds very reasonable! Just wanted to warn people who have never used $HOME vim config before.

Cheers,

Victor

Awesome resource. Many thanks.

Thanks for the write up, it's been a great resource getting my env set up. One thing to perhaps modify/clarify, your steps to install command-t installs it direct to ~/.vim/, whereby it may be better to use the pathogen steps detailed in the readme:

https://github.com/kchmck/vim-coffee-script/blob/master/Readme.md

Cheers,
Dan