vim-jsx-pretty

vim-jsx-pretty copied to clipboard

Hi there!

Here's an example of a template where the problem occurs:

        <div className={`
            bg-white
            min-h-full
            font-sans
            text-black
            py-16 lg:py-40
            p-8 md:p-12 lg:p-0
            lg:pl-24
        `}>
            <Intro />
            <div className={`
                container
                mx-auto
            `}>
                <Education />
            </div>
        </div>

When I try indenting in Typescript, all the properties in the back tick fall to column 0. The same thing happens with the following:

        <div className={
            "bg-white "+
            "min-h-full "+
            "font-sans "+
            "text-black "+
            "py-16 lg:py-40 "+
            "p-8 md:p-12 lg:p-0 "+
            "lg:pl-24 "
        }>
            <Intro />
            <div className={
                "container "+
                "mx-auto "
            }>
                <Education />
            </div>
        </div>

Note that this problem doesn't occur in javascript. So to solve it, I just need to run set ft=javascriptreact, but then I don't have the typescript syntax.

Thanks!