How to get same color scheme as babel-sublime?

[dortamiguel]

Babel sublime looks like this

And JS Custom - React looks like this

I want to get the same orange imports and dots on JS Custom, is this possible?

JS code that I used for this example

import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

[Thom1729]

babel-sublime highlights several syntax features differently from the core JavaScript syntax. (JS Custom inherits the core highlighting except where an extension deliberately overrides it.)

In some cases this is a matter of subjective preference. For instance, babel-sublime highlights unquoted object keys as string.unquoted. This is arguably more correct, and the core JavaScript syntax briefly used the same implementation, but the backlash from users used to the prior highlighting convinced them to revert the change. JS Custom offers an option, string_object_keys, to allow users to satisfy either preference.

In other cases babel-sublime does not follow the standard practices used by most other syntaxes. (These practices are documented in the official scope naming guidelines, but these guidelines are not comprehensive. A community effort to formalize more specific guidelines is in its early stages.) For example, babel-sublime highlights the dot (foo.bar) as keyword.operator.accessor. However, the standard convention is to use punctuation.accessor (as seen in the core syntaxes, including JavaScript, and inherited by JS Custom). babel-sublime also highlights import and from as keyword.operator, which is definitely incorrect. In theory, JS Custom could provide extensions that mirror babel-sublime's behavior here, but I am hesitant to do that because, in contrast to the issue with unquoted object keys, babel-sublime really is in the wrong here.

But if you like the appearance of babel-sublime, there's no reason you can't recreate it with JS Custom. What I'd recommend is extending your color scheme. Save the following as Packages/User/Mariana.sublime-color-scheme:

{
    "rules": [
        {
            "scope": "keyword.operator.word, keyword.control.import-export",
            "foreground": "var(red2)"
        },
    ]
}

If there are more highlighting differences that you'd like to change to resemble babel-sublime, I'd be happy to help. It's likely that other users may be used to the babel-sublime appearance and would benefit from a ready-made patch.

[dortamiguel]

Awesome! It works for the import and export