This repository was archived by the owner on Dec 15, 2022. It is now read-only.
Repository navigation
This repository was archived by the owner on Dec 15, 2022. It is now read-only.
Syntax highlighting breaks on ' in JSX #220
Description
I'm not sure if this is the right repo, but from what I can tell this is what Github uses for syntax highlighting. This code looks fine in my Atom, but breaks on github at a ' in JSX.
'use strict';
const React = require('react')
module.exports = React.createClass({
render: function() {
let {feeds, log} = this.props;
log.info(feeds);
return <div className="feed-list">
<h3>News Feed's</h3>
<ul>
{feeds.map(function(feed) {
return <li key={feed.name} className={feed.fetched ? 'loaded' : 'loading'}>
{feed.data && feed.data.length > 0 ?
<span>{feed.name} <span className='light'>({feed.data.length})</span></span>
: 'feed.name' }
</li>
})}
</ul>
</div>;
}
});
Activity
Victorystick commentedon Sep 4, 2015
What you're seeing is language-javascript not supporting JSX at all...
<h3>is tokenized asoperator, Identifier, operator. It doesn't know JSX considers it an opening tag. Once'is reached out tries matching what it considers a string literal. However, the literal isn't closed before the newline, which is a syntax error.rkuykendall commentedon Sep 4, 2015
Do you know why this is broken on Github snippets but not the Atom editor? Are they not using the same repos?
Victorystick commentedon Sep 4, 2015
They are both using the same repo, but they're not always using the exact same version.
language-javascriptis changing pretty fast, so it's hard to keep up.Victorystick commentedon Sep 4, 2015
Are you running the latest version of Atom? It was only released two days ago, and I'm pretty sure it includes this particular behavior for strings.
winstliu commentedon Sep 4, 2015
@rkuykendall what file extension does your file have? .jsx or .js?
rkuykendall commentedon Sep 4, 2015
@50Wliu The original was .js, but I made a Gist with .es6 and .jsx and got the same thing.
@Victorystick Ah, I just double-checked my Atom and it looks like I'm using the
Babel ES6 JavaScriptsyntax highlighter, and switching it toJavascriptdoes indeed act like this.winstliu commentedon Sep 4, 2015
language-javascript doesn't support JSX at this point. @pchaigno do you know what language Github uses to parse .es6 and .jsx files?
pchaigno commentedon Sep 4, 2015
.es6and.jsxfiles are highlighted as JavaScript currently. We could use @rkuykendall's grammar...@rkuykendall Is this the grammar you were mentioning?
mehcode commentedon Sep 5, 2015
For the record I use atom-react and it auto detects jsx in .js files by the React import and colorizes just the JSX.
pchaigno commentedon Sep 5, 2015
@50Wliu Do you have some examples of
.es6files where the current highlighting fails? I want to test the grammars mentioned so far to see which one we should use.Do
.jsxand.es6files have the same syntax?Victorystick commentedon Sep 5, 2015
ECMAScript 6 (2015) and JSX are two different things, with their own grammars and syntaxes.
language-javascriptshould already support all ES6 features, so it could be used for.es6files.JSX is an unofficial extension to ECMAScript 6, and adds support for XML-like tags. Since it isn't part of the standard, it isn't supported by
language-javascript. Therefore,.jsxfiles should be highlighted using a different grammar, such aslanguage-babel.tl;dr;
JS == ES6 && JSX != ES6winstliu commentedon Sep 5, 2015
Sorry, wasn't thinking correctly last night when I wrote that up. @Victorystick is 100% correct.
rkuykendall commentedon Sep 5, 2015
@pchaigno Yes, language-babel is the package my current Atom uses. I actually forgot I had that installed. Also I agree with @Victorystick that not supporting it in language-javascript makes perfect sense. Thanks for making the new issue on Linguist!
Edit: Thanks for making a Pull Request on Linugist!!
pchaigno commentedon Sep 8, 2015
This should be fixed in a couple weeks with the next release of Linguist ;)
rkuykendall commentedon Sep 8, 2015
Thanks for all your help @pchaigno!
reyronald commentedon Jan 24, 2018
Hello guys, I'm sorry to comment on a three year old issue, hope I don't get any of you upset.
As of now, most of the JSX code out there actually resides in
.jsfiles and not.jsxfiles. Just as an example, if I'm not mistaken none of the official React code by Facebook on any of their repositories use the jsx extension.What implications would it have to use the JSX grammar to parse
.jsfiles? Would it to be too crazy of an idea to do this? I'm aware that JSX is not part of the official JavaScript spec, but in practical terms, there are lots of people writing JSX code in their pure JavaScript files, and in a way it has become the standard practice.There's a lot of code in pull requests that I review on a daily basis that looks like this and it's annoying :/.
winstliu commentedon Jan 25, 2018
For the vast majority of cases I don't think there will be an issue. Atom can already do this. However for GitHub you'll have to ask the Linguist about that possibility.