Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Useful Vim plugins for web development and design (php, html, css, javascript)? [closed]

People also ask

Is vim good for HTML and CSS?

In fact, it can make writing HTML and CSS a much more enjoyable experience. The VIM is free and open source, and you should be familiar with VIM plugins.

What are Vim plugins?

vim is a plugin that wraps the command-line fuzzy finder program fzf, allowing you to use it directly within Vim. Fzf is a fast and portable fuzzy finder application written in Go. It is a requirement for the Vim plugin, so make sure you install it first.


I've written answers for this question and this question explaining how to get JavaScript syntax checking / linting and source-code browsing / tag-list for Vim using the community-driven jshint.com (which is way better than JSLint IMO) and Mozilla's DoctorJS (formerly jsctags).


I find Syntastic to be fairly helpful in spotting minor PHP problems. (and/or blend it with some form of setting php -l as :make.) Syntastic also shows you tidy warnings on your html.


How about JSLint right in VIM, http://github.com/hallettj/jslint.vim ?


Here are the plugins I'm currently using as well as some vimrc mappings to make things a bit easier.

Plugins

Pathogen is an essential vim plugin for every user. It helps keep all the plugins you need organized within their own directories. This makes it much easier to uninstall plugins at a later time, since your plugins don't all live in the same tree. Pathogen will handle adding everything together at runtime.

Command-T adds the popular textmate feature that makes it easy to open files.

Snipmate gives vim the power of textmate like snippets.

Sparkup adds zencoding to vim to make it faster and easier to write HTML.

NERDCommenter makes it easy to toggle commented blocks of code.

Syntastic adds syntax checking to lots of different file types, and if vim has signs support enabled, you get markers to the left of your line numbers telling you where your errors are.

.vimrc config settings

Encode/Decode HTML to HTML Entities (Great for writing documentation)

"EASILY ESCAPE OR UNESCAPE HTML
function HtmlEscape()
  silent s/&/\&/eg
  silent s/</\&lt;/eg
  silent s/>/\&gt;/eg
endfunction

function HtmlUnEscape()
  silent s/&lt;/</eg
  silent s/&gt;/>/eg
  silent s/&amp;/\&/eg
endfunction

map <silent> <c-h> :call HtmlEscape()<CR>
map <silent> <c-u> :call HtmlUnEscape()<CR>

Toggle Relative Line Numbers (new VIM 7.3 feature)

function! g:ToggleNuMode() 
  if(&rnu == 1) 
    set nu 
  else 
    set rnu 
  endif 
endfunc
nnoremap <C-L> :call g:ToggleNuMode()<cr>

Highlight unwanted whitespace

"HIGHLIGHT POTENTIALLY UNWANTED WHITESPACE
highlight BadWhitespace term=standout ctermbg=red guibg=red
match BadWhitespace /[^* \t]\zs\s\+$\| \+\ze\t/

I like ZenCoding : http://www.vim.org/scripts/script.php?script_id=2981

Also, for folding Php : http://www.vim.org/scripts/script.php?script_id=1623