I installed the Material Theme as well as Babel syntax for es6/7 highlighting for Javascript. For some reason, the highlighting for all types of string (single, double and template) display with incorrect colors. (see picture below)
The quotes should be the same color as the string itself. My question is:
There are two things happening here, and because they both involve third-party packages I don’t use (and because I’m on my Chromebook) I can’t give an exact and complete answer, but here goes.
The Babel package is marking the quotes and the string contents differently. Ideally, it should be marking the entire string as meta.string, and the quotes in particular as meta.string punctuation.definition.string; that’s what the core JavaScript syntax does. This means that a color scheme can (but doesn’t have to) differentiate them. Then, the Material Theme’s color scheme is choosing to differentiate them, resulting in a different color for the quotes and the contents.
I would bet that this is probably a deliberate design decision on the part of the Material Theme color scheme’s authors. If you want to change it, then you can copy the entire color scheme into your User directory and edit the part(s) you don’t like.
For easier visualization, I went over to https://tmtheme-editor.herokuapp.com to make sure I could change it to what I liked. The defaults on the material theme are shown as highlighting strings properly (all the same color). So I downloaded the file, and manually placed it in Packages/User. Then I set my Color Scheme to Material Theme - User (the one I just downloaded it). Still, the problem persists. This means this change is happening elsewhere or the web app I used was broken (doubt it). I’ll keep messing around, but this is quite annoying.
The babel syntax is not being maintained…, I created an alternative syntax which should support most ES6+ features and JSX, check this pull for the most up to date version and support for various color schemes(You will need to clone the repo and select the hotfix/fjsx15-bugs branch).
I installed Naomi and the problem persists. That’s why I don’t think Babel was ever the problem. The problem exists somewhere else.
So I fixed the problem! Apparently, Material Theme doesn’t have definitions for a number of string selectors. So I manually added definitions for them at the end of the MaterialTheme tmTheme file.
<dict>
<key>name</key>
<string>Strings</string>
<key>scope</key>
<string>string.quoted.js, punctuation.definition.string.quoted.begin.js, punctuation.definition.string.quoted.begin.js, punctuation.definition.string.quoted.end.js</string>
<key>settings</key>
<dict>
<key>foreground</key>
<string>#C3E88D</string>
</dict>
</dict>oh and add keyword.other.template.begin.js, keyword.other.template.end.js selectors to support template strings.