Incorrect javascript syntax highlighting for destructored function parameters in arrow functions

[mjbvz]

From @tomsiwik on November 8, 2017 15:48

• VSCode Version: 1.17.2
• OS Version: Ubuntu 14.04 x64

Steps to Reproduce:

1. Change color-scheme to monokai (best to showcase as default scheme doesn't highlight this part)
2. Compare syntax-highlighting for the following methods:

// 1. Correct highlighting
doSomething = (param, { a = "default" } = {}) => {
    //noop
}

// 2. Incorrect highlighting
doSomething = (param, { 
    a = "default" 
} = {}) => {
    //noop
}

// 3. Correct highlighting
doSomething(param, {
    a = "default"
} = {}) {
    //noop
}

// 4. Correct highlighting
doSomething(param, { a = "default" } = {}) {
    //noop
}

// 5. Correct highlighting (notice config module)
doSomething(param, {
    a = config.get("a") 
} = {}) {
    //noop
}

// 6. Correct highlighting (notice config module)
doSomething(param, { a = config.get("a") } = {}) {
    //noop
}

// 7. Incorrect highlighting (notice config module) while 1. does
doSomething = (param, { a = config.get("a")  } = {}) => {
    //noop
}

I'm surprised this even breaks github's code highlighting. Does this belong here what syntax highlighter does vscode and github use that behaves the same?

Reproduces without extensions: Yes

Copied from original issue: microsoft/vscode#37829

[mjbvz]

This is a similar issue to #481 and #539 and some others. We currently do not handle multiline arrow function declarations well

[tomsiwik]

Hey thanks. Can I ask why this is typescript related and what syntax highlighter is used that causes this same issue in github's markdown? Is typescript's syntax highlighter the same as native js in vscode?
7. isn't even multiline, btw. Are there tests somewhere that do check highlighting (similar to highlight.js/tests)?

I'm suspecting the following file is responsible for handling parameters and such: https://github.com/Microsoft/TypeScript-TmLanguage/blob/master/TypeScript.tmLanguage

[mjbvz]

Our JavaScript grammar is just a modified version of the TypeScript grammar from this repo. I can't speak to what github does but in general JavaScript's syntax can making parsing ambiguous cases like arrow functions difficult, especially when these are split over multiple lines

[sheetalkamat]

Case 7 is now fixed but Case 2 will remain broken because of tmLanguage grammar not being able to lookup beyond current line.

[tomsiwik]

Thanks a lot for looking at it. I appreciate the nice answers :)