Syntax highlighting for babel (React)

[pranaygp]

Similar to issue #10166, but for React

Hey,

Could we please have JS syntax highlighting enabled for script tags that have type "text/babel" (and "text/jsx") ?

Cheers

[petetnt]

This requires a CodeMirror update (which is tracking at #12177) that contains proper syntax highlighting for JSX

Otherwise 👍

[Sophia-Gold]

Hi. What's the progress on it? According to the linked thread, the CodeMirror update was merged with master over a month ago. However, I cloned the master and it's still not highlighting babel syntax...

[MiguelCastillo]

I am a bit unclear as to what "highlighting for babel" means.

But we merged JSX syntax highlighting today.

[Sophia-Gold]

Well when I'm using react I usually use script type "text/babel" although "text/jsx" is fine too. However, I just cloned the master right before updating this thread and JSX is not highlighting either.

I'm also not sure whether to open an issue about multibrowser errors, since a search shows tons of open issues with that from quite a while ago. All I could add is that it works with the getting started project and nothing else.

[pranaygp]

I'll try to look into it over the next few days if I can. Will keep you posted.

[Sophia-Gold]

Thanks! For reference, I cloned the master repo just right before commenting here.

As for multibrowser...I don't want to derail this thread, but it also doesn't seem worth opening a new issue since everyone seems to have given up on it working correctly. Is that perception accurate? I already have multibrowser set to my default so it works with things like Sublime Text, it's just that Brackets defaults to chrome for Live Preview. So at the moment I can either choose an editor that allows me to test in multiple browsers or one that allows live previewing.

[Sophia-Gold]

From what I could glean from #12422, JSX and Babel highlighting seems to require some preference changes in the current master, but I don't see any preferences that correspond to that.

Then the branch in that request updated them in two attributes files so you can just specify them using <script type="...">, which I copied in my local version, yet still don't have highlightling :/

[ficristo]

Hi @doralang can you share a small snippet of code so I can reproduce the issue?
I've tried this code in an html file and with my PR is syntax highlighted.

    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>

[Sophia-Gold]

I have it exactly like that. To be clear, the syntax highlighting should be the sam as with "text/javascript" not as it appears in your snippet above right?

Also, when was this feature merged with the master? I see issue thread requests with people saying it's working at various points and then someone else saying they need to update something so it's rather confusing. One person says it was in the master two days ago, one earlier today, etc.

If I were to clone the master right now, shift+click on my stable build, then select /src/index.html it should highlight "text/babel" and "text/jsx"?

[ficristo]

This is how should appear with the PR:

I suppose other PR refers to files with .jsx extension not inline scripts.
The syntax highlighting of inline scripts should have worked before but only for a small subset of types (mustache, handlebar and angular templates), I don't know what happened but for me didn't work hence the PR.
The PR is still not merged on master, if you want to try locally the PR you can try to follow this guide:
https://help.github.com/articles/checking-out-pull-requests-locally/
Basically you run git fetch upstream pull/12422/head:pull-12422 and then git checkout pull-12422

[Sophia-Gold]

Ah! Ok, thank you. Really. Am I going nuts or have I seen multiple threads saying this was merrged with the master by now? Like the comment above by @MiguelCastillo?

Now if I can just figure out what's going on with the multibrowser bugs.. I'm not in a position to complain, but just shocked to see this level of confusion in a project backed by a company the size of Adobe. The JSLint parameter names are funny, though. Evil == eval().

[petetnt]

@doralang The JSX mode itself was merged to master, but the HTMLMixed mode improvements haven't been yet. Basically on the current master if you create a foo.jsx file the syntax highlighting works as expected, but if you create a file called index.html and mix in JavaScript with JSX it doesn't work correctly until #12422 lands. Yeah, it's a bit confusing.

See @ficristo's instructions how to apply the PR yourself to get it working asap 👍

[Sophia-Gold]

Got it. Thank you!

[MiguelCastillo]

Ok - we should be good with mixed mode now. Thank you everyone!

[Sophia-Gold]

Looks great! Sorry, but really amateur question here...how do I change the default path for the Brackets package to the new directory I've cloned so I don't have to shift-click every time? Seems it should be in one of the json files in /Library/Application Support/Brackets/, but don't see any parameters there with that file path.

[petetnt]

@doralang check out the setup_for_hacking script in the tools folder: instructions for running it are here: https://github.com/adobe/brackets/wiki/How-to-Hack-on-Brackets#setting-up-your-dev-environment

[Sophia-Gold]

Thanks! Even figured out the multibrowser issue. You just need to open the entire project folder in Brackets instead of just the index.html file.