Sublime Forum

JavaScript syntax highlight quirk (with fix)

#1

Some of the color schemes (like Monokai) will highlight function arguments. However, when an anonymous function is used as an argument, the anonymous function’s argument will not be highlighted unless there is a space between the function keyword and the parentheses. Example:

// argument el should be highlighted but it isn't
Array.prototype.slice.call(arguments).forEach(function(el)  {
	//stuff
});

// argument el is highlighted
// notice the space between function and (el)
Array.prototype.slice.call(arguments).forEach(function (el)  {
	//stuff
});

The bug seems to be in the regex to match regular functions. In JavaScript.tmLanguage line 260, you have:

<string>\b(function)\s+([a-zA-Z_$]\w*)?\s*(\()(.*?)(\))</string>

but it should be

<string>\b(function)\s*([a-zA-Z_$]\w*)?\s*(\()(.*?)(\))</string>

Hope this helps someone!

0 Likes

#2

It is a coding convention that there should be a space following the word function (for anonymous functions). So I thought the regex expression may even have been intentional.

0 Likes

#3

Maybe it is convention, but when you’re using an anonymous function in a function expression, the arguments are highlighted with or without a space after the function keyword:

// min and max are highlighted with a space after function
Math.rand = function ( min, max ) {
	return Math.floor(Math.random() * (max - min + 1) + min);
}

//min and max are highlighted without space after function
Math.rand = function( min, max ) {
	return Math.floor(Math.random() * (max - min + 1) + min);
}

So if the regex was done intentionally for convention, then it’s not being used consistently.

0 Likes

#4

@zertosh. K. Thanks for the fix. Andy.

0 Likes

#5

Hi @zertosh

I am experiencing the same thing, but after making the suggested changes, I can’t get them to reload.

I have found and edited the tmLanguage file in question, and I have then deleted the cached tmLanguage file in Cache/. I then renamed the original JavaScript.sublime-package in contents/MacoOS/Packages, and have put an updated JavaScript.sublime-package–with the edited tmLanguage file–in my User/packages folder. I restart sublime, and the highlighting is still wrong. It has made a new JavaScript.tmLanguage file in Cache/ and presumably got this form elsewhere.

Could you post what steps you have to take surrounding editing the tmLanguage file?

Thanks!

–Ralph

0 Likes