我该如何在Vim中格式化JS代码？

Question

我有一段 JavaScript 代码...

 15   $('.ajax_edit_address').each(function() {
 16     $(this).ajaxForm({
 17       target: $(this).parents('table.address').find('tr.address_header').children(':first'),
 18       success: function(response) {
 19         $('input, select, textarea', '.ajax_edit_address').removeClass('updating');
 20       }
 21     });
 22   });

这是我喜欢的格式，但假设我刚刚输入了一些内容并且想整理它。 所以我在上面运行 Vim 代码格式化程序...

=7j

结果是...

 15   $('.ajax_edit_address').each(function() {
 16       $(this).ajaxForm({
 17 target: $(this).parents('table.address').find('tr.address_header').children(':first'),
 18 success: function(response) {
 19 $('input, select, textarea', '.ajax_edit_address').removeClass('updating');
 20 }     
 21 }); 
 22       });

Vim似乎在将函数作为方法参数时存在问题。

这是我认为与此相关的.vimrc的部分内容...

:set cindent shiftwidth=2

" indent depends on filetype
:filetype indent on

:filetype plugin on

还需要安装或配置其他内容来格式化JS代码吗？

- Ethan

---

这个脚本有点奇怪……它会把：var x = 1 + 2 + 3 + 4 + 5 + 6 + 7; 变成 var x = 1 + 2 + 3 + 4 + 5 + 6 + 7; 还有一些其他奇怪的情况，所以不要在整个文件上运行它…… - gravitation

Answer 1

VIM插件Jsbeautify能够正确处理jQuery。它是在线Jsbeautify的vim插件版本。

- Jichao

Answer 2

有一个更简单的解决方案，不需要使用vim插件。

将js-beautify安装到您的系统python中：

pip install jsbeautifier

然后将以下内容添加到您的 .vimrc 文件中：

autocmd FileType javascript setlocal equalprg=js-beautify\ --stdin

就是这样了。

运行:help equalprg命令以查看为什么它有效。

- Nick Zalutskiy

---

你可以添加到该行的选项可能会有用的内容：--indent-size=3 --indent-char=CHAR（默认为空格） --indent-with-tabs --space-in-paren。你可以通过进入命令行并输入“js-beautify”来查看所有命令。 - kash

最好！为什么在这里使用equalprg而不是formatprg？ - Niko Bellic

@NikoBellic = 用于缩进，gq 用于文本重排。 - D. Ben Knoble

如果我在HTML中有包含在<script>标签中的Javascript代码，我如何通过可视化行模式来使用它？ - user1717828

Answer 3

如果你已经安装了js-beautify（它可以在Python中使用：pip install jsbeautifier，或者在Node中使用：npm -g install js-beautify），那么你可以直接从vim中运行它来重新格式化当前文件：

:%!js-beautify

- Pierz

Answer 4

我建议使用 einars/jsbeautify 的 CLI 版本，您可以在此处找到：https://github.com/einars/js-beautify。它是 www.jsbeautifier.org 的离线版本。

使用此插件 https://github.com/Chiel92/vim-autoformat，只需按下一个按钮即可在当前缓冲区上运行格式化程序。

- the blizz

Answer 5

最大的问题似乎是cindent无法识别这种类型的语法：

test({
  var b = 2;
});

它将转换为这样：

test({
    var b = 2;
    });

如果您处理该案例，我认为jQuery语法的缩进不会那么糟糕。但这需要您编写自定义JavaScript缩进文件。此外，您还需要编辑HTML缩进文件，以使其不使用cindent对带有JavaScript内容的脚本标签进行缩进。

我认为没有人成功地创建了适用于JavaScript的jquery/prototype兼容缩进文件。现有的JavaScript缩进脚本都存在缺陷。

- Pierre-Antoine LaFayette

---

有趣的是，jamessan链接的脚本似乎能正确处理这种情况，但对于更简单的代码（如上所示），它却搞得一团糟... - gravitation

我对这个回答感到非常困惑。当然，JS美化器会在处理无效语法时做出奇怪的事情... - tbranyen

Answer 6

另一个无需在vim中配置任何内容的选择是手动在保存时运行格式化命令，例如：

:w !js-beautify --stdin >%

保存后，vim编辑器将要求您重新加载当前文件的内容：

W12: Warning: File "src/static/js/main.js" has changed and the buffer was changed in Vim as well
See ":help W12" for more info.
[O]K, (L)oad File: 

这个命令的作用类似于 :w sudo tee % 命令，用于保存修改过但没有权限的文件。

该命令使用标准输入 (STDIN) 并将其写入变量文件描述符 % 中，作为当前文件的源。

PS：当然你需要安装 js-beautify。

pip install jsbeautifier

- ton

Answer 7

遗憾的是，“cindent”并不能胜任这份工作，因为它与C语法紧密相关。由于javascript的默认缩进脚本只是打开“cindent”，所以这并没有什么帮助。甚至在脚本中也有说明！

“维护者：无！想改善一下吗？”

我只会做一些基础的javascript操作，所以从来没有试图找到更好的东西。在vim.org上快速浏览了一下， this script 看起来值得一试。它比较新，可能考虑了现今更加复杂的javascript。

- jamessan

---

我刚试了一下，虽然不完美但比默认脚本好太多了。谢谢！ - gravitation