Comments in JSX/TSX

[cotneit]

Comments in JSX are a bit special, and it would be nice if Helix could handle them a bit better than it does now when it comes to commenting and uncommenting.

JS comments (// and /* */) are not valid where a JSXChild is expected, but they become valid when wrapped in curly braces {} since then they are treated as JSXChildExpression, and it being optional the entire thing can be a comment, resulting in {/* */} essentially being a block comment token pair for this particular case.

In every other case inside a JSX file regular JS comments are valid and should be preferred over {/* */}.

For example, every comment here is valid:

const Thingy = <>
    {/* <div></div> */}

    <div
        // id="main" style="color: blue"
        /* id="main" style="color: red" */

        thingy={
            // <div></div>
            <div>
                {/* <div>Lorem</div> */}
            </div>
        }
    >
        {/* <div>Lorem</div> */}
    </div>
</>

---

Looks like VS Code implements this by injecting a special language:

• tags-language-configuration.json - Language config
• package.json - Contains language definition and injections (embeddedLanguages)

I imagine this could be replicated in Helix, but currently injection comment tokens are ignored, so I would consider this to be blocked:

• Determine comment tokens from injection layers #7364
• Respect injections in tree-sitter features #9425

That said, I don't think these issues being resolved will result in JSX/TSX comments working properly without additional efforts, hence this issue. I could be wrong.

---

Prior issues on this topic:

• Support for single line comments for JSX/TSX elements #6832
• Commenting code within JSX blocks uses incorrect comment format #7731
• Comments in JSX files #5453

[Nikita0x]

I don't want to create a new issue, just gonna leave it here maybe?

Comments are incorrectly inferred in Vue.js (.vue) files as well