Repository navigation
No .jsx extension? #87
Description
Note from Maintainers
We support JSX extension since 0.4.1 even though we don’t recommend it.
Read the release notes.
Shouldn't the default be to use .jsx extension in files where JSX is in use? As configured, the loader isn't set up to transpile jsx. Many code editors will provide better coloring/linting when detecting a .jsx file
Activity
gaearon commentedon Jul 22, 2016
The distinction between
.jsand.jsxfiles was useful before Babel, but it’s not that useful anymore.There are other syntax extensions (e.g. Flow). What would you call a JS file that uses Flow?
.flow.js? What about JSX file that uses Flow?.flow.jsx? What about some other experimental syntax?.flow.stage-1.jsx?Most editors are configurable so you can tell them to use a JSX-capable syntax scheme for
.jsfiles. Since JSX (or Flow) are strict supersets of JS, I don’t see this as an issue.Am I missing something?
gaearon commentedon Jul 22, 2016
I’ll close but if I missed something please let me know and I can reopen.
vjeux commentedon Jul 29, 2016
@gaearon do you know if there's an easy way to have a clear error message when people try to write a jsx file? Something like "jsx extension is not supported with create-react-app [insert more...]" instead of failing with a cryptic error message as it currently is
pungggi commentedon Jul 29, 2016
Ok this makes sense.
But does anyone know how to accomplish that f. ex. in VisualStudioCode?
I have found this http://stackoverflow.com/questions/32832264/change-language-to-jsx-in-visual-studio-code
gaearon commentedon Jul 29, 2016
Yes, we can totally do it, it’s not hard.
Let’s discuss that in #287. 👍
tim-phillips commentedon Aug 11, 2016
Just wanted to call attention to the Airbnb style guide, they are still recommending
.jsxfile extensions. Airbnb most likely have their build tools sorted though.For vim users, while using vim-javascript & vim-jsx you can add
let g:jsx_ext_required = 0to your.vimrcto allow for JSX syntax support in.jsfiles.EDIT: i'm just now seeing the reference above from airbnb/javascript#985
gaearon commentedon Aug 11, 2016
Posted more thoughts on it: airbnb/javascript#985 (comment)
gaearon commentedon Sep 3, 2016
FYI we support JSX extension since 0.4.1 even though we don’t recommend it.
Read the release notes.
loopmode commentedon Sep 10, 2016
I find using a jsx extension useful, while not necessary, to instantly see which files can be shared across projects that may not be using babel or even react for that matter, without looking into the files.
I would never name a file that doesn't contain JSX syntax
.jsx, e.g. utility modules, regular pure functions etc. For the same reasons I would never call a file that contains JSX syntax.js.It is just a convention of course, as others may have explained already.
gaearon commentedon Sep 10, 2016
Don’t you find the notation inconsistent? For example, you can’t use many ES6 features without Babel if you intend to support older browsers. Even things like destructuring. But it’s weird to call a file using destructuring (or, for example, default arguments)
.jsxbecause it doesn’t actually use JSX. At some point you may decide to stop supporting those browsers. At this point there is no reasonable explanation for why such file is called.jsx. By using.jsuniformly you avoid these inconsistencies altogether.tim-phillips commentedon Sep 10, 2016
I just changed all my
.jsxfiles to.js. I like how I'm starting to think of jsx as an extension of JavaScript rather than something separate.loopmode commentedon Sep 11, 2016
Ok I finally got the point.. The way I descibed it, I'd need to make sure that my .js files are actually all written in es5. A tedious task, and a useless one for long-living codebases. (Won't be necessary in near future). Tho it is a bit different with JSX syntax, which probably won't become standard javascript anytime soon, it's much simpler if we embrace it as a transpiler-feature just like destructuring etc.
So.. I guess I too will be changing all my
.jsxfiles to.jssoon :)3 remaining items
Match js and jsx to apply className
Rename .jsx to .js : react/create-react-app#87 (comment)
turnerhayes commentedon Oct 7, 2017
I'm glad it now supports
.jsx, but it appears to still be looking forindex.jsand not acceptingindex.jsx. Can that be fixed too?iDVB commentedon Nov 10, 2017
Out of google magic for this one. But why does createreactapp seem to enforce eslint:react/jsx-filename-extension if JSX files are not reco? #87 (comment)
All our files are .JS even the ones that contain JSX....we're using base createreactapp and unless I have waring IDE settings, it complaining about
JSX not allowed in files with extension '.js'not supposed to used jsx extensions with create react app
add new rules
add new rules
refactor(index): back to .js
pikilon commentedon Aug 15, 2018
Typescript is also a superset and it uses
.tswhy JSX is not using his own extension?qodesmith commentedon Aug 24, 2018
The only reason I use the
.jsxextension is because without it, Github's syntax highlighting get's red-lines-hightlighted-everywhere diarrhea. I can't stand looking at PR's like that.Qix- commentedon Nov 20, 2018
@qodesmith a bit late, but there's an open issue for that: github-linguist/linguist#3677
esr360 commentedon Dec 11, 2018
After pushing some code to bitbucket and seeing that the syntax highlighting was broken, I went to see why Atlassian don't support syntax highlighting of JSX; it turns out they do! But, perhaps naturally, the file extension must be
.jsx(https://jira.atlassian.com/browse/BSERV-10700).I was then reminded of this discussion, so wanted to chime in. I think it's totally reasonable for a syntax highlighter to not attempt to highlight syntax that isn't standard to language. It seems quite reasonable that if I want syntax to be highlighted as JSX, then the file should have the extension
.jsx.Thinking about it in this way actually makes me think having jsx syntax inside a
.jsfile is unreasonable.mrmckeb commentedon Dec 11, 2018
TypeScript uses TSX - but personally I feel that enforcing JSX creates more overhead for developers. Most tools in the chain work fine with JSX in JS.
Of course, that doesn't mean you couldn't enforce that standard in your own projects @esr360.
Timer commentedon Dec 11, 2018
For future searchers: we support both
.jsand.jsx.