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 stackoverflow.com/questions/815548/… — Michael Hobbs
– Michael Hobbs, Commented Jan 30, 2016 at 12:18
Your "JavaScript" is not "JavaScript" and your "HTML" is not HTML. — romainl
– romainl, Commented Jan 30, 2016 at 13:51

Yous · Accepted Answer · 2016-01-30 17:22:29Z

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, 2016 at 17:22

Yous

7286 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

AntonOfTheWoods Over a year ago

Is this still the best answer in late 2020?

Yous Over a year ago

@AntonOfTheWoods According to mxw/vim-jsx's README, MaxMEllon/vim-jsx-pretty seems to be a next one. Personally, I use sheerun/vim-polyglot for filetype support, and it uses MaxMEllon/vim-jsx-pretty, too.

joeljpa · Accepted Answer · 2022-09-23 05:57:29Z

0

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.

answered Sep 23, 2022 at 5:57

joeljpa

5659 silver badges18 bronze badges

Collectives™ on Stack Overflow

vim indent html code inside javascript file

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related