vim indent html code inside javascript file

here is an example of code inside of my .js file after gg=G command:

class ChannelSection extends React.Component{
    render(){
        return(
            <div>
            <ChannelList channels={channels} />
            <ChannelForm />
            </div>
        )   
    }   
}

As you can see html tags have the same indent. I wish it would be like in html files – nested blocks indented further. Some plugin that can help?

Again, I need to indent ONLY HTML tags in .js file, not in .html file.

Answer

You may use mxw/vim-jsx. This plugin requires pangloss/vim-javascript, so you should install both of them.

This is a minimal .vimrc I used with vim-plug:

set nocompatible
filetype off

call plug#begin()
Plug 'pangloss/vim-javascript'
Plug 'mxw/vim-jsx'
call plug#end()

let g:jsx_ext_required = 0

Note that I set g:jsx_ext_required to 0 because you want to edit JSX tags in .js files.