JSX over-eager on some regular JavaScript syntax.

[shshaw]

When using JSX, Emmet often suggests expansions for relatively benign JS:

This may be due to an overlap in valid Emmet syntax and regular JS syntax, but is there anyway to be a little narrower about the expansions in JSX Syntax?

[shshaw]

Notably:

• console.log – No expansion
• console.log() – No expansion
• console.log({}) – Expansion
• console.log(d) – Expansion
• console.log(dd), console.log(div), console.log(xyz) – Sometimes. Often depends on cursor position, if you move back and forth it sometimes opens the expansion preview.

Screen.Recording.2026-05-20.at.8.54.29.AM.mov

This even happens with function(xyz).

Screen.Recording.2026-05-20.at.8.55.29.AM.mov

[sergeche]

By default, for JSX it’s required to prefix abbreviation with < to skip completions trigger on JS keywords. Does editor sets jsx syntax?

[shshaw]

We're activating the JSX syntax for .js files because we have Babel support that allows JSX in .js files. Should we not manually add that at all?

[sergeche]

No, you should use JSX whenever possible :) Will check this issue out soon

[sergeche]

Added a fix in v0.4.1 patch version for better tracking of JSX abbrevations (must be explicitly prefixed with <). Note that to make it work properly it is recommended to explicitly pass document host syntax into abbreviation tracker. I’ve added check to test for JS/JSX syntax automatically, but in case if you’re using something custom you should pass syntax to let Emmet know how to handle host document

E.g. like this:

new EditorView({
    doc: text,
    extensions: [
        basicSetup,
        javascript(),
        Prec.high(abbreviationTracker({
            // pass syntax here
            syntax: EmmetKnownSyntax.jsx,
            autocompleteTab: ['stylesheet'],
            config: {
                markup: {
                    snippets: {
                        'foo': 'ul.foo>li.bar+li.baz'
                    }
                },
                stylesheet: {
                    options: {
                        'stylesheet.strictMatch': true
                    }
                },
            }
        })),
    ],
    parent: document.querySelector<HTMLDivElement>('#app')!
});