Repository navigation
Colorization of JSX code in VS 2015 #4835
Description
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!
Activity
olmobrutall commentedon Dec 24, 2015
Here are links:
Emmet syntax: http://docs.emmet.io/abbreviations/syntax/
YouTube video: https://m.youtube.com/watch?v=EfrqtMmmb0k
Challenges for react: https://github.com/proxy/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 commentedon Jan 7, 2016
Ryan Cavanaugh (@RyanCavanaugh) Vladimir Matveev (@vladima) Is simple colorization of the JSX element and attribute identifiers, and punctuation, not something we can do easily within the enabled classifiers?
mhegazy commentedon Jan 7, 2016
We will need to re-enable the syntactic classifier. There should not be a perf hit now after the work Cyrus Najmabadi (@CyrusNajmabadi) did in VS2015 update1.
CyrusNajmabadi commentedon Jan 7, 2016
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 commentedon Jan 11, 2016
fixed in #6406 and #6411
olmobrutall commentedon Jan 11, 2016
Awesome!
matijagrcic commentedon Jan 12, 2016
Vladimir Matveev (@vladima) Awesome work! Do we need to wait for a particular VS update or can we just use latest TypeScript?
vladima commentedon Jan 12, 2016
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 commentedon Jan 12, 2016
Vladimir Matveev (@vladima) That's awesone! You have some pretty screenshot already?
vladima commentedon Jan 12, 2016
something like this (colors for tags, attributes and inner text can be redefined)
olmobrutall commentedon Jan 12, 2016
👍 Oeeee!!
techird commentedon Jan 26, 2016
Vladimir Matveev (@vladima) Is that possible to get this working in my visual studio now? Can't wait for typescript 1.8.
vladima commentedon Jan 26, 2016
Unfortunately no, this requires changes on the managed side that were not yet released
matijagrcic commentedon Jan 28, 2016
This is working great with TypeScript 1.8.
TypeScript_Dev14Full.exe download
Thanks for all the hard work!
olmobrutall commentedon Jan 28, 2016
Awesome team and awesome language. Thanks a lot!
techird commentedon Jan 29, 2016
Really productive!!
djanosik commentedon Jan 29, 2016
Is it intentional that colors used for tags, attributes and inner text are different from colors used in
.cshtmlor.jsxfiles? What colors I need to redefine to make it look the same?djanosik commentedon Jan 29, 2016
Well, it looks it uses colors for
VB XML Literalsinstead of colors forXMLorHTML. That feels wrong.olmobrutall commentedon Jan 29, 2016
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 commentedon Jan 30, 2016
It makes sense, but it should be consistent at least.
olmobrutall commentedon Jan 30, 2016
I've found colorization errors about this feature using Inner Types. I posted a separated issue #6756
paulvanbrenk commentedon Jan 30, 2016
Dusan Janosik (@djanosik) this inconsistency is because the
jsxsupport was originally implemented by the ASP.NET team and thetsxsupport 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 commentedon Jan 30, 2016
Paul van Brenk (@paulvanbrenk) Good to know. I've changed
VB XML Literalscolors because it's not readable when you use Dark color theme.CyrusNajmabadi commentedon Feb 1, 2016
pinging David Poeschl (@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 commentedon Apr 12, 2016
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 commentedon Apr 12, 2016
nino-porcino (@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 Expressioncolor for the JSX expressions, but that may look terrible.