Intellisense for MooTools 1.2.2 - fakedarren

handslustyInternet and Web Development

Dec 14, 2013 (3 years and 6 months ago)

53 views

Intellisense for MooTools 1.2.2

Here at Abacus e
-
Media we use one of two JavaScript frameworks, e
ither jQuery or MooTools. As
a
.NET company, we
use Visual Studio as our IDE, so the recent announcement that Microsoft
was

incorporating jQuery Intellisense

into Visual Studio was great news.

I therefore thought it to be prudent to produce an equivalent for MooTools, as the jQuery version
would no doubt massively help productivity. It’s a great help to C# developers who may not be so
familiar with JavaScript,

let alone a less
popular / familiar

JS framework like MooTools.

The code is hosted on Google Code and you can find it
here
. There are instructions available in the
Wiki, but I’ll just run thro
ugh them here now.


Prerequisites

Since they announced jQuery support the Visual Studio team have released Service Pack 1 and a
hotfix. The Service Pack fixes a plethora of issues, not just for JavaScript Intellisense. The hotfix
allows you to use an accom
panying

vsdoc
.js

file, which provides a way of
having

an edited version
of the JavaScript file
with documentation, which is necessary because sometimes the Intellisense
parser can’t understand the original library JS files.

For instance, from what I gathe
r, the recent addition of the Sizzle selector engine in jQuery broke
Intellisense parsing. This is even more of a problem with MooTools


the parser breaks even with
just the MooTools
core.js
.

Here are the links to the various prerequisites:



VS2008 Service

Pack 1 (Downloader Installer):
http://www.microsoft.com/downloads/details.aspx?FamilyId=FBEE1648
-
7106
-
44A7
-
9649
-
6D9F6D58056E&displ
aylang=en



VS2008 Service Pack 1 (ISO):
http://www.microsoft.com/downloads/details.aspx?FamilyID=27673c47
-
b3b5
-
4c67
-
bd99
-
84e525b5ce6
1&displaylang=en



Hotfix to allow

vsdoc.js

files:
http://code.msdn.microsoft.com/KB958502/Release/ProjectReleases.aspx?ReleaseId=1736


Using JavaScript Inte
llisense

I’ll use MooTools in the examples here, but this applies equally to using jQuery Intellisense.

The first
step is to put the accompanying

vsdoc.js

file in the same directory as your existing
mootools.js

file.
It needs to be named the same, just wi
th

vsdoc

appended to it, so for instance if your MooTools file
was called
moo.core.js
, name your file
moo.core
-
vsdoc.js
.

Using JavaScript Intellisense
in
.js
files is simple. All you have to do is place a single line at the top of
your
-
vsdoc
.js

file:

///

<reference path=”path/to/mootools
-
vsdoc.js” />

Once this line is inserted into your
.js
file, hit
ctrl
-
shift
-
J

(or Edit
-
> Intellisense
-
> Update JScript
Intellisense) and bingo, you should be away. Check your Error List panel for any problems.

Using it

inline, in a user control or master page for instance, is a bit more convoluted. The path to
the file must always be relative, otherwise it won’t pick it up. The solution is to wrap a relative
reference, wrapped in a function that always evaluates to fals
e:

<% if(false) { %>


<script src=”relative/path/to/mootools.js”
type=”text/javascript”></script>

<% } %>

As with the
/// <reference />

tag, as it always evaluates to false, it will never actually be passed to
the browser


it’s just there to give Visual S
tudio a reference.


What you get

Hopefully now, you should have access to all the MooTools documentation as you type.


One thing that I’d really love to see in Visual Studio 2010 (or a hotfix for Visual Studio 2008) is the
ability to add new lines to
Intellisense. One thing that’s really hard to represent is the plethora of
options available to pass in when you create a new class, for instance ‘Cookie’:

And using Element extensions like
fade
()
:



I actually ended up adding in tabs and spaces to get i
t to put it onto new lines. I’m intrigued as to
how this pans out, and whether or not different setups / resolutions display these consistently.

Note that if you make a custom build of MooTools, for instance you don’t include
Swiff.js

because
you don’t nee
d it, it will still show up. I need to build a custom ‘documentation builder’ too :)

In summary...

Having Intellisense for JavaScript frameworks is fantastic. But I have one concern


that
incorporating jQuery into Visual Studio hinders other frameworks, n
ot just MooTools (for instance
YUI, Dojo, Prototype, ExtJS
). I hope that Microsoft upgrade their JavaScript parsing engine rather
than just working with the jQuery team to improve the jQuery documentation.

It would be unfair to give jQuery this advantage

over all the other frameworks out there. At the end
of the day, this little venture has not shown that they provide Intellisense for jQuery, merely that
they have adapted and improved their parsing engine to allow for
a documentation file to exist, and
th
at the ‘Jscript’ parsing engine is flawed. We
all know

that Microsoft’s JavaScript parsing engine is
flawed by using IE(6/7/8).

I’m not a jQuery hater


far from it, jQuery

is a fantastic framework to use


but it is very DOM
-
centric, and sometimes that isn’t the best approach. Dependant on the problem, you should use the
JavaScript framework that is best suited to the task.

I’m worried that jQuery’s inclusion in Visual Stud
io will hinder the prevalence of other frameworks,
and also that jQuery doesn’t encourage you to learn JavaScript.
If they spent more time improving
their JavaScript parsing engine, it would be better for everyone.