vim indent html code inside javascript file

Question

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.

This is a duplicate of http://stackoverflow.com/questions/815548/how-do-i-tidy-up-an-html-files-indentation-in-vi — Michael Hobbs, Jan 30 '16 at 12:18
Your "JavaScript" is not "JavaScript" and your "HTML" is not HTML. — romainl, Jan 30 '16 at 13:51

score 3 · Accepted Answer · answered Jan 30 '16 at 17:22

3

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.

answered Jan 30 '16 at 17:22

Yous

728
6
22

Is this still the best answer in late 2020? – AntonOfTheWoods Nov 27 '20 at 12:56
1

@AntonOfTheWoods According to [mxw/vim-jsx](https://github.com/mxw/vim-jsx)'s README, [MaxMEllon/vim-jsx-pretty](https://github.com/MaxMEllon/vim-jsx-pretty) seems to be a next one. Personally, I use [sheerun/vim-polyglot](https://github.com/sheerun/vim-polyglot) for filetype support, and it uses MaxMEllon/vim-jsx-pretty, too. – Yous Mar 14 '22 at 14:58

score 0 · Answer 2 · answered Sep 23 '22 at 05:57

Without plugins and just as a temporary quick solution, I found the command :set filetype=html (alias as :set ft:html) to be quite effective. This worked very well for me due to my work on HTML being minimal but persistent.

Indent the whole file via gg=G or selected section using just =.

Done. Now revert to the previous filetype (in your case, js) doing the reverse :set ft=javascript and continue as you were.

If you didn't know your default filetype use :set filetype? before doing this.

vim indent html code inside javascript file

2 Answers2