Flow + Atom editor + JSX

[ccorcos]

Is it possible to use Flow with JSX with the atom editor package?

[nmote]

Is this what you mean?

9648b72

[nmote]

See also #92 (comment)

[ccorcos]

@nmote I am using ES6 Babel syntax highlighting...

But even when I set the syntax to Javascript (JSX), I don't get any of the flow or hack bells and whistles...

Here's my program, similar to the demo.

/* @flow */

function a(b) {
  return b + 1;
}

a('hello');

Nothing is warning me about the string. I can cmd+click on a to jump to the definition (that does multiple cursors...), and I'm not getting any Xcode-like dropdowns from hack...

[nmote]

Flow from the command line doesn't warn me about that either. If you think that's incorrect then file an issue against https://github.com/facebook/flow. If jump to definition works then it's a good indicator that our Flow integration is working.

[ccorcos]

I'm confused, look the first example:

http://flowtype.org

I have an empty .flowconfig and a file text.jsx all in the same folder. text.jsx has this:

/* @flow */
function foo(x) {
  return x * 10;
}
foo('Hello, world!');

I don't get any warnings for type hints. And cmd+click does multiple cursors instead of jump to definition...

I have nuclide-flow package installed... idk what else to do. its not working... :(

[nmote]

It appears that files with a jsx extension don't get labeled as JavaScript files by Nuclide (something that should get fixed), but I tried this example and once I selected JavaScript as the language, Flow features started working for me.

[nmote]

It looks like https://github.com/atom/language-javascript is the package that provides JavaScript syntax highlighting, perhaps filing an issue with them to add "jsx" to the list of extensions would be worthwhile.

[ccorcos]

Hmm. I see. I'm using babel syntax highlighting... would be nice to be able to use flow with other syntax highlighters...

[ccorcos]

So looking at the package: https://atom.io/packages/nuclide-flow

• Shows Flow errors inline
• Provides Flow-drive inline autocomplete
• cmd-click on a symbol jumps to its definition
• Hovering over an expression exposes its type

So I'm not getting the cmd-click jump to definition, and I'm not getting the hover... But they autocomplete has function signatures (pretty cool!!)

[nmote]

You could create a pull request to add other grammars here:

https://github.com/facebook/nuclide/blob/master/pkg/nuclide/flow/lib/constants.js#L13

So if you do have a package installed that provides syntax highlighting for jsx files, but uses a different scope name, adding it there should enable nuclide-flow to work.

[ccorcos]

sweet! Thanks for the help @nmote

[istarkov]

For me cmd-click still not works on JSX imports (just updated to nuclide 0.111)

[zertosh]

@istarkov, try cloning this repo, then opening the nuclide source directory in Atom, and going to pkg/nuclide/arcanist/lib/main.js. Then try cmd+click over '../../busy-signal-provider-base' or over '../../busy-signal-interfaces';. I just tried on that file using flow 0.20.1 and it works.

[istarkov]

@zertosh my fault looks like the problem not in jsx but in default params.
please look https://github.com/istarkov/nuclide-flow-error

inside main.js
import itWorks from './itWorks'; is cmd-clickable
import itNot from './itNot'; is not cmd-clickable

because inside isNot where is a const y = ({x = 10}) => x;

[nmote]

You need /* @flow */ at the top of your files for Flow to understand them. If you don't have that, some Flow features will work on a best-effort basis but it will not be reliable.

[nmote]

And I'm not sure whether Flow will look for .jsx files, also.

[nmote]

I just tried your example and Flow does in fact support .jsx files. The problem is that you have a syntax error in itNot.js, so Flow cannot find that module. However, it's not getting reported because you don't have /* @flow */ at the top.

[istarkov]

Here I wrote that problem not in jsx #141 (comment)

But why it is a syntax error? It is valid es6 syntax.

[nmote]

I see. I'm not familiar with that syntax but Flow does not recognize it. I suggest you file an issue with Flow regarding that.

[istarkov]

There is already such issue ;-) facebook/flow#183

[flockonus]

For those landing in this issue from Atom JSX javascript support, the answer is in this comment: atom/language-javascript#313 (comment)