blocks|key|3249213|text|我已经为this+question和this+question写了一些答案，解释如何使用社区驱动的(它比Mozilla要好得多)和JSLint的DoctorJS+(以前的jsctag)来获得Vim的JavaScript+语法检查/+linting和源代码浏览/标记列表。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|3249214|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/473478/vim-jslint/5893447#5893447|1|https://stackoverflow.com/questions/4777366/recommended-vim-plugins-for-javascript-coding/5893600#5893600^0|32|D|3G|A|4|D|0|I|D|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@$9|Q|A|R|B|C]|$9|S|A|T|B|C]]|D|@$9|U|A|V|1|W]|$9|X|A|Y|1|Z]]|E|$]]|$1|F|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]|N|$5|I|J|K|E|$L|O]]]]

I've written answers for <a href="https://stackoverflow.com/questions/473478/vim-jslint/5893447#5893447">this question</a> and <a href="https://stackoverflow.com/questions/4777366/recommended-vim-plugins-for-javascript-coding/5893600#5893600">this question</a> explaining how to get JavaScript syntax checking / linting and source-code browsing / tag-list for Vim using the community-driven <a href="http://jshint.com" rel="nofollow noreferrer">jshint.com</a> (which is way better than JSLint IMO) and Mozilla's DoctorJS (formerly jsctags).

blocks|key|304080|text|我发现Syntastic在发现小问题方面相当有帮助。(和/或将其与某种形式的设置php混合为：-l。)Syntastic还会在您的html上显示整齐的警告。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|304081|entityMap|0|LINK|mutability|MUTABLE|url|http://www.vim.org/scripts/script.php?script_id=2736^0|3|9|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

I find <a href="http://www.vim.org/scripts/script.php?script_id=2736" rel="noreferrer">Syntastic</a> 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.

blocks|key|3034796|text|http://github.com/hallettj/jslint.vim，VIM中的JSLint怎么样？|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3034797|entityMap|0|LINK|mutability|MUTABLE|url|http://github.com/hallettj/jslint.vim^0|0|11|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

How about JSLint right in VIM, <a href="http://github.com/hallettj/jslint.vim" rel="nofollow noreferrer">http://github.com/hallettj/jslint.vim</a> ?

blocks|key|3249153|text|下面是我目前正在使用的插件以及一些vimrc映射，以使事情变得更简单。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3249154|插件|offset|length|style|BOLD|3249155|是每个用户必不可少的vim插件。它有助于将您需要的所有插件组织在自己的目录中。这使得以后卸载插件变得更加容易，因为您的插件并不都位于同一个树中。病原体将在运行时处理将所有内容添加到一起。|3249156|添加了流行的textmate功能，使打开文件变得很容易。|3249157|赋予vim文本的强大功能，就像代码片段一样。|3249158|在vim中添加了z编码，使得编写超文本标记语言更快、更容易。|3249159|使得切换注释代码块变得很容易。|3249160|为许多不同的文件类型添加了语法检查，如果vim启用了符号支持，您将在行号左侧获得标记，告诉您错误所在。|3249161|.vimrc配置设置|3249162|将HTML编码/解码为HTML实体(非常适合编写文档)|3249163|"EASILY+ESCAPE+OR+UNESCAPE+HTML
function+HtmlEscape()
++silent+s/&/\&amp;/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>|code-block|syntax|javascript|3249164|切换相对行号(新的VIM+7.3功能)|3249165|function!+g:ToggleNuMode()+
++if(&rnu+==+1)+
++++set+nu+
++else+
++++set+rnu+
++endif+
endfunc
nnoremap+<C-L>+:call+g:ToggleNuMode()<cr>|3249166|突出显示不需要的空格|3249167|"HIGHLIGHT+POTENTIALLY+UNWANTED+WHITESPACE
highlight+BadWhitespace+term=standout+ctermbg=red+guibg=red
match+BadWhitespace+/[%5E*+\t]\zs\s\%2B$\%7C+\%2B\ze\t/|3249168|entityMap^0|0|0|2|0|0|0|0|0|0|0|0|A|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1C|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1D|8|@$D|1E|E|1F|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1G|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|1H|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1I|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|1J|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1K|8|@]|9|@]|A|$]]|$1|R|3|S|5|6|7|1L|8|@]|9|@]|A|$]]|$1|T|3|U|5|6|7|1M|8|@$D|1N|E|1O|F|G]]|9|@]|A|$]]|$1|V|3|W|5|6|7|1P|8|@]|9|@]|A|$]]|$1|X|3|Y|5|Z|7|1Q|8|@]|9|@]|A|$10|11]]|$1|12|3|13|5|6|7|1R|8|@]|9|@]|A|$]]|$1|14|3|15|5|Z|7|1S|8|@]|9|@]|A|$10|11]]|$1|16|3|17|5|6|7|1T|8|@]|9|@]|A|$]]|$1|18|3|19|5|Z|7|1U|8|@]|9|@]|A|$10|11]]|$1|1A|3|-4|5|6|7|1V|8|@]|9|@]|A|$]]]|1B|$]]

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

