TypeScript-TmLanguage: Broken syntax highlighting for multiline function args in typescript

From @marvinhagemeister on June 22, 2017 12:57

Do you have a question? Please ask it on Stack Overflow with vscode tag

(Use Help > Report Issues to prefill these)

  • VSCode Version: 1.14.0-insider d5e10a589ff68d026ba9cf57485d3004149a9c8a
  • OS Version: MacOS Sierra 10.12.5

Steps to Reproduce:

  1. open vscode
  2. paste this snippet:
export const toPdf = (renderer: Renderer) => <P>(
  document: Doc<P>,
): Promise<string> => {
  return renderer(document.html, document.config);
};

// compared to
export const toPdf = (renderer: Renderer) => <P>(document: Doc<P>): Promise<string> => {
  return renderer(document.html, document.config);
};

Copied from original issue: Microsoft/vscode#29267

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 1
  • Comments: 19 (8 by maintainers)

Commits related to this issue

Most upvoted comments

Looks like this syntax highlighting issue affects lot of people, specially now that prettier is getting more and more common and it likes to split spread args into multiple lines. Is there any way you can reconsider the “wontfix”?

@sheetalkamat Github’s syntax highlighting handles this just fine (eg; see the first post in this thread). Maybe see how they do it for an example?

Why is this still a wontfix? It’s clearly an issue affecting multiple languages and similar problems. This doesn’t happen in Atom, unless I’m mistaken. It’s not impossible. Like @rattrayalex said, can’t the regex span multiple lines? @sheetalkamat

Released VS Code Extension version 0.0.33 that contains #552 which should address issues reported here. After letting it bake in that extension for 2-3 weeks, I could merge #552

@albertogasparin

I also think “wontfix” should be reconsidered, until then I’ll use // prettier-ignore, as this will exclude the next node in the abstract syntax tree from formatting.

@duro thanks for reporting. I have pushed fefa941 to handle this and Released VS Code Extension version 0.0.40

But how can we predict on line of method or Component that it is arrow function and not expression? That would be wrong to display as it would impact more people.

So am I interpretting right that it’s only ambiguous grammar because of jsx/tsx? If so, maybe we should introduce an option to disable tsx entirely so the DX isn’t impacted for the majority of Typescript users?

This is because of limitation of the grammar. There is no way on line 1 to distinguish that

is typeparameter of the arrow or a jsx tag without content on line 5 and hence the issue.