Sublime Forum

Perfect JavaScript Syntax

#1

[size=200]JavaScript Ultimate[/size]

JavaScript Ultimate is a new syntax definition for JavaScript, which will **replace your default **one (also, this is considered a complete upgrade from Better JavaScript).

(Read the official Readme on Github)

Here are some of the more obvious insufficiencies of every other JavaScript syntax out there:

  • dollar signs ($) are not treated as word-characters. This means that in patterns like $true
    , the true part is treated as a constant, instead of part of the identifier

  • unicode identifiers are not supported

  • they often don’t detect current reserved words

  • no support for modern DOM APIs (canvas, SVG, etc.)

  • they often don’t follow the ECMAScript 5 spec accurately, if at all

  • in patterns like myObject.true
    , they think that true is a constant, as opposed to an identifier

  • no JavaDoc support

  • regular expression literals aren’t detected in some valid contexts

  • many, many more

Built from the ground up, this syntax definition fixes all of those things, which no JavaScript syntax does right now:

  • all valid JavaScript identifiers are detected, with full Unicode support
    (and the dollar sign is treated as a word-character)

  • updated DOM library; obsolete items removed, added support for Canvas, SVG functions, and more

  • Includes all features of ECMAScript 5, and some of ES6 (will make an ES6 version when the spec if finalized)

  • added JavaDoc support

  • many, many more

Until this package, JavaScript Next was probably the best JavaScript syntax available. That one is still better for you if you actually use ES6 features (i.e., you code in traceur).
Otherwise, this one is more desirable, as it’s much more accurate.

Additionally, this syntax actually comes with two syntaxes:

  • JavaScript

  • JavaScript (DOM)

So when you’re coding server-side JS, you don’t need to falsely highlight DOM functions.

There’s a JavaScript (Node) on the way, so all your __dirnames and *require()*s can be highlighted too.

[size=150]Install through Package Control[/size]
[size=150]Github: https://github.com/JoshuaWise/javascript-ultimate[/size]

0 Likes
#2

Hint: organize the repo to have a folder for theme, a folder for snippets and so on.

Also, a short guide to add new syntax tweaks on existing themes (I already have a quite modified monokai, i’m not eager to change it)

Edit: it seems that it doesn’t highlight things like window object.

0 Likes
#3

Noted.

Maybe after I add the Node library. For now, look into the “Monokai JU” theme in JavaScript Ultimate, and search for “” comments. Those are the scopes that are special or modified.

It does if you set your syntax to “JavaScript (DOM)”

0 Likes
#4

Ahhh, yes, now it make sense :smile:

Would be nice to highlight variables vs function calls differently. E.g. in the image below, 1) and 3) should have same colors and 2) a different color

0 Likes
#5

I’m currently under the philosophy that built-in functions and values should be highlighted, but user-defined ones shouldn’t be.
If enough people come out to disagree with me, I might change this in the package. However, until then, go into both JavaScript.tmLanguage and JavaScript (DOM).tmLanguage, and replace lines 314 - 416 with this.

Cheers!

0 Likes
#6

[quote=“JoshuaWise”]I’m currently under the philosophy that built-in functions and values should be highlighted, but user-defined ones shouldn’t be.
[/quote]

I agree. Partially at least. Can the custom function be highlighted differently?

Also, could you quickly explain this kind of sorcery?

(?<!\p{L}\p{Nl}$\p{Mn}\p{Mc}\p{Nd}\p{Pc}_\x{200C}\x{200D}])\p{L}\p{Nl}$_]\p{L}\p{Nl}$\p{Mn}\p{Mc}\p{Nd}\p{Pc}_\x{200C}\x{200D}]*+(?=\s*+\()
0 Likes
#7

I think this would be nice.

0 Likes
#8

There are only so many scopes that are recognized by most color schemes. Unless you used one of the color schemes that comes with JavaScript Ultimate (or modified your own), either custom functions or built-in functions would have to share the same color as something else. I may look into this further.

That is the sorcery of Unicode regular expressions in Oniguruma (the regexp engine used by Sublime Text).
The JavaScript spec specifies what characters are legal as identifier names (i.e. variable names, etc.). Most language syntaxes only support the valid characters that lie within the ASCII range. JavaScript Ultimate detects all valid identifiers in JavaScript.

Translations
(?<!\p{L}\p{Nl}$\p{Mn}\p{Mc}\p{Nd}\p{Pc}_\x{200C}\x{200D}])
Preceding text mustn’t contain a valid identifier character.

\p{L}\p{Nl}$]\p{L}\p{Nl}$\p{Mn}\p{Mc}\p{Nd}\p{Pc}\x{200C}\x{200D}]+*
Text must be a valid identifier.

(?=\s+()*
Text must be followed by any number of white space, and then an open parenthesis.

1 Like
#9

The js ultimate is just great.Can you add es2015 with it?Then it will relace all other js synax plugin

0 Likes