If I am viewing a HTML file that someone else wrote, it often has <script> tags containing javascript, e.g.

<!DOCTYPE html>

        <video autoplay></video>

        var errorCallback = function(e) {
            console.log('Reeeejected!', e);

// Not showing vendor prefixes.
navigator.getUserMedia({video: true, audio: true}, function(localMediaStream) {
    var video = document.querySelector('video');
    video.src = window.URL.createObjectURL(localMediaStream);

    // Note: onloadedmetadata doesn't fire in Chrome when using it with getUserMedia.
    // See crbug.com/110938.
    video.onloadedmetadata = function(e) {
        // Ready to go. Do some stuff.
}, errorCallback);

I would like to indent the <script> tags and the javascript code it contains to some reasonable levels of indentation, using a command like


or visual select the <script> tag and hit =
How can I do this?

I am setting the

let g:html_indent_style1 = "inc"

But I believe that only affects newly written code. I have also tried setting the filetype to javascript, selecting the area and then hitting =, none of these seem to work.

  • 1
    First, you shouldn't reformat that part unless you have to do actual work there. This will create unnecessary changes and pollute your project's history for no reason. Second, you should use js-beautify.
    – romainl
    Aug 12, 2016 at 6:23
  • 1
    @romainl so you mean once js-beautify is installed, I can visually select the javascript and run something like :'<,'>! node js-beautify and the code will get filtered? I like it, that would be quite js-beautiful. Aug 12, 2016 at 6:45
  • vnoremap <buffer> <silent> <Leader>t :<C-u>silent '<,'>!js-beautify -j --brace-style=expand -<CR> Aug 12, 2016 at 9:46
  • @SatoKatsura yes Ive been trying to setup something similiar, but using vims own ex mode - as I dont currently have node installed. Ive updated my answer, its close, but not quite indenting correctly Aug 12, 2016 at 10:11
  • 2
    There's also a Python version. Aug 12, 2016 at 10:15

1 Answer 1


Based on @SatoKatsura's comments, here is a shell script (for UNIX like systems) which will install js-beautify and setup the python executable as a command.
Just to clarify, this will install the main js-beautify repo which contains the js-beautify program intended to be run on nodejs, but this script will not link to the nodejs script - instead it links to the python executable which is contained in a subfolder.

Generally this would need to be run as root - so it can write into /usr/local/

# setup js-beautify - python version

git clone "https://github.com/beautify-web/js-beautify.git" \
                                        /usr/local/src/js-beautify || exit 1

# put a link somewhere in $PATH so js-beautify can be called as a command
if [[ ! -h /usr/local/bin/js-beautify ]]
    ln -vs /usr/local/src/js-beautify/python/js-beautify \
    echo "js-beautify link already exists, skipping..."

If the script is successful, you can visually select a region in vim and run the ex command:


Note: If you have come from the other js-beautify, you will notice the command api for this python version is quite different.
For example, the python command is simpler to run the basic command js-beautify. I believe the node version - at a minimum - has a required option or two to get basic functionality to work, e.g. to accept a stream on STDIN.
But overall the python version seems like it might have less options..?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.