Right now I'm using
surround.vim
to enclose text in HTML tags, and a plugin that highlights text according to the hex value in the CSS file (e.g. #888 will have gray background in the CSS file).Vim's vanilla layout for plugin files makes sense if you're just adding a file here and there to customize your own Vim experience, but turns into a mess when you.
Are there other useful plugins for web development?
Recommendations
Here is a list of the plugins mentioned in the answers so far:
- surround.vim to enclose text in HTML tags
- jslint.vim to check for JavaScript errors with JSLint
- Emmet.vim for HTML and CSS high-speed coding
- phpfolding.vim to for automatic folding of PHP
- Syntastic for automatic syntax checking of e.g. PHP
- Exuberant ctags for tagging of a wide array of languages.
- Tagbar Helps view/navigate source, displays call signature in status area.
closed as not constructive by Conner, Gordon, Andrew, Filburt, ЯegDwightSep 24 '12 at 19:04
As it currently stands, this question is not a good fit for our Q&A format. We expect answers to be supported by facts, references, or expertise, but this question will likely solicit debate, arguments, polling, or extended discussion. If you feel that this question can be improved and possibly reopened, visit the help center for guidance. If this question can be reworded to fit the rules in the help center, please edit the question.
9 Answers
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 ?
Luca MatteisLuca Matteis
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)
Toggle Relative Line Numbers (new VIM 7.3 feature)
Highlight unwanted whitespace
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
DrasillDrasill
Flavius StefFlavius Stef
ctags aka Exuberant ctags
That blog post also mentions the taglist plugin, which I have yet to use.
George MarianGeorge Marian
Very helpful when dealing with html or xml: surround.vim; it allows to easily add/delete/change any kind of tags.
Adapted by someone else from a couple of functions of mine (in turn adapted from others), this plugin allows you to turn 'special' characters into HTML entities (and back) or URL Escapes (and back).
This is extremely useful when writing stupid HTML Emails.
Not the answer you're looking for? Browse other questions tagged javascriptvimplugins or ask your own question.
emmet-vim is a vim plug-inwhich provides support for expanding abbreviations similar toemmet.
Installation
Download zip file:
To install using pathogen.vim:
To install using Vundle:
To install using Vim-Plug:
To checkout the source from repository:
or:
Quick Tutorial
Open or create a New File:
Type ('_' is the cursor position):
Then type
<c-y>,
(Ctrly,), and you should see:Enable in different mode
If you don't want to enable emmet in all modes,you can use set these options in
vimrc
:Enable just for html/css
Redefine trigger key
To remap the default
<C-Y>
leader:Note that the trailing
,
still needs to be entered, so the new keymap would be <C-Z>,
.Adding custom snippets
If you have installed the web-api for emmet-vim you can also add your own snippets using a custom snippets.json file.
Once you have installed the web-api add this line to your .vimrc:
You can change the path to your snippets_custom.json according to your preferences.
Here you can find instructions about creating your customized snippets.json file.