6

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

<!DOCTYPE html>

<html>
    <head>
    </head>
    <body>
        <video autoplay></video>

        <script>
        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);
        </script>
    </body>
</html>

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

gg=G

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.

Improve this question
14
  • 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
    Commented 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.
    – the_velour_fog
    Commented Aug 12, 2016 at 6:45
  • vnoremap <buffer> <silent> <Leader>t :<C-u>silent '<,'>!js-beautify -j --brace-style=expand -<CR>
    – Sato Katsura
    Commented 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
    – the_velour_fog
    Commented Aug 12, 2016 at 10:11
  • 2
    There's also a Python version.
    – Sato Katsura
    Commented Aug 12, 2016 at 10:15

1 Answer 1

Reset to default
2

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 ]]
then
    ln -vs /usr/local/src/js-beautify/python/js-beautify \
                                                  /usr/local/bin/js-beautify
else
    echo "js-beautify link already exists, skipping..."
fi

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

:'<,'>!js-beautify

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..?

Improve this answer

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.