Feature-Request: Add correct highlighting for React.js

[weblogixx]

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.

[petetnt]

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

[weblogixx]

@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 automenta/brackets-jsx#2). It seems the plugin itself is deprecated.

[thany]

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.

[weblogixx]

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

[zaggino]

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

[petetnt]

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 codemirror/codemirror5#3122 for (one) comment from March about adding JSX support for .js files.

[dnbard]

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.

[abdelouahabb]

@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?)

abdelouahabb/CodeMirror@521c476

[nethip]

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

[dnbard]

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

[abdelouahabb]

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

[dnbard]

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

[petetnt]

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?

[marcelgerber]

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

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

[petetnt]

Thanks @marcelgerber!