search

brackets-archive / bracketsIssues

Archive of issues in brackets.
0 stars 0 forks source link

[CLOSED] Syntax highlighting for babel (React) #10492

Open core-ai-bot opened 3 years ago

core-ai-bot commented 3 years ago

Issue by pranaygp Thursday Feb 11, 2016 at 20:19 GMT Originally opened as https://github.com/adobe/brackets/issues/12208

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

core-ai-bot commented 3 years ago

Comment by petetnt Friday Feb 12, 2016 at 07:08 GMT

This requires a CodeMirror update (which is tracking at https://github.com/adobe/brackets/pull/12177) that contains proper syntax highlighting for JSX

Otherwise :+1:

core-ai-bot commented 3 years ago

Comment by Sophia-Gold Saturday May 14, 2016 at 03:10 GMT

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...

core-ai-bot commented 3 years ago

Comment by MiguelCastillo Saturday May 14, 2016 at 03:19 GMT

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

But we merged JSX syntax highlighting today.

core-ai-bot commented 3 years ago

Comment by Sophia-Gold Saturday May 14, 2016 at 03:36 GMT

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.

core-ai-bot commented 3 years ago

Comment by pranaygp Saturday May 14, 2016 at 04:52 GMT

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

core-ai-bot commented 3 years ago

Comment by Sophia-Gold Saturday May 14, 2016 at 05:01 GMT

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.

core-ai-bot commented 3 years ago

Comment by Sophia-Gold Sunday May 15, 2016 at 02:24 GMT

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 :/

core-ai-bot commented 3 years ago

Comment by ficristo Sunday May 15, 2016 at 07:20 GMT

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>
core-ai-bot commented 3 years ago

Comment by Sophia-Gold Sunday May 15, 2016 at 07:53 GMT

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"?

core-ai-bot commented 3 years ago

Comment by ficristo Sunday May 15, 2016 at 11:50 GMT

This is how should appear with the PR: text-babel 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

core-ai-bot commented 3 years ago

Comment by Sophia-Gold Sunday May 15, 2016 at 12:19 GMT

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().

core-ai-bot commented 3 years ago

Comment by petetnt Sunday May 15, 2016 at 12:25 GMT

@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 :+1:

core-ai-bot commented 3 years ago

Comment by Sophia-Gold Sunday May 15, 2016 at 12:26 GMT

Got it. Thank you!

core-ai-bot commented 3 years ago

Comment by MiguelCastillo Sunday May 15, 2016 at 13:05 GMT

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

core-ai-bot commented 3 years ago

Comment by Sophia-Gold Monday May 16, 2016 at 20:02 GMT

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.

core-ai-bot commented 3 years ago

Comment by petetnt Monday May 16, 2016 at 20:51 GMT

@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

core-ai-bot commented 3 years ago

Comment by Sophia-Gold Monday May 16, 2016 at 21:20 GMT

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.