Plugins

<a href="https://github.com/tpope/vim-pathogen" rel="nofollow">Pathogen</a> 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.

<a href="http://www.vim.org/scripts/script.php?script_id=3025" rel="nofollow">Command-T</a> adds the popular textmate feature that makes it easy to open files.

<a href="https://github.com/msanders/snipmate.vim" rel="nofollow">Snipmate</a> gives vim the power of textmate like snippets. 

<a href="https://github.com/kogakure/vim-sparkup" rel="nofollow">Sparkup</a> adds zencoding to vim to make it faster and easier to write HTML.

<a href="https://github.com/scrooloose/nerdcommenter" rel="nofollow">NERDCommenter</a> makes it easy to toggle commented blocks of code.

<a href="https://github.com/scrooloose/syntastic" rel="nofollow">Syntastic</a> 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)

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

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

map &lt;silent&gt; &lt;c-h&gt; :call HtmlEscape()&lt;CR&gt;
map &lt;silent&gt; &lt;c-u&gt; :call HtmlUnEscape()&lt;CR&gt;
</code></pre>

Toggle Relative Line Numbers (new VIM 7.3 feature)

<pre><code>function! g:ToggleNuMode() 
 if(&amp;rnu == 1) 
 set nu 
 else 
 set rnu 
 endif 
endfunc
nnoremap &lt;C-L&gt; :call g:ToggleNuMode()&lt;cr&gt;
</code></pre>

Highlight unwanted whitespace

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

blocks|key|300872|text|我喜欢ZenCoding：http://www.vim.org/scripts/script.php?script_id=2981|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|300873|另外，对于折叠Php：http://www.vim.org/scripts/script.php?script_id=1623|300874|entityMap|0|LINK|mutability|MUTABLE|url|http://www.vim.org/scripts/script.php?script_id=2981|1|http://www.vim.org/scripts/script.php?script_id=1623^0|D|1G|0|0|B|1G|1|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]]|C|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

I like ZenCoding : <a href="http://www.vim.org/scripts/script.php?script_id=2981" rel="nofollow noreferrer">http://www.vim.org/scripts/script.php?script_id=2981</a>

Also, for folding Php : <a href="http://www.vim.org/scripts/script.php?script_id=1623" rel="nofollow noreferrer">http://www.vim.org/scripts/script.php?script_id=1623</a>

blocks|key|306046|text|ctags又名Exuberant+ctags|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|306047|A+blog+post+about+it.|306048|那篇博文还提到了我还没用过的taglist+plugin。|306049|entityMap|0|LINK|mutability|MUTABLE|url|http://ctags.sourceforge.net/|1|http://amix.dk/blog/post/19329|2|http://vim.sourceforge.net/scripts/script.php?script_id=273^0|7|F|0|0|0|L|1|0|E|E|2|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]]|C|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|H|3|-4|5|6|7|15|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]|R|$5|K|L|M|C|$N|S]]]]

ctags aka <a href="http://ctags.sourceforge.net/" rel="nofollow noreferrer">Exuberant ctags</a> 

<a href="http://amix.dk/blog/post/19329" rel="nofollow noreferrer">A blog post about it.</a>

That blog post also mentions the <a href="http://vim.sourceforge.net/scripts/script.php?script_id=273" rel="nofollow noreferrer">taglist plugin</a>, which I have yet to use.

blocks|key|300876|text|NERDTree，minibufexpl|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|300877|entityMap|0|LINK|mutability|MUTABLE|url|http://www.vim.org/scripts/script.php?script_id=1658|1|http://www.vim.org/scripts/script.php?script_id=159^0|0|8|0|9|B|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

