JSCustom breaks vue syntax highlighting

[dortamiguel]

To reproduce this behaviour first you have to install the package Vue Syntax Highlight.

After installing JSCustom and restarting sublime text, vue components start to look like in the screenshot above.

Even if I uninstall JSCustom the highlight stays broken, I have to manually remove the folder:

~/Library/Application\ Support/Sublime\ Text\ 3/Packages/User/JS\ Custom

These errors are easy to see when using the official vue template https://github.com/vuejs-templates/webpack

[Thom1729]

@ellipticaldoor What version of Sublime and of Vue Syntax Highlight are you using?

This is (was) a known issue with the Vue package. The way that it was importing the JavaScript syntax was incorrect, and when the core JavaScript syntax was updated the Vue syntax broke. The Vue syntax has since been rewritten and should no longer suffer from the above issue. I have just tested this to confirm that the issue no longer exists.

However, the new Vue syntax uses the embed/escape feature introduced in Sublime dev build 3153. (Using this feature simplifies the implementation and should substantially reduce both the in-memory size of the compiled syntax and the time it takes for Sublime to recompile the Vue syntax when an embedded syntax changes.) Unfortunately, this feature is not yet present in a stable build. It looks like you are using the old version of the Vue syntax, presumably on stable build 3143.

It is not possible to remedy the problem on the JavaScript end, because the internal implementation details that the old Vue syntax implicitly relied upon were causing systematic bugs and blocking new features. The old Vue syntax works with babel-sublime because it suffers from those bugs.

There are two immediate workarounds. First, upgrading to dev build 3153 or later will give you the new, fixed Vue syntax. Second, using explicit semicolons in your JavaScript rather than relying on the automatic semicolon insertion algorithm will avoid the cases that babel-sublime and the old Vue syntax get wrong. (It seems that the official Vue template omits semicolons, which is generally considered poor practice but is actually advocated by some styles. Omitting semicolons while using babel-sublime is likely to trigger a number of subtle bugs.)

If a new stable build is released soon, the problem will go away altogether. Failing that, it may be possible to backport the new Vue syntax to work with stable build 3143. I'll open up an issue over there and see if anyone is willing to do that.

[dortamiguel]

Awesome! It works just fine on latest sublime dev 3157

[dortamiguel]

It looks like the latest version on master of vue-syntax-highlight has this problem