推荐用于 JavaScript 编码的 Vim 插件？

Recommended Vim plugins for JavaScript coding?

提问by Tarek Saied

I'm new to JS & Vim. Which plugins would help me to write Javascript code?

我是 JS 和 Vim 的新手。哪些插件可以帮助我编写 Javascript 代码？

采纳答案by Ory Band

Syntax Checking / Linting

语法检查 / Linting

There is a very easy way to integrate JSLint or the community-driven jshint.com(which is much better IMO) with Vim using the Syntastic Vim plugin. See my other postfor more info.

有一种非常简单的方法可以使用 Syntastic Vim 插件将 JSLint 或社区驱动的jshint.com（这是更好的 IMO）与 Vim 集成。有关更多信息，请参阅我的另一篇文章。

Source-Code browsing / Tag-list

源代码浏览/标签列表

There's also a very neat way to add tag-listing using Mozilla's DoctorJS(formerly jsctags), which is also used in Cloud9 IDE's Ace online editor.

还有一种使用 Mozilla 的DoctorJS（以前称为jsctags）添加标签列表的非常巧妙的方法，它也用于Cloud9 IDE的Ace 在线编辑器。

1. Install the following packages using your favorite package-manager (Ubuntu's apt-get, Mac's home brew, etc.):
   1. exuberant-ctags
      • NOTE:After installing make sure running ctagsactually runs exuberant-ctagsand not the OS's preinstalled ctags. You can find out by executing ctags --version.
   2. node(Node.js)
2. Clone DoctorJSfrom github: git clone https://github.com/mozilla/doctorjs.git
3. Go inside DoctorJSdir and make install(You'll also need the makeapp installed, but this is very basic).
   • There're some bugs with installing the plugin, make installdoesn't do the trick for the moment. For now I just add the repo's bin/dir to my $PATH instead. See DoctorJS's GitHub and issues pagesfor more info.
4. Install the TagBar Vim plugin(NOTE:It's TagBar, not the old infamous TagList!).
5. PROFIT. :)

1. 使用您最喜欢的软件包管理器（Ubuntu 的apt-get、Mac 的homebrew等）安装以下软件包：
   1. exuberant-ctags
      • 注意：安装后确保运行ctags实际运行exuberant-ctags而不是操作系统的预安装ctags. 你可以通过执行找到ctags --version。
   2. node（节点.js）
2. DoctorJS从github克隆：git clone https://github.com/mozilla/doctorjs.git
3. 进入DoctorJS目录和make install（您还需要make安装该应用程序，但这是非常基本的）。
   • 安装插件存在一些错误，make install暂时无法解决问题。现在我只是将 repo 的bin/目录添加到我的 $PATH 中。有关更多信息，请参阅DoctorJS 的 GitHub 和问题页面。
4. 安装TagBar Vim 插件（注意：它是 TagBar，而不是旧的臭名昭著的 TagList！）。
5. 利润。:)

New Project - Tern.js

新项目 - Tern.js

DoctorJS is currently dead. There's a new promising project called tern.js. It's currently in early beta, and should eventually replace it.

DoctorJS 目前已死。有一个新的有前途的项目叫做tern.js。它目前处于早期测试阶段，最终应该会取代它。

There is a project ramitos/jsctagswhich uses tern as its engine. Just npm install -git, and tagbar will automatically use it for javascript files.

有一个项目ramitos/jsctags使用 tern 作为其引擎。就npm install -g这样，标签栏会自动将它用于 javascript 文件。

回答by romainl

snipMateemulates TextMate's ?insertion system and comes with a bunch of useful JS snippets (among others) by default. It's extremely easy to add your own.

snipMate模拟 TextMate 的?插入系统，并默认带有一堆有用的 JS 片段（以及其他）。添加自己的内容非常容易。

javaScriptLintallows you to validate your code against jsl.

javaScriptLint允许您根据jsl验证您的代码。

Also you can find a variety of JavaScript syntax fileson vim.org. Try them and see which one works best for you and your coding style.

您还可以在 vim.org 上找到各种JavaScript 语法文件。尝试一下，看看哪一种最适合您和您的编码风格。

