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!
- Installed and activated NERD_tree plugin
This plugin really does a lot to turn Vim into a proto-IDE (integrated development environment)- Went to http://www.vim.org/scripts/script.php?script_id=1658
- Downloaded latest version (for me: http://www.vim.org/scripts/download_script.php?src_id=11834 )
- Placed doc, nerdtree_plugin and plugin directories inside ~/.vim/bundle-available/NERD_tree
- From ~/.vim/bundles made symbolic link to activate NERD_tree
bash-3.2$ cd
bash-3.2$ cd .vim/bundle
bash-3.2$ ln -s ../bundle-available/NERD_tree/ NERD_tree - Quit MacVim from the dock
- Opened new one
- Did :help NERDTree
- Did :NERDTree
- Tabular
http://www.vim.org/scripts/script.php?script_id=3464
http://vimcasts.org/episodes/aligning-text-with-tabular-vim/ - JSLint
- Install for a given node project with npm. Very cool indeed!!!
$ npm install jslint
$ node_modules/.bin/jslint this01.js
-
- Install for use within vim
- Go to http://www.vim.org/scripts/script.php?script_id=2729
- Dowloaded latest version; at time of writing: http://www.vim.org/scripts/download_script.php?src_id=13925
- Unpacked file into ~/.vim/bundle-available/jslint
- From ~/.vim/bundles made symbolic link to activate NERD_tree
bash-3.2$ cd
bash-3.2$ cd .vim/bundle
bash-3.2$ ln -s ../bundle-available/jslint/ jslint - Quit MacVim from the doc
- Opened new one, got js syntax error highlighting, etc.
- Some refs that could help
- http://daniellopretto.com/better-code-with-jslint-and-vim/
- Gist for installing on Mac https://gist.github.com/965398
- Install for use within vim
- Command-T
- Go to http://www.vim.org/scripts/script.php?script_id=3025
- For more details and demonstration screencasts seen on the official Command-T website:
https://wincent.com/products/command-t - The latest version of the documentation can be viewed in the project Git repository:
http://git.wincent.com/command-t.git/blob_plain/HEAD:/README.txt - This looks really complicated: written in visual basic and ruby agh! No, that’s a “vimball”, not a Visual Basic file 🙂 And it actually worked out exactly as per instructions on http://www.vim.org/scripts/script.php?script_id=3025 and videos at https://wincent.com/products/command-t
- I downloaded the “vimball” from http://www.vim.org/scripts/script.php?script_id=3025
- Right in the download directory (i.e. anywhere) I executed
$ vim command-t.vba - Then “sourced” it right from inside vim:
:so % - Then compiled the ruby extension written in C:
cd ~/.vim/ruby/command-t
ruby extconf.rb
make - Then played with it (you can just do :CommandT then navigate to other files in directory and navigate with cursor keys and press <Return> to edit. Go watch the videos. Makes a nice complement to NERD_tree
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
- Syntax
- Jade and stylus syntax highlighting!
- https://github.com/digitaltoad/vim-jade
- Went to https://github.com/digitaltoad/vim-jade
- Downloaded tarball and un packed into ~/.vim/bundle-available/vim-jade
- From ~/.vim/bundles made symbolic link to activate vim-jade
$ ln -s ../bundle-available/vim-jade/ vim-jade - Edited jade file
- https://github.com/wavded/vim-stylus
- https://github.com/digitaltoad/vim-jade
- Jade and stylus syntax highlighting!