[CLOSED] Feature-Request: Add correct highlighting for React.js

[core-ai-bot]

Issue by weblogixx Thursday May 07, 2015 at 08:33 GMT Originally opened as https://github.com/adobe/brackets/issues/11061

---

Hi there,

it would be nice if brackets could automatically detect jsx-code in .jsx (and possibly .js) files. This would make it easier to develop React-Components in Brackets.

Please look at the attached screenshot to see what I mean.

[core-ai-bot]

Comment by petetnt Thursday May 07, 2015 at 12:00 GMT

---

Have you tried brackets-jsx extension? It should add syntax highlighting for .jsx files.

[core-ai-bot]

Comment by weblogixx Thursday May 07, 2015 at 14:06 GMT

---

@petetnt: Yes, I already have it installed, together with jsxHint and other plugins. The code folding and syntax highlighting are looking the way you see them in the screenshot.

The highlighting seems to be related to this plugin (it is a current issue there on https://github.com/automenta/brackets-jsx/issues/2). It seems the plugin itself is deprecated.

[core-ai-bot]

Comment by thany Monday May 11, 2015 at 15:55 GMT

---

So it's kind of understandable, don't you think? The JS you're showing is all kinds of wrong. The fact that React parses it fine, doesn't make it valid JS. To me it's completely normal that Brackets has no idea how to deal with it. In fact, it's doing a pretty good job as it is.

The feature request is not to match the correct bracket, it's to support JSX files in terms of highlighting and such.

[core-ai-bot]

Comment by weblogixx Tuesday May 12, 2015 at 06:43 GMT

---

@thany: Yes I do understand fully. The problem is that React encourages users to use the .js instead of the older .jsx ending (a thing that seems kind of stupid to me because of all the problem this causes as seen here). As React gains more attention, more projects will be written with it (and files with the .js extension).

[core-ai-bot]

Comment by zaggino Tuesday May 12, 2015 at 06:51 GMT

---

I agree with@weblogixx, we should be able to support JSX syntax in .js files.

[core-ai-bot]

Comment by petetnt Tuesday May 12, 2015 at 07:00 GMT

---

CodeMirror doesn't have a React/JS language mode yet either, and I haven't seen attempts at one other than the deprecated code that the brackets-jsx plugin is based on too. See https://github.com/codemirror/CodeMirror/issues/3122 for (one) comment from March about adding JSX support for .js files.

[core-ai-bot]

Comment by dnbard Wednesday Jun 03, 2015 at 06:02 GMT

---

Would love to have the JSX support in the Brackets in .js files

The bug with wrong indent is killing me when I'm working with React.

[core-ai-bot]

Comment by abdelouahabb Wednesday Jul 01, 2015 at 22:08 GMT

---

@anyone modify you codeMirror file inside your brackets installation so you can get syntax coloration for your nested jsx

replace:

scriptTypes.push({matches: /^(?:text|application)\/(?:x-)?(?:java|ecma)script$|^$/i,

by

scriptTypes.push({matches: /^(?:text|application)\/jsx$|(?:x-)?(?:java|ecma)script$|^$/i,

NB: Still waitng for plugin so we can have calltips :( (Tern-react maybe?)

https://github.com/abdelouahabb/CodeMirror/commit/521c476de9b8a961a3205e7284863de88d012a96

[core-ai-bot]

Comment by nethip Monday Jul 06, 2015 at 07:18 GMT

---

@dnbard Did you get a chance to try@abdelouahabb 's advice and see if it makes working with React JS code snippets a little better?

[core-ai-bot]

Comment by dnbard Monday Jul 06, 2015 at 09:08 GMT

---

@nethip Nope. This solution didn't worked for me.

[core-ai-bot]

Comment by abdelouahabb Monday Jul 06, 2015 at 15:06 GMT

---

@dnbard it works here, which file did you changed?

Of course the support is not at 100%, it will be colored as JS . (the markup will not be checked...)

[core-ai-bot]

Comment by dnbard Monday Jul 06, 2015 at 16:21 GMT

---

@abdelouahabb htmlmixed.js (the only one which has scriptTypes.push({matches: /^(?:text|application)\/(?:x-)?(?:java|ecma)script$|^$/i, string ... )

But I don't need the support of htmlmixed (no one are writing the js code in html file). Support are needed for .js files.

[core-ai-bot]

Comment by petetnt Monday Jul 20, 2015 at 08:32 GMT

---

Welp, I started working building proper highlighting for .jsx files today and first obstacle is that .jsx file extension is already defined for .js files.

which of course results in:

Cannot register file extension "jsx" for JSX (React), it already belongs to JavaScript
Menus.js:820 Error setting menu item shortcut: 1

which was added by (issue: #2948 -> PR: #2971). Can you undef a fileExtension via an extension?

[core-ai-bot]

Comment by MarcelGerber Saturday Jul 25, 2015 at 10:22 GMT

---

Yes you can, using language.removeFileExtension, which would look something like this:

var jsLanguage = LanguageManager.getLanguage("javascript");
jsLanguage.removeFileExtension("js");

[core-ai-bot]

Comment by petetnt Saturday Jul 25, 2015 at 10:29 GMT

---

Thanks@MarcelGerber!

[core-ai-bot]

Comment by FezVrasta Wednesday Oct 14, 2015 at 13:44 GMT

---

Any news about this feature? I'll probably start a project with React soon and this thing is driving me crazy :(

[core-ai-bot]

Comment by lkcampbell Saturday Nov 14, 2015 at 21:37 GMT

---

@petetnt just curious on your approach to a solution.

Are you creating a CodeMirror JSX mode first and then pulling it into Brackets, or some other approach?

[core-ai-bot]

Comment by petetnt Saturday Nov 14, 2015 at 22:34 GMT

---

@lkcampbell The current idea is to create a javascriptmixed mode for CodeMirror that would also support JSX. See codemirror/CodeMirror/issues/3122 and https://github.com/codemirror/CodeMirror/pull/3605#issuecomment-149189108 for more info: there's one newer JSX mode already in the wild (that issue 3122) but it's not nearly feature complete.

Sadly I haven't still had much time to work on this and the htmlmixed mode is surprisingly tricky to get right. I'll try to get back to it ASAP.

[core-ai-bot]

Comment by lkcampbell Saturday Nov 14, 2015 at 22:42 GMT

---

@petetnt okay let me know if I can help out. I have some free time on my hands recently and it would be really cool to get this functionality finally :).

When you mentioned a mode already in the wild, are you referring to this link:

https://github.com/antimatter15/codemirror-jsx/blob/master/jsx.js

[core-ai-bot]

Comment by petetnt Saturday Nov 14, 2015 at 22:56 GMT

---

Yup, that's the one. There's also this newer fork that that still has at least some major issues.

If you want to take a crack at it, by all means do. I'd love to see proper support myself too, as pretty much 99% of things I do right now are React based. My version is in a quite bad shape so I don't have much to share with you right now. My current idea was to use overlayMode instead of something similar to the htmlmixed-mode but that idea got pretty much stuck on the complexity of the prop values, that can contain pretty much anything which makes the overlaying very hard. If you want to try that approach, see the Overlay-mode sample

[core-ai-bot]

Comment by petetnt Saturday Nov 14, 2015 at 23:10 GMT

---

Actually the overlay way isn't that bad way to get started now that I tried it out again:

define(function () {
    var CodeMirror = brackets.getModule("thirdparty/CodeMirror2/lib/codemirror");

    CodeMirror.defineMode("javascriptmixed", function(config, parserConfig) {
        var jsMode = CodeMirror.getMode(config, 'javascript');
        var xmlMode =  CodeMirror.getMode(config, {name: 'xml', htmlMode: true});
        return CodeMirror.overlayMode(jsMode, xmlMode);
    });
});

Result:

Like I said, the prop-handling is the real issue

[core-ai-bot]

Comment by lkcampbell Sunday Nov 15, 2015 at 01:40 GMT

---

@petetnt, I tweaked your code a tiny bit and used the@MarcelGerber suggestion to update the .jsx extension on the fly to jsx (should it be JSX?). Try out this code as an extension and see if it acts how you expect it to act:

https://gist.github.com/lkcampbell/b992ad6926c39331343f

[core-ai-bot]

Comment by lkcampbell Sunday Nov 15, 2015 at 02:08 GMT

---

@petetnt also, what theme are you using so I can properly compare colors with you.

I'm still seeing some strange colors associated with the quoted strings in the html tags as well as a few curly braces that are one color for the left bracket and another color for the right. But it is getting closer.

[core-ai-bot]

Comment by lkcampbell Sunday Nov 15, 2015 at 03:06 GMT

---

Those strange colors are coming from cm-undefined and cm-error styles. The props are still confusing the parser. It's almost like we need a third customized overlay on top of the Javascript and HTML overlays. Not even sure if this is possible but I will keep investigating.

[core-ai-bot]

Comment by petetnt Sunday Nov 15, 2015 at 08:15 GMT

---

The theme is Tomorrows Night Eigthties.

For the another overlay, at least something like this is possible:

var fooMode = CodeMirror.defineMode("fooMode", function(config, parserConfig) {
        /** define fooMode **/
        var xmlMode =  CodeMirror.getMode(config, {name: 'xml', htmlMode: true});
        return CodeMirror.overlayMode(fooMode, xmlMode);
});

CodeMirror.defineMode("javascriptmixed", function(config, parserConfig) {
        var jsMode = CodeMirror.getMode(config, 'fooMode');
        return CodeMirror.overlayMode(fooMode, jsMode);
});

I tried this when I started running into the props can be pretty much anything issue and the fooMode (or jsxMode) started to get as complex as a single mode. edit: it might still be worth a try though.

[core-ai-bot]

Comment by lkcampbell Sunday Nov 15, 2015 at 16:01 GMT

---

@petetnt, yes I understand the problem better now. I will spend some time with the "triple overlay" approach today to see if there is reasonably simple solution. If not, I will look into the new CodeMirror mode approach.

[core-ai-bot]

Comment by lkcampbell Sunday Nov 15, 2015 at 20:21 GMT

---

@petetnt The triple overlay approach does work. I suppose, theoretically, you could keep layering overlays on top of each other until you ran out of memory.

Some questions for you. Purely brainstorming right now.

Is the statement props can be pretty much anything correct? Doesn't the value of the attribute in the HTML portion of the code have to be valid Javascript contained inside of a set of curly braces?

Would it be possible to have a mode that detects a left curly brace and then flips into Javascript mode until hits the matching right curly brace? Then flips back into HTML mode which eventually flips back into Javascript mode again?

[core-ai-bot]

Comment by petetnt Sunday Nov 15, 2015 at 21:38 GMT

---

@lkcampbell Basically valid JavaScript, but you can pass in JSX-elements (or DOM-elements). (If you are feeling adventurous that is, not advocating anyone to do so though)

Consider something like https://jsfiddle.net/ckeaLv2x/

var Hello = React.createClass({
    render: function() {
        return <div>Hello {this.props.childHello}</div>;
    }
});

var World = React.createClass({
    render: function() {
        var style = {color: "red"};
        return <span style={style}>World, {this.props.name}</span>;
    }
});

ReactDOM.render(
    <Hello childHello={<World name="Pete" />} />,
    document.getElementById('container')
);

So in worst case scenario there needs to be tons of flipflopping around XML and JS mode.

Then there's things such as curly braces in middle of strings:

<Foo bar={"Remember that you shouldn't close to a curly braces inside a string like }-this"} />

But I think the JSMode parser can already correctly catch those, so "Anything valid javascript from "attr={" to the end "}" is a great start. In best case scenario the overlap mode catches the inside xml-elements too.

[core-ai-bot]

Comment by lkcampbell Monday Nov 16, 2015 at 01:03 GMT

---

@petetnt Ugh!!

Okay, send me an email at my same user name at gmail.com.

This clearly is not a weekend project.

Let's discuss more and not use up anymore issue comments on this.

[core-ai-bot]

Comment by petetnt Tuesday Dec 29, 2015 at 12:44 GMT

---

@marijhn just added an JSX mode to CodeMirror@ https://github.com/codemirror/CodeMirror/commit/b3f9487046e37facd64196380ebdd8639efc57b5 :fireworks: :fire_engine: :fire: