Vscode-react-native: IntelliSense Doesn't Understand Flow Type Annotations in .js files

[joshuaskelton]

Salsa intellisense doesn't correctly handle JSX type annotations.

'property declarations' can only be used in a .ts file.

[egamma]

This issue was moved to Microsoft/TypeScript#7275

[artyomtrityak]

@egamma they are not going to fix this, React Native supports Flowtype from the box so i assume vscode react native plugin should support flowtype annotations. This is the only reason i am not using vscode right now

[egamma]

@artyomtrityak actually, there is a flow extension for Code https://marketplace.visualstudio.com/items?itemName=flowtype.flow-for-vscode

One idea would be that you use this extension and then you map .js files as flow files in an extension. The extension would consist of this package.json only:

{
    "name": "js-is-flow",
    "displayName": "JS is  Flow overwrite",
    "description": "Overwrites the file mapping of java script files so that they are treated like flow files",
    "version": "0.0.1",
    "publisher": "eg2",
    "engines": {
        "vscode": "^0.10.x"
    },
    "categories": [
        "Languages"
    ],
    "contributes": {
        "languages": [
        {
                "id": "flow",
                "aliases": [
                    "Flow"
                ],
                "extensions": [
                    ".js"
                ]
            }
        ]
    }
}

This is a global change and treats .js files always as flow files.

[mroswald]

@egamma does not work for me, js files as still detected as Javascript. I added the properties engines, categories and contributes to my package.json and restarted vs code. still no success. I also removed the // @flow comments from the top of the files. any clue?

[egamma]

@mroswald someone got flow working, please see this discussion https://github.com/Microsoft/vscode/issues/5214#issuecomment-209357738

[mroswald]

@egamma setting this via package.json seems no longer available. but files to language assocations can now be done in user or workspace settings via

"files.associations": {
  "*.js": "flow"
}

[egamma]

@mroswald using the files association is now the recommended way. The package.json language contribution was more of a work around.

[prashaantt]

I've enabled Flow using the extension and mapped *.js to flow, as suggested. This makes VS Code no longer report errors, but this also means IntelliSense stops working.

This was the exact issue with .jsx earlier and it was resolved by allowing files using the JavaScript React language mode to be first class JavaScript citizens with TypeScript enabled. A similar solution that treats the Flow lang mode (as provided by the Flow extension) but _without_ enforcing TypeScript checks and letting Flow take over would be the way to go. If I understand this correctly, this needs to happen inside Code itself rather than in the extension and perhaps by providing a new setting to disable TS validation for certain file types/language modes.

My personal use for Flow is exclusively with React which naturally works much better with Flow than TypeScript. Nuclide supports Flow out of the box, but I'm determined to stick with Code for all its other goodies. So I know it's probably too much to ask, but can you please make this happen @egamma? :)

[egamma]

I was able to get Intellisense and diagnostics using the flow extension (see below).

• installed the flow extension from the market place
• added a .flowconfig file
• associated .js files with the flow language in the user settings

{
    "files.associations": {
        "*.js": "flow"
    }
}

Verified that the error message doesn't come from Salsa (it would have [js] as a prefix) and tried Intellisense.

[prashaantt]

I just don't know what you're doing differently, because all I get to see is this

I've tested this in the latest Insiders and regular builds. Do you have anything inside your .flowconfig?

[prashaantt]

Can you please tell me the version of flow you have installed?

[egamma]

I might be on an older version...
Flow, a static type checker for JavaScript, version 0.18.1.

I suggest to file issues against the flow extension if the problem persists.
https://github.com/flowtype/flow-for-vscode

[prashaantt]

Thanks, and sorry for the bother. Yes, I've verified that this is an issue with newer versions of the extension itself.

However, in regular JS mode, IntelliSense for "bar" returns many more suggestions from JavaScript, so it still appears that the full IntelliSense is not available to the Flow extension. Is that also a deficiency of the extension or something to do with Code itself?

[egamma]

in regular JS mode, IntelliSense for "bar" returns many more suggestions from JavaScript, so it still appears that the full IntelliSense is not available to the Flow extension.

This is by design, the JS mode adds suggestion based on type inference and since not all types can be inferred it also offers the global JS symbols. This is described here: https://code.visualstudio.com/docs/languages/javascript#_intellisense

[niedzielski]

Thanks for all the background on this issue! I believe the relevant issue mentioned in the extension is flowtype/flow-for-vscode/issues/13. Unfortunately, it seems that the suggested workaround breaks ESLint highlighting.

[egamma]

@julioolvr, this is a neat workaround but unfortunately seems to break ESLint highlights :(

I assume the issue is that once the language mode is set to something else than JavaScript then the vscode-eslint extension no longer considers the file. I've filed an issue against vscode-eslint.

[faceyspacey]

any update on this?

[dudeinthemirror]

After installing VSCode 1.10.2, I had the same issue. Adding

    "files.associations": {
        "*.js": "flow"
    }

to the user settings did not solve the issue, it made syntax highlighting go away.
However when I took that out of settings and restarted the editor, Flow is working again properly.

[agrcrobles]

This is working for me having the following in settings.json.

{
    "javascript.validate.enable": false,
    "flow.useNPMPackagedFlow": true
}

Note: I am using flow-for-vscode

[dually8]

Thank you @agrcrobles, I've been messing with this for hours in an asp.net core application. FINALLY got it.

[rankun203]

Thanks @agrcrobles !

Note: Place those settings provided by @agrcrobles in $workspace/.vscode/settings.json will only effective in current project.

[dotbear]

Thank you so much @agrcrobles !

[jeantimex]

You are awesome @agrcrobles!

[agrcrobles]

Great it helped guys, I will add it to docs.

[vladimir-kotikov]

Thanks to @agrcrobles, steps to get flow intellisense working are now reflected in README. Closing this

[ghost]

News on this?

[iTOYS]

Hi @joshuaskelton,
Please see https://github.com/Microsoft/vscode-react-native/blob/master/doc/intellisense.md

[kunokdev]

By disabling, "javascript.validate.enable": false, what do we lose?
Thanks for solution tho @agrcrobles

[aMarCruz]

In flow files, nothing

[MadeoIT]

@kunokdev you will lose javascript validation. I will try it for a bit, but IMHO is not a good solution.