Doesn't work with React/JSX files

[dfrho]

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/38409898-doesn-t-work-with-react-jsx-files?utm_campaign=plugin&utm_content=tracker%2F535900&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F535900&utm_medium=issues&utm_source=github).

[emveeoh]

Actually @dfrho, Emmet does work perfectly with React/JSX files, but not by default. You have to add some configuration to your Atom keymap.cson file. The step-by-step instructions are found by going to:

ATOM IDE

• Edit
• Preferences
• Search for EMMET
• Click the SETTINGS button.
• Scroll down to the TAB KEY section.

There, you will find directions explaining how to modify your keymap.cson file to add support for other grammar types. The data-grammar type you want for JSX is "source js jsx".

Here is my added line in keymap.cson to get JSX working:

'atom-text-editor[data-grammar="source js jsx"]:not([mini])':
    'tab': 'emmet:expand-abbreviation-with-tab'

Emmet now works as expected in JSX.

[dfrho]

Great thanks! Will check it out. D

On Fri, Nov 25, 2016 at 11:12 PM, Michael van Olden < [email protected]> wrote:

Actually @dfrho https://github.com/dfrho, Emmet does work perfectly with React/JSX files, but not by default. You have to add some configuration to your Atom keymap.cson file. The step-by-step instructions are found by going to:

ATOM IDE

• Edit
• Preferences
• Search for EMMET
• Click the SETTINGS button.
• Scroll down to the TAB KEY section.

There, you will find directions explaining how to modify your keymap.cson file to add support for other grammar types. The data-grammar type you want for JSX is "source js jsx".

Here is my added line in keymap.cson to get JSX working:

'atom-text-editor[data-grammar="source js jsx"]:not([mini])': 'tab': 'emmet:expand-abbreviation-with-tab'

Emmet now works as expected in JSX.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/emmetio/emmet-atom/issues/471#issuecomment-263043008, or mute the thread https://github.com/notifications/unsubscribe-auth/AC7C7QEGI4dFx7gtTb_ood8tuRV5PaLCks5rB7G5gaJpZM4KX-eX .

[ericdouglas]

I use ctrl-e to trigger Emmet inside .js / .jsx files since tab is used for expand snippets. So when you press tab Emmet will be triggered and instead of expanding a snippet, it'll create an element.

My configuration is:

'atom-text-editor[data-grammar="source js jsx"]:not([mini])':
  'ctrl-e': 'emmet:expand-abbreviation-with-tab'

[vamshi9666]

i am using flow for type checking , so my syntax stays flow JavaScript syntax in atom. i tried above solutions and didn't worked out. what could be grammar name for flow javascript so that i can include in key binding ?

[vamshi9666]

oh. my bad . i got it solved. flow linting is working with babel also.

[appsparkler]

This is what worked for me:

# keymap.cson
# notice the *= in the CSS-selector-syntax
'atom-text-editor[data-grammar*="js"]:not([mini])': 
  'tab': 'emmet:expand-abbreviation-with-tab'

Good Luck...