用于 Web 开发和设计的有用 Vim 插件（php、html、css、javascript）？ [关闭]

Posted 2023-02-15

【中文标题】用于 Web 开发和设计的有用 Vim 插件（php、html、css、javascript）？ [关闭]

【英文标题】：Useful Vim plugins for web development and design (php, html, css, javascript)? [closed]

【发布时间】：2011-03-11 13:53:39

【问题描述】：

现在我使用surround.vim 将文本包含在html 标记中，并使用plugin 根据CSS 文件中的十六进制值突出显示文本（例如#888 在CSS 文件中将具有灰色背景）。

还有其他有用的 Web 开发插件吗？

建议

这是迄今为止答案中提到的插件列表：

surround.vim 将文本包含在 HTML 标记中 jslint.vim 使用 JSLint 检查 javascript 错误 Emmet.vim 用于 HTML 和 CSS 高速编码 phpfolding.vim 用于 PHP 的自动折叠 Syntastic 用于自动语法检查，例如PHP Exuberant ctags 用于标记各种语言。 Tagbar 帮助查看/导航源，在状态区显示调用签名。

【参考方案1】：

我已经为 this question 和 this question 写了答案，解释了如何为 Vim 获取 JavaScript 语法检查 / linting 和 源代码浏览 / 标签列表使用社区驱动的jshint.com（比 JSLint IMO 好得多）和 Mozilla 的 DoctorJS（以前的 jsctags）。

【参考方案2】：

我发现Syntastic 在发现 PHP 小问题方面非常有帮助。 （和/或将其与某种形式的 php -l 设置混合为 :make。）Syntastic 还会在您的 html 上显示整洁的警告。

【讨论】：

+1 表示合成，它也适用于 javascript :)

你也可以试试 ale 插件 (w0rp/ale) 它可以利用新的异步函数

【参考方案3】：

在 VIM 中的 JSLint 怎么样，http://github.com/hallettj/jslint.vim ？

【参考方案4】：

这是我目前正在使用的插件以及一些 vimrc 映射，以使事情变得更容易。

插件

Pathogen 是每个用户必备的 vim 插件。它有助于将您需要的所有插件组织在它们自己的目录中。这使得以后卸载插件变得更加容易，因为您的插件并不都位于同一棵树中。 Pathogen 将在运行时处理将所有内容添加到一起。

Command-T 添加了流行的 textmate 功能，可以轻松打开文件。

Snipmate 为 vim 提供了像 sn-ps 一样的 textmate 功能。

Sparkup 将 zencoding 添加到 vim 中，以便更快、更轻松地编写 HTML。

NERDCommenter 可以轻松切换带注释的代码块。

Syntastic 为许多不同的文件类型添加了语法检查，如果 vim 启用了符号支持，您会在行号左侧看到标记，告诉您错误在哪里。

.vimrc 配置设置

将 HTML 编码/解码为 HTML 实体（非常适合编写文档）

"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>

切换相对行号（VIM 7.3 新功能）

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

突出显示不需要的空白

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

【参考方案5】：

我喜欢 ZenCoding：http://www.vim.org/scripts/script.php?script_id=2981

另外，对于折叠 Php ：http://www.vim.org/scripts/script.php?script_id=1623

【参考方案6】：

NERDTree, minibufexpl

【参考方案7】：

ctags 又名Exuberant ctags

A blog post about it.

那篇博文还提到了taglist plugin，我还没用过。

【讨论】：

taglist 列出 HTML 和 CSS 元素有用吗？

@janoChen 我没有使用 taglist，虽然它看起来很有用，所以我把它包含在我的答案中。也就是说，taglist 只是显示 ctags 收集的信息。根据 ctags 网站，它支持 HTML，但没有提及 CSS：ctags.sourceforge.net/languages.html 我个人在大型 PHP 代码库上使用了 ctags，发现它非常有用。

【参考方案8】：

在处理 html 或 xml 时非常有帮助：surround.vim;它允许轻松添加/删除/更改任何类型的标签。

【参考方案9】：

由其他人改编自 a couple of functions of mine（又改编自 from others），this plugin 允许您将“特殊”字符转换为 HTML 实体（并返回）或 URL 转义符（并返回）。

这在编写愚蠢的 HTML 电子邮件时非常很有用。