Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

No .jsx extension? #87

Closed
MrSkinny opened this issue Jul 22, 2016 · 20 comments

Comments

@MrSkinny
Copy link

@MrSkinny MrSkinny commented Jul 22, 2016

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

@gaearon

This comment has been minimized.

Copy link
Member

@gaearon gaearon commented Jul 22, 2016

The distinction between .js and .jsx files 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 .js files. Since JSX (or Flow) are strict supersets of JS, I don’t see this as an issue.

Am I missing something?

@gaearon

This comment has been minimized.

Copy link
Member

@gaearon gaearon commented Jul 22, 2016

I’ll close but if I missed something please let me know and I can reopen.

@vjeux

This comment has been minimized.

Copy link
Contributor

@vjeux vjeux commented 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

This comment has been minimized.

Copy link

@pungggi pungggi commented Jul 29, 2016

Most editors are configurable so you can tell them to use a JSX-capable syntax scheme for .js files.

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

This comment has been minimized.

Copy link
Member

@gaearon gaearon commented Jul 29, 2016

do you know if there's an easy way to have a clear error message when people try to write a jsx file?

Yes, we can totally do it, it’s not hard.

But does anyone know how to accomplish that f. ex. in VisualStudioCode?

Let’s discuss that in #287. 👍

@tim-phillips

This comment has been minimized.

Copy link

@tim-phillips tim-phillips commented Aug 11, 2016

Just wanted to call attention to the Airbnb style guide, they are still recommending .jsx file 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 = 0 to your .vimrc to allow for JSX syntax support in .js files.

EDIT: i'm just now seeing the reference above from airbnb/javascript#985

@gaearon

This comment has been minimized.

Copy link
Member

@gaearon gaearon commented Aug 11, 2016

Posted more thoughts on it: airbnb/javascript#985 (comment)

@gaearon

This comment has been minimized.

Copy link
Member

@gaearon gaearon commented Sep 3, 2016

FYI we support JSX extension since 0.4.1 even though we don’t recommend it.
Read the release notes.

@loopmode

This comment has been minimized.

Copy link

@loopmode loopmode commented 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

This comment has been minimized.

Copy link
Member

@gaearon gaearon commented Sep 10, 2016

which files can be shared across projects that may not be using babel

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) .jsx because 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 .js uniformly you avoid these inconsistencies altogether.

@tim-phillips

This comment has been minimized.

Copy link

@tim-phillips tim-phillips commented Sep 10, 2016

I just changed all my .jsx files to .js. I like how I'm starting to think of jsx as an extension of JavaScript rather than something separate.

@loopmode

This comment has been minimized.

Copy link

@loopmode loopmode commented 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 .jsx files to .js soon :)

jaydenseric added a commit to jaydenseric/svg-symbol-viewer that referenced this issue Nov 29, 2016
DanJFletcher added a commit to DanJFletcher/programming-for-kids that referenced this issue Dec 5, 2016
After reading this thread on github
facebook/create-react-app#87 (comment)
it's clear that there is no present use case for
using the jsx extension over regular js.
foray1010 added a commit to foray1010/eslint-config-foray1010 that referenced this issue Jan 30, 2018
enable semi on babel plugin

default enable unit-test rules for all preset

default enable babel rules for react preset

remove webextensions global variable support as we use mozilla/webextension-polyfill now

only allow jsx on .js file because of facebook/create-react-app#87 (comment)
-234627904
foray1010 added a commit to foray1010/eslint-config-foray1010 that referenced this issue Jan 30, 2018
enable semi on babel plugin

default enable unit-test rules for all preset

default enable babel rules for react preset

remove webextensions global variable support as we use mozilla/webextension-polyfill now

only allow jsx on .js file because of facebook/create-react-app#87 (comment)
koenoe added a commit to koenoe/deezer-react that referenced this issue Feb 27, 2018
@alexsoble alexsoble referenced this issue Feb 28, 2018
6 of 6 tasks complete
@bohdanbirdie bohdanbirdie referenced this issue Apr 13, 2018
5 of 5 tasks complete
@pikilon

This comment has been minimized.

Copy link

@pikilon pikilon commented Aug 15, 2018

Typescript is also a superset and it uses .ts why JSX is not using his own extension?

@qodesmith

This comment has been minimized.

Copy link

@qodesmith qodesmith commented Aug 24, 2018

The only reason I use the .jsx extension 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-

This comment has been minimized.

Copy link

@Qix- Qix- commented Nov 20, 2018

@qodesmith a bit late, but there's an open issue for that: github/linguist#3677

@esr360

This comment has been minimized.

Copy link

@esr360 esr360 commented 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 .js file is unreasonable.

@mrmckeb

This comment has been minimized.

Copy link
Collaborator

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

@facebook facebook locked as resolved and limited conversation to collaborators Dec 11, 2018
@Timer

This comment has been minimized.

Copy link
Collaborator

@Timer Timer commented Dec 11, 2018

For future searchers: we support both .js and .jsx.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
You can’t perform that action at this time.