<a href="http://www.vim.org/scripts/script.php?script_id=1658" rel="nofollow noreferrer">NERDTree</a>, <a href="http://www.vim.org/scripts/script.php?script_id=159" rel="nofollow noreferrer">minibufexpl</a>

blocks|key|3249128|text|在处理html或xml时非常有用：surround.vim；它允许轻松地添加/删除/更改任何类型的标签。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3249129|entityMap|0|LINK|mutability|MUTABLE|url|http://www.vim.org/scripts/script.php?script_id=1697^0|H|C|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

Very helpful when dealing with html or xml: <a href="http://www.vim.org/scripts/script.php?script_id=1697" rel="nofollow noreferrer">surround.vim</a>; it allows to easily add/delete/change any kind of tags.

blocks|key|303214|text|由a+couple+of+functions+of+mine的其他人改编(反过来改编为from+others)，this+plugin允许您将“特殊”字符转换为HTML+(来回)或URL+Escapes+(来回)。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|303215|这在编写愚蠢的HTML电子邮件时非常有用。|303216|entityMap|0|LINK|mutability|MUTABLE|url|http://www.reddit.com/r/vim/comments/vbvzy/the_vim_holy_grail_why_the_hell_is_the_esc_key_so/c53iq0i|1|http://vim.wikia.com/wiki/HTML_entities|2|https://github.com/pydave/textconv.vim^0|1|T|0|17|B|1|1K|B|2|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]|$A|V|B|W|1|X]|$A|Y|B|Z|1|10]]|C|$]]|$1|D|3|E|5|6|7|11|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]|P|$5|I|J|K|C|$L|Q]]]]

Adapted by someone else from <a href="http://www.reddit.com/r/vim/comments/vbvzy/the_vim_holy_grail_why_the_hell_is_the_esc_key_so/c53iq0i" rel="nofollow">a couple of functions of mine</a> (in turn adapted <a href="http://vim.wikia.com/wiki/HTML_entities" rel="nofollow">from others</a>), <a href="https://github.com/pydave/textconv.vim" rel="nofollow">this plugin</a> 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.

Right now I'm using <code>surround.vim</code> to enclose text in HTML tags, and a <a href="http://lanpartei.de/~niklas/vim/after/syntax/css-color-vim.png" rel="noreferrer">plugin</a> that highlights text according to the hex value in the CSS file (e.g. #888 will have gray background in the CSS file).

Are there other useful plugins for web development?

Recommendations

Here is a list of the plugins mentioned in the answers so far:

<ul>
<li><a href="http://www.vim.org/scripts/script.php?script_id=1697" rel="noreferrer">surround.vim</a> to enclose text in HTML tags</li>
<li><a href="http://www.vim.org/scripts/script.php?script_id=2729" rel="noreferrer">jslint.vim</a> to check for JavaScript errors with JSLint</li>
<li><a href="http://www.vim.org/scripts/script.php?script_id=2981" rel="noreferrer">Emmet.vim</a> for HTML and CSS high-speed coding</li>
<li><a href="http://www.vim.org/scripts/script.php?script_id=1623" rel="noreferrer">phpfolding.vim</a> to for automatic folding of PHP</li>
<li><a href="http://www.vim.org/scripts/script.php?script_id=2736" rel="noreferrer">Syntastic</a> for automatic syntax checking of e.g. PHP</li>
<li><a href="http://ctags.sourceforge.net/" rel="noreferrer">Exuberant ctags</a> for tagging of a wide array of languages.</li>
<li><a href="http://majutsushi.github.com/tagbar/" rel="noreferrer">Tagbar</a> Helps view/navigate source, displays call signature in status area.</li>
</ul>

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

现在，我使用surround.vim将文本封装在HTML标签中，并使用根据CSS文件中的十六进制值突出显示文本(例如#888在CSS文件中将有灰色背景)。还有没有其他有用的web开发插件？Recommendations以下是到目前为止答案中提到的插件列表：用于将文本封闭在HTML中tags使用JSLint检查JavaScript错误高速coding用于自动折叠PHP用于自动语法检查，例如用于标记大

问用于网页开发和设计的有用的Vim插件(php、html、css、javascript)？
EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用于网页开发和设计的有用的Vim插件(php、html、css、javascript)？EN

回答 9

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用于网页开发和设计的有用的Vim插件(php、html、css、javascript)？
EN