[themes] Flattening of text mate scopes leads to wrong coloring #3008

Closed
isidorn opened this Issue Feb 14, 2016 · 7 comments

Projects

None yet

7 participants

@isidorn
Contributor
isidorn commented Feb 14, 2016
  • Open nodeAppInsightsTelemtryAppender.ts#40
  • Notice broken colouring of comments inside contructor arguments

screen shot 2016-02-14 at 18 00 03

Other problematic languages with deep scope hierarchies:

  • JSX tags
  • Java
@aeschli aeschli was assigned by isidorn Feb 14, 2016
@aeschli aeschli added themes and removed typescript labels Feb 22, 2016
@aeschli aeschli added this to the Backlog milestone Feb 22, 2016
@aeschli aeschli added the debt label Feb 22, 2016
@aeschli aeschli changed the title from Comment colouring in constructors broken to [themes] Flattening of text mate scopes leads to wrong coloring Feb 22, 2016
@aeschli
Contributor
aeschli commented Feb 22, 2016

Problem is the flattening of the text mate scopes

@anyong
anyong commented Apr 20, 2016

Is there any progress on this issue? Judging by the other issues linked here, I'm assuming this is the same problem; it happens about half the time I do object destructuring in a render method with JSX, depending on where the newlines are.

image

@mikemimik

I believe this is still an issue with destructuring in ES6

let {
  first,
  second,
  third
} = destructVar;
let otherVar = 6;

The second let wont be coloured correctly.
I have a large class module and the static methods defined after a large variable destructuring (multiline) aren't coloured correctly.

@RichieAHB

I'm noting a lot of issues in Javascript. For example, passing objects as function parameters is just a whiteout in monokai ...

screen shot 2016-05-17 at 15 20 42

@ghost
ghost commented Aug 5, 2016

@aeschli, could you point to the syntax highlighting heuristic code which disambiguate these tokens, so we can try to fix it?

@aeschli
Contributor
aeschli commented Aug 8, 2016

Flattening happens at https://github.com/Microsoft/vscode/blob/master/src/vs/editor/node/textMate/TMSyntax.ts#L324
The challenge is the API ripple through the editor model APIs as well as fixing the color matching that is currently done with using CSS.

@Velok
Velok commented Oct 13, 2016

Don't know if I understand this correct.. One problem is the interference of the scopes because they are handled as css classes attached to the span tokens in the editor.

For example:

A class block gets the scope meta.class -> css classes meta class
The classname itself entity.name.class -> entity name class
A method declaration in the class block meta.method.declaration -> ..
The methodname itself entity.name.function

So the methodname token gets this classes: meta class entity name declaration method function

If you want to style classname and methodname the highlighting depends on the order in the tmTheme file. This is because the token has the css-class class from the scope meta.class and the class function from entity.name.function. So if you style the classname after the methodname in the tmTheme File it will override the style of the methodname.

image
image

How can this be fixed?

One approach is to add the scopes as they are to the html span-tokens i.e. entity.name.function meta.class (or with dashes instead of the periods) instead of entity name function meta class.

Other ideas?

@aeschli aeschli modified the milestone: January 2017, Backlog Dec 30, 2016
@isidorn isidorn added the verified label Jan 25, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment