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

708
6
21

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

vim indent html code inside javascript file

1 Answers1