Colorization of JSX code in VS 2015

[djanosik]

Hi,

I've installed TypeScript 1.6 and tried to replace my .jsx files with .tsx. Everything works as expected except that JSX code is not colorized. I've tried to reset my "Fonts and Colors" settings, but nothing helps.

Is that supposed to work? Is there any way to fix this?

Thank you!

[DanielRosenwasser]

This is actually a known issue and is unfortunately we won't have proper colorization for JSX until we reactivate the syntactic classifier. I'm not entirely sure when that will be. @CyrusNajmabadi might know more about this.

[matijagrcic]

@DanielRosenwasser @CyrusNajmabadi Except for colorization and formatting could you provide support for emmet, something as VS code did in microsoft/vscode#732?

[DanielRosenwasser]

I feel like that might be out of scope, since another project could always use our language service to implement the same functionality. Still, I'm not that familiar with emmet and others might disagree.

You're more than welcome to open up a separate issue, and if you do, if you could give a quick description on emmet itself with a link that would be much appreciated.

[olmobrutall]

Here are links:

Emmet syntax: http://docs.emmet.io/abbreviations/syntax/

YouTube video: https://m.youtube.com/watch?v=EfrqtMmmb0k

Challenges for react: https://gist.github.com/max-mykhailenko/41d0c3991d92f38dcbc6

Anyway, I think syntax coloring, proper formatting and basic tag auto-closing should be priorized.

While VS and TypeScript have a much deeper understanding of the type system, the experience is almost ruined because of the final polish.

Pleeese fix this.

[billti]

@RyanCavanaugh @vladima Is simple colorization of the JSX element and attribute identifiers, and punctuation, not something we can do easily within the enabled classifiers?

[mhegazy]

We will need to re-enable the syntactic classifier. There should not be a perf hit now after the work @CyrusNajmabadi did in VS2015 update1.

[CyrusNajmabadi]

Also, I put in some very useful helpers in the Roslyn codebase for this work. Check out ITextViewExtensions.GetVisibleLinesSpan as well as:
http://index/#Microsoft.CodeAnalysis.EditorFeatures/Implementation/Classification/SemanticClassificationViewTaggerProvider.cs,74

With these helpers you should need very little code in your view tagger.

[vladima]

fixed in #6406 and #6411

[olmobrutall]

Awesome!

[matijagrcic]

@vladima Awesome work! Do we need to wait for a particular VS update or can we just use latest TypeScript?

[vladima]

managed side of changes should be available in TypeScript 1.8 which is our next release (I don't have any exact timings at this point)

[olmobrutall]

@vladima That's awesone! You have some pretty screenshot already?

[vladima]

something like this (colors for tags, attributes and inner text can be redefined)

[olmobrutall]

👍 Oeeee!!

[techird]

@vladima Is that possible to get this working in my visual studio now? Can't wait for typescript 1.8.

[vladima]

Unfortunately no, this requires changes on the managed side that were not yet released

[matijagrcic]

This is working great with TypeScript 1.8.

TypeScript_Dev14Full.exe download

Thanks for all the hard work!

[olmobrutall]

Awesome team and awesome language. Thanks a lot!

[techird]

Really productive!!

[djanosik]

Is it intentional that colors used for tags, attributes and inner text are different from colors used in .cshtml or .jsx files? What colors I need to redefine to make it look the same?

[djanosik]

Well, it looks it uses colors for VB XML Literals instead of colors for XML or HTML. That feels wrong.

[olmobrutall]

I think it makes sense. This is markup inside code like in VB, no code inside markup like in cshtml.

I think .jsx are wrong and .tsx right.

[djanosik]

It makes sense, but it should be consistent at least.

[olmobrutall]

I've found colorization errors about this feature using Inner Types. I posted a separated issue #6756

[paulvanbrenk]

@djanosik this inconsistency is because the jsx support was originally implemented by the ASP.NET team and the tsx support by the TypeScript team. We have a plan to unify this, however no clear timeline yet; the next version of Visual Studio is more likely than an interim release of TypeScript.

[djanosik]

@paulvanbrenk Good to know. I've changed VB XML Literals colors because it's not readable when you use Dark color theme.

[CyrusNajmabadi]

pinging @dpoeschl . Hey David, is is a known issue that the VB xml literal colors aren't readonable in the Dark theme? Sounds like something we'd want to fix for both VB and TypeScript.

[nippur72]

what are the VB XML color code-names for <, >, /, = ?

I would like to colorize the whole component definition, delimiters included.

Also, it would be nice if code within JSX expressions ({ }) had a custom background (slightly lighter or darker) like in the razor syntax.

[paulvanbrenk]

@nippur72 I don't think VB XML literals has configurable options for the delimiters, at least I couldn't find them.

I'll see if I can use the VB XML Literals - Embedded Expression color for the JSX expressions, but that may look terrible.