Not using configured JS syntax inside <script> block

[dsl101]

trafficstars

The documentation suggests the <script> block will use whatever syntax is used for regular .js files, but I'm getting very different results in Vue SFC <script> vs plain .js files. My default syntax is JavaScript Next, and looks like this (correct):

but that code in a Vue SFC looks like this (many things miscoloured):

There are lots of other differences too, and I can get the effect in plain .js files by switching to the built-in Javascript syntax (which is the reason I moved to JS Next). So, is there a way to be explicit about which syntax to use, or is there just a bug not picking up the configured .js syntax setting?

[rchl]

https://packagecontrol.io/packages/JavaScriptNext%20-%20ES6%20Syntax is not maintained for 2 years now. Official syntax by now has implemented probably all and more of what JavaScriptNext supports. It's not a good idea to keep using it. Even if you think that highlighting is better in it ("better" being subjective as official highlighting might make more sense consistency wise).

[skyronic]

Have you tried disabling the default javascript package?

Ctrl+Shift+P -> Disable Package -> JavaScript

[dsl101]

OK, several separate thoughts:

• The official syntax doesn't highlight functions (definitions or calls) properly for me. I know this could be a color scheme issue, but I'm just going round in circles and JS Next has been working perfectly for a long time.
• "It's old" isn't a reason for v-s-h not using it, is it?
• Are the docs inaccurate (v-s-h doesn't use the configured highlighter), or is there a bug?
• I've tried disabling the built-in JavaScript highlighter, but v-s-h still seems to use it. Not sure how, but the scopes reported by ScopeHunter are identical inside the Vue component to what the built-in JavaScript syntax reports when it is enabled.
• I will also see if the color scheme (Monokai++) can be updated to work with how the built-in highlighter labels the scopes.

[dsl101]

In fact, I've removed JSNext and re-enabled the built-in JavaScript syntax, and I notice several differences between the scopes from a .vue file and a .js file. Small example in a plain .js file:

The components key scope is:

source.js
meta.export.js
meta.object-literal.js
meta.object-literal.key.js

but in a .vue file:

with:

text.html.vue
source.js.embedded.html
source.js
meta.export.js
meta.mapping.js
meta.mapping.key.js
string.unquoted.js

Doesn't seem like that is the same syntax highlighter being used for the JS part...

[ada-ada-ada-art]

I have a similar issue. Interestingly the syntax highlight is correct, if I set lang=ts. Which I am not interested in doing for this component though.