The native omnicomplete (ctrlx-ctrlo) works very well for me. You can make it more dynamic with autoComplPop, but it can be annoying sometimes.

原生的 omnicomplete ( ctrlx- ctrlo) 对我来说效果很好。您可以使用autoComplPop使其更具动态性，但有时会很烦人。

edit, in response to tarek11011's comment:

编辑，回应tarek11011的评论：

acp doesn't work for JavaScript by default, you have to tweak it a little. Here is how I did it (dirty hack, I'm still a Vim noob):

默认情况下，acp 不适用于 JavaScript，您必须稍微调整一下。这是我是如何做到的（肮脏的黑客，我仍然是 Vim 菜鸟）：

In vim-autocomplpop/plugin/acp.vim I've added phpand javascript(and actionscript) to behavsso that it looks like that :

在 vim-autocomplpop/plugin/acp.vim 中，我添加了php和javascript（和actionscript）behavs，使其看起来像这样：

let behavs = {
    \   '*'            : [],
    \   'ruby'         : [],
    \   'python'       : [],
    \   'perl'         : [],
    \   'xml'          : [],
    \   'html'         : [],
    \   'xhtml'        : [],
    \   'css'          : [],
    \   'javascript'   : [],
    \   'actionscript' : [],
    \   'php'          : [],
    \ }

A little below, there is a series of code blocks that look like that :

下面是一系列代码块，看起来像这样：

"---------------------------------------------------------------------------
call add(behavs.ruby, {
    \   'command' : "\<C-x>\<C-o>",
    \   'meets'   : 'acp#meetsForRubyOmni',
    \   'repeat'  : 0,
    \ })

I've duplicated this one and edited it a little bit to look like that:

我复制了这个并对其进行了一些编辑，使其看起来像这样：

"---------------------------------------------------------------------------
call add(behavs.javascript, {
    \   'command' : "\<C-x>\<C-o>",
    \   'meets'   : 'acp#meetsForRubyOmni',
    \   'repeat'  : 0,
    \ })

and did the same for actionscript and php.

并为 actionscript 和 php 做了同样的事情。

If you want to edit JS/CSS within a HTML document you can do :set ft=html.css.javascript in Vim's command line to make ctrlx-ctrlowork as expected on method/properties names in JS blocks and properties/values in CSS blocks. However this approach has its drawbacks, too (weird indentation…).

如果您想在 HTML 文档中编辑 JS/CSS，您可以在 Vim 的命令行中执行 :set ft=html.css.javascript 以使ctrlx-ctrlo在 JS 块中的方法/属性名称和 CSS 块中的属性/值上按预期工作。然而，这种方法也有它的缺点（奇怪的缩进……）。

回答by Chiel ten Brinke

This plugin is also useful: https://github.com/maksimr/vim-jsbeautify. It provides full autoformatting for javascript. One keystroke, and your code looks beautiful. It can come in handy when pasting code snippets as well. It makes use of the popular js-beautifier, which can also be found as an online application. The latter can be found right here: http://jsbeautifier.org/.

这个插件也很有用：https: //github.com/maksimr/vim-jsbeautify。它为 javascript 提供了完全的自动格式化。一键敲击，你的代码看起来很漂亮。在粘贴代码片段时它也可以派上用场。它利用了流行的 js-beautifier，它也可以作为在线应用程序找到。后者可以在这里找到：http: //jsbeautifier.org/。

回答by Scott

I only use one js specific vim plugin - jslint.vim - https://github.com/hallettj/jslint.vimwhich validates your code with jslints rules and gives you syntax errors as well.

我只使用一个特定于 js 的 vim 插件 - jslint.vim - https://github.com/hallettj/jslint.vim，它使用 jslints 规则验证您的代码并为您提供语法错误。

回答by Evgenii

To fix indentation and autoformatting (Ctrl =): JavaScript Indent

修复缩进和自动格式化（Ctrl =）：JavaScript Indent

To set indentation width, add javascript.vimfile into ~/.vim/ftplugin dir with following contents (for two space indentation):

要设置缩进宽度，请将javascript.vim文件添加到 ~/.vim/ftplugin 目录中，内容如下（两个空格缩进）：

 setl sw=2 sts=2 et