Enhancing vim as an HTML/JS/CSS/PHP editor

I have enough of heavyweight, sometimes cluttered IDEs. I don’t know, maybe I’m getting too old-school or something, but I find myself working faster with plain old vim.

Of course, over time I have been optimizing the editor with the addition of several plugins and customization of its settings.

Here is my current vim setup focused on HTML, JS, CSS and PHP programming:

1. Install NERDTree
   This gives you a nice tree view of the filesystem.
2. Install IndentAnything
   Name says it all.
3. Install JavaScript indentation
   A nice JS indentation for IndentAnything
4. Install JSLint
   Validates the code for compilation errors as well as styling and informs you of this, almost in real-time!

You might want to throw in some visual enhancements as well. The railscasts color scheme along with the Monaco font are a pretty good combination.

Finally, my .vimrc file:

"Keyboard mappings
map :NERDTreeToggle

"FileType support
set filetype=on
filetype plugin on
filetype indent on

"Color scheme and font
autocmd FileType javascript,html,css,php colorscheme railscasts
autocmd FileType javascript,html,css,php set gfn=Monaco\ 10

"Hightlight current line
autocmd FileType javascript,html,css,php autocmd InsertLeave * set nocursorline
autocmd FileType javascript,html,css,php autocmd InsertEnter * set cursorline
autocmd FileType javascript,html,css,php highlight CursorLine ctermbg=40 cterm=NONE

"Indentation
autocmd FileType javascript,html,css,php set ai
autocmd FileType javascript,html,css,php set sw=2
autocmd FileType javascript,html,css,php set ts=2
autocmd FileType javascript,html,css,php set sts=2
autocmd FileType javascript,css,php set textwidth=79

"Enable autocompletion
autocmd FileType javascript set omnifunc=javascriptcomplete#CompleteJS
autocmd FileType html set omnifunc=htmlcomplete#CompleteTags
autocmd FileType css set omnifunc=csscomplete#CompleteCSS

"Enable line numbers
autocmd FileType javascript,css,php set number

"Enable incremental search
autocmd FileType javascript,html,css,php set incsearch

And that’s it. Please feel free to post your suggestions!

Advertisements