Improve JS outline/breadcrumb display for arrow functions

[mjbvz]

From @ryaninvents on September 10, 2018 16:45

After this Twitter discussion, it seems that there's interest in improving the outline/breadcrumb display for arrow functions.

My proposal: if the arrow function is an argument in a function call, use the name of the called function along with any string literals to visually identify the otherwise unnamed function.

For example:

// Example code
document.addEventListener('click', () => {
  // This would ordinarily display as "<function>"
})

/* Proposed outline display

> addEventListener('click', ...)

*/

I took a quick look at the code but wasn't sure how the tokens are generated or used to form the outline, but I wrote a proof-of-concept using Babel to at least give a sense of my idea.

Before:

After:

Copied from original issue: microsoft/vscode#58367

[mjbvz]

From @ryaninvents on September 12, 2018 16:59

I spent a bit of time investigating, and my best guess is that I'd have to insert a lookback of some sort into this monster RegEx, so that if it's an arrow function it'll try and read the preceding function call and string arg.

This is a total guess though; if someone more familiar with the codebase knows where to look then I'd be happy to listen.

[mjbvz]

Moving this upstream to get more feedback. If this is something we feel we should look into, I believe it should probably come from typescript since:

• That way the same solution would work across editors, including in both VS and VS Code
• TS has access to the ast and structure information about where the arrow function appears

The simplest way to implement this—and one we could implement today on the vscode side—would be to show the text line where the arrow function appears in place of <function>. Not sure how helpful this would be in practiec

[ryaninvents]

@mjbvz thanks for the 301. Is the TypeScript parser responsible for generating the outline? I thought it was handled by the active VS Code grammar.