Proper JSX support in the code editor

[sapegin]

Try something like this.

[mik01aj]

+1. It looks ugly :)

[sapegin]

Looks like it doesn’t help much :-(

[sapegin]

I’ve tried these, all of them don’t work:

• https://github.com/timbur/codemirror-jsx/blob/master/jsx.js
• https://github.com/rarous/brackets-jsx/blob/master/main.js
• https://gist.github.com/jquense/265b46c740da4d20a718
• add JSX mode in javascript.js  codemirror/codemirror5#3605

[sapegin]

The best I could achieve so far:

[mik01aj]

Much better than it was. Thanks 👍

[mik01aj]

Have you tried https://github.com/antimatter15/codemirror-jsx? // EDIT: I see that the timbur's version that you tried is actually a fork of this one. So maybe it's not even worth trying...

And codemirror/codemirror5#3122 is still open, we might get something useful from there later.

Also notice that on http://gaearon.github.io/react-hot-loader/ they do have CodeMirror with proper JSX support, so it's definitely possible. That's how they init the CodeMirror:

this.editor = CodeMirror.fromTextArea(this.refs.editor.getDOMNode(), {
      mode: 'javascript',
      lineNumbers: false,
      lineWrapping: true,
      smartIndent: false,  // javascript mode does bad things with jsx indents
      matchBrackets: true,
      theme: 'solarized-light',
      readOnly: this.props.readOnly,
      tabWidth: 2
    });

And if all fails, I see a workaround:

.cm-error { background: none; }

[sapegin]

They highlight most of the JSX in one color:

But we can apply the same hack with hiding error.

[sapegin]

I’m closing it until CodeMirror has proper support.

[petetnt]

@sapegin @mik01aj Just pinging you that CodeMirror has proper support as of codemirror/codemirror5@b3f9487

[sapegin]

@petetnt Cooooooool! Thanks!

[petetnt]

Oh yeah forgot to add that codemirror/codemirror5#3745 tracks the issues the mode still might have (it has gotten some great updates in the past few days too) 👍