[themes] improvements expressions in template string

[sheetalkamat]

• VSCode Version:
• OS Version:

Used latest vscode extension from https://marketplace.visualstudio.com/items?itemName=ms-vscode.typescript-javascript-grammar

This can also be found when using extension https://marketplace.visualstudio.com/items?itemName=ms-vscode.js-atom-grammar

From @mhegazy at microsoft/TypeScript-TmLanguage#287
see number below

The expression is tokenized as meta.template.expression but theme doesn't use this information to colorize it correctly. Also note that number in the expression is scoped as variable.other.readwrite.

Probably ${ and } could be colored blue by using their scopes punctuation.definition.template-expression.begin and punctuation.definition.template-expression.end

[Tyriar]

Yes the scopes exist so this is indeed a theme issue:

[aeschli]

I adopted the default themes to the grammar. It now looks like this:

[empz]

Would it be too hard to make ${ and } a different color or maybe bold or something?

[rob3c]

Yes, didn't ${ and } used to be separately colored? Matching them to either the string or the expression color is confusing and seems like a regression.

[aeschli]

Reopening to fix the coloring of the interpolation ${...}

[gertcuykens]

Can you expand the template string coloring to include html syntax while you are at it? Let me know if I need to create a new feature request for this

Example:

PS Why did this picture blow up?

[aeschli]

@gertcuykens Yes, please file a separate request. Please include the full code snippet that shows the issue. Please also for what language the code snippet is.

[gertcuykens]

I looked around a bit better and found many other tickets scattered around asking for it :) I think this is the main one #2000

[Tsmith18256]

This is not working for variables that use the all-caps constant naming convention.

Tested in the latest version (1.7.2).

[aeschli]

@Tsmith18256 Please file a new issue? You can file directly against https://github.com/Microsoft/TypeScript-TmLanguage. Thanks a lot!

[empz]

I've filed a new issue: microsoft/TypeScript-TmLanguage#368

[empz]

@aeschli: @sheetalkamat says this is a vscode issue. Could you re-open this?
microsoft/TypeScript-TmLanguage#368 (comment)

[upkarlidder]

@aeschli possible to create a setting to allow auto closing the } bracket and place the cursor inside? Like the editor does for functions. This is not a bug. Just a question.

console.log(`this is ${this}`)

[aeschli]

@lidderupk Inside strings we currently don't auto close brackets. Please file a new enhancement request with details against https://github.com/Microsoft/vscode/issues.

[upkarlidder]

@aeschli done. Thank you.
#28053