How can I format JS code in Vim?

Question

I have this bit of 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   });

That's formatted the way I like it. But let's say I had just finished typing something and I wanted to tidy it up. So I run the Vim code formatter on it...

=7j

The result is...

 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 seems to have trouble with functions as method arguments.

Here is what I think is the relevant part of my .vimrc...

:set cindent shiftwidth=2

" indent depends on filetype
:filetype indent on

:filetype plugin on

Is there something else that needs to be installed or configured to format JS code?

That script is a little strange... it will turn: var x = 1 + 2 + 3 + 4 + 5 + 6 + 7; into var x = 1 + 2 + 3 + 4 + 5 + 6 + 7; There are some other bizarre cases too, so don't run it on an entire file... — gravitation, Oct 31 '09 at 05:23

score 23 · Answer 1 · answered Sep 16 '10 at 01:34

23

VIM plugin Jsbeautify could handle jQuery correctly. It's the vim plugin version of the online Jsbeautify.

answered Sep 16 '10 at 01:34

Jichao

40,341
47
125
198

Nick Zalutskiy · Answer 2 · 2014-04-09T15:08:07.783

15

There is a far simpler solution that requires no vim plugins.

Install js-beautify to your system python:

pip install jsbeautifier

Then add this to your .vimrc:

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

That's it.

Run :help equalprg to see why this works.

edited Apr 09 '14 at 15:08

answered Nov 21 '13 at 17:07

Nick Zalutskiy

14,952
7
53
50

Options that you can add to that line that may be useful:--indent-size=3 --indent-char=CHAR (space is default) --indent-with-tabs --space-in-paren You can see all the commands by going to the command line and typing 'js-beautify'. – kash Feb 11 '15 at 13:38
Best! Why use `equalprg` instead of `formatprg` here? – Niko Bellic Feb 11 '17 at 02:00
1

@NikoBellic = for indent, gq for text-reflow. – D. Ben Knoble Jan 13 '20 at 21:44
If I have Javascript in ` – user1717828 Aug 22 '20 at 19:23

score 13 · Answer 3 · answered Jan 13 '20 at 15:04

13

If you've got js-beautify installed (it's available for Python: pip install jsbeautifier, or Node: npm -g install js-beautify) then you can just run it directly from vim - to reformat the current file:

:%!js-beautify

answered Jan 13 '20 at 15:04

Pierz

7,064
52
59

score 8 · Answer 4 · answered Jan 21 '13 at 08:42

I'd recommend the CLI version of einars/jsbeautify, which you can find here: https://github.com/einars/js-beautify. It's the offline version of www.jsbeautifier.org.

Use this plugin https://github.com/Chiel92/vim-autoformat to run the formatter on your current buffer with one button press.

score 2 · Accepted Answer · edited Dec 02 '18 at 10:42

2

The biggest issue seems to be the cindent doesn't recognize this type of syntax:

test({
  var b = 2;
});

It will turn it into this:

test({
    var b = 2;
    });

If you handle that case I'd imagine the indent wouldn't be so awful for the jQuery syntax. But this would require you writing a custom javascript indent file. Also, you'd have to edit the html indent file to not use cindent for script tags with javascript content.

I don't think anyone has successfully created a jquery/prototype compatible indent file for javascript. The existing javascript indent scripts are all flawed.

edited Dec 02 '18 at 10:42

Hamid Rouhani

2,309
2
31
45

answered Oct 31 '09 at 15:31

Pierre-Antoine LaFayette

24,222
8
54
58

The funny thing is, the script jamessan linked seems to handle this case correctly, but for the even easier code (above) it screws it all up... – gravitation Oct 31 '09 at 20:35
3

I'm so confused by this answer. Of course a JS beautifier will do weird things with invalid syntax... – tbranyen Jun 09 '14 at 18:01

score 0 · Answer 6 · answered Oct 31 '09 at 01:22

Unfortunately, 'cindent' just isn't going to do the job since it's is very much tied to C syntax. Since all the default indent script for javascript does is turn on 'cindent', that's not much help. It even says so in the script!

" Maintainer: None! Wanna improve this?

I don't do anything other than really basic javascript so I've never bothered trying to find anything better. From a quick look on vim.org, this script looks like it may be worth a shot. It's newer, so it probably takes into account the more complex javascript that's used now days.

I just tried it out; it's not perfect but it's vastly better than the default script. Thanks! — gravitation, Oct 31 '09 at 05:18

score 0 · Answer 7 · answered Oct 22 '19 at 13:00

Another alternative that do not need to configure anything inside vim is to run the format command manually at save like:

:w !js-beautify --stdin >%

After saving in this way the vim editor will ask you to reload the current file content:

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:

This works like the :w sudo tee % command used to save a file that you modified without privilege.

The command uses the standard input(STDIN) and write it to a variable file descriptor % used as source of current file.

PS: of course you need to install the js-beautify.

pip install jsbeautifier

How can I format JS code in Vim?

7 Answers7

Linked