Flow-for-vscode: Syntax highlighting

[gabelevi]

Looks like it was deleted in https://github.com/flowtype/flow-for-vscode/commit/9f5a649221de89b73f19c500c2dbcb472eedb8be - should we bring it back in some form?

[gabelevi]

@Arilas - what was your motivation for deleting this?
@zertosh - did you mention you had some grammar files that might work well here?

[Arilas]

Independent flow language don't support IntelliSense(that provide a lot of functionality like go to method definition, method preview, suggestions from typescript)also it broke a lot of extensions (linters for example). Also standard syntax highlight works well for flow, because it's use rules from typescript. Also there's a issues with applying flow language for flow files, VSCode interpretate it like JavaScript files.

[Arilas]

So flow language works well only when you manually select them in list, and only with flow extension. Another extensions will not work for that file and you will just receive simple text editor with auto complete from flow, without any features from VSCode

[thearrow]

I agree that the extension does not need to configure a separate "Flow" language, but these changes removed the better syntax highlighting from the regular "JavaScript" language (with working intellisense and linters) as well. See the screenshots in #33 for a before/after comparison - the standard syntax highlighting definitely does not work well for flow.

I'm currently using this as a workaround, as it provides a much better grammar for highlighting (the grammar that used to be included with this extension).

[devicodev]

@thearrow @gabelevi What if we add suggestion about installing Babel syntax extension to not support two things(flow and babel syntax) at the same time (because previously we had outdated syntax definition files).

[thearrow]

As a user, I would prefer to only have to install one extension (Flow) to get all of the flow-related features working (including highlighting).

Also, suggesting that users install the Babel extension creates a kind of infinite loop - the Babel extension just copied the syntax/grammar that was originally in this extension - they're probably not going to maintain it either!

Where did the original syntax/grammar files come from for this extension? How hard would it be to keep them in sync with the original source?

[gabelevi]

Looks like @bpasero contributed it in https://github.com/flowtype/flow-for-vscode/commit/3eec0b9d9dfdb1465e703d492332055b426608f8 a year ago. It's possible that there is no original source.

I think @zertosh mentioned to me a few weeks back that we could use https://github.com/babel/babel-sublime - and that sublime and vscode can use the same syntax file format. I haven't actually researched it, though.

[bpasero]

@gabelevi if you install our extension generator (generator-code): https://github.com/Microsoft/vscode-generator-code you can point to an existing TM (text mate) theme and it can convert it to a VS Code theme. That is what I did with my initial commit. Now, I am not 100% sure where I took that TM theme from but chances are that Atom was using it and I just converted it.

[corysimmons]

Been through several issues now... Is there an official workaround or support for this yet?

[thearrow]

@corysimmons my workaround was going back to using Atom 😛

[corysimmons]

I feel ya. I'm migrating to VSCode today and it's been exceptional in every way, so I hate the idea of migrating back to Slowtom because of this one feature. I'm also not sure how I feel about FlowType and was thinking of migrating to Typescript anyway.

This entire bug just upsets me because it makes Microsoft's new approach to open-source seem a bit like the old Microsoft (Typescript works perfectly out-of-the-box, but FlowType is unfixable?).

I don't think it's some diabolical intention. I think it's just a crappy bug. But it looks bad.

Oh well. I don't <3 FlowType enough to throw away a fast-as-hell-with-amazing-intellisense version of Atom.

[bpasero]

Can someone summarise the current issue? It has been a while I catched up here. No matter what it should maybe move to the VS Code repository 👍

And we are for sure not trying to make the Flow extension look bad. For us any extension has equal rights. However it could be that there are scenarios that we just did not polish good enough yet.

[thearrow]

@bpasero issue is about how to provide accurate syntax highlighting for files containing flow types.

Proposed solutions so far:

• Add a note in the README advising users to install another extension (like the Babel one)

or

• Bring back your converted syntax file that was removed in https://github.com/flowtype/flow-for-vscode/commit/9f5a649221de89b73f19c500c2dbcb472eedb8be (or re-convert it from the most recent Atom TM theme) and maintain it so users only have to install this extension

[corysimmons]

1. Try to use flow
2. Throws ts error (because ts works by default)
3. Associate .js files with flow manually
4. Works, but now no syntax highlighting with flow file

Not sure if this problem exists on an isolated example, but seems to affect my repo https://github.com/corysimmons/postcss-ant (like I can't get flow + syntax highlighting on lib/index.js).

[minedeljkovic]

@corysimmons You can easily avoid 2. by setting javascript.validate.enable: false.
Check out "Q: How do I disable Syntax Validation when using non ES6 constructs?" here

[bpasero]

Let me try to understand the issue: Is it that you want to use the built in JS/TS language server and colorization for *.ts and *.js files as long as they do not include the flow header within the file and otherwise use the flow extension?

[corysimmons]

I want flow to work. I want to have syntax highlighting.

[stphdenis]

https://marketplace.visualstudio.com/items?itemName=flowtype.flow-for-vscode

Known Issues

You should set workspace preference to disable default syntax validation from Visual Studio Code: "javascript.validate.enable": false.

[ggregoire]

I have syntax highlighting with the following config:

• Grammar: Latest TypeScript and Javascript Grammar (the future grammar shipped with VSCode)
• Theme: Ayu Dark

[orta]

Same, yeah, I think this has all been fixed in the latest grammars from Microsoft, this is probably worth closing now 👍

[jituanlin]

@orta thanks, highlighting work correctly when install this extensive.

[ctrlplusb]

As mentioned in #103 by @yenbekbay - the Sublime Babel plugin gives awesome code highlighting support. I was getting some manky coloring without.

https://marketplace.visualstudio.com/items?itemName=joshpeng.sublime-babel-vscode