Annotated, Google Closure Javascript Compiler Visual Studio Snippets

I have spoken in the past about my great respect for the closure project. This project brings some semblance of order to the chaotic and dangerous world of large application javascript development. However it also has some problems, the biggest of this being the fact that it is very verbose. This small set of Visual Studio 2010 snippets aims to aliviate that issue when developing in VS2010. I have been using a similar set of these snippets in production for many months (in the Mouse Eye Tracking service) and whilst not being industrial strength they are ready for you to get some efficiencies from.

Why Visual Studio?

At PicNet most of our server side code is .Net so when developing html and javascript we also use Visual Studio (saves opening up a new IDE). However the snippet template language is just XML so if you are interested in doing an XSLT into another language please get in contact with me and we can bring that into the project also.

How to install

Download the vsi file
Run (double click - will be recognized by Visual Studio) and install
Ready to use (by typing the shortcut name followed by TAB)

Note: The VSI file is just a zip file with the extension renamed so if you are worried about running strange files just rename to .zip and import the snippets manually into the IDE.

Current Snippets

Shortcut	Content	Declarations
jsclass

/**
 * @fileoverview $classcomments$
 *
 */
goog.provide('$namespace$.$classname$');
goog.require('$require$');
/**
 * @constructor
 * @param {string} $param1$ A sample parameter.
 */
$namespace$.$classname$ = function($param1$) {
	$contents$
};

classcomments: Comments describing this class
namespace: The name of this class’ namespace
classname: The name of this class
require: Classes to import
param1: The name of the first constructor parameter.
contents: The contents of the class.

| | jsconst |

/**
 * @const
 * @type {$typename$}
 */
$namespace$.$constname$ = $constvalue$;

typename: The type of this constant.
namespace: The namespace that this constant resides in.
constname: The name of this constant.
constvalue: The value of this constant.

| | jsconstructor |

/**
 * @constructor
 * @param {string} $param1$ A sample parameter.
 */
$namespace$.$classname$ = function($param1$) {
	$contents$
};

namespace: The name of this class’ namespace
classname: The name of this class
param1: The name of the first constructor parameter.
contents: The contents of the class.

| | jsenum |

/**
 * $enumcomments$
 * @enum {string}
 */
$namespace$.$enumname$ = {
  ON: 'on',
  OFF: 'off'
};

enumcomments: Comments describing this enumeration
namespace: The name of this class’ namespace
enumname: The name of this enumeration

| | jsextends |

* @extends {$namespace$.$inherits$}

namespace: The name of this class’ namespace
inherits: The name of the inherited class

| | jsimpclass |

/**
 * @fileoverview $classcomments$
 *
 */
goog.provide('$namespace$.$classname$');
goog.require('$require$');
/**
 * @constructor
 * @implements {$namespace$.$implements$}
 * @param {string} $param1$ A sample parameter.
 */
$namespace$.$classname$ = function($param1$) {
	$contents$
};

classcomments: Comments describing this class
namespace: The name of this class’ namespace
classname: The name of this class
implements: The name of the implemented interface
require: Classes to import
param1: The name of the first constructor parameter.
contents: The contents of the class.

| | jsimplements |

* @implements {$namespace$.$implements$}

namespace: The name of this class’ namespace
implements: The name of the implemented interface

| | jsinherits |

goog.inherits($namespace$.$classname$, $namespace$.$inherits$);

namespace: The name of this class’ namespace
classname: The name of this class
inherits: The name of the inherited class

| | jsinterface |

/**
 * @fileoverview $interfacecomments$
 *
 */
goog.provide('$namespace$.$interfacename$');
goog.require('$require$');
/**
 * @interface
 */
$namespace$.$interfacename$ = function() {};
$namespace$.$interfacename$.prototype.$methodname$ = function() {};

interfacecomments:
namespace: The name of this interface’s namespace
interfacename: The name of this interface
require: Classes to import
methodname: A method definition in this interface.

| | jsparam |

/**
 * @param {string} $param1$ A sample parameter.
 */

param1: The name of this parameter.

| | jsparaminline |

* @param {string|number=} $param1$ A sample parameter.

param1: The name of this parameter.

| | jsprivate |

		/**
		 * @type {$typename$}
     * @private
     */
    this.$attrname$ = $declaration$;

typename: The name of thisattribute’s type
attrname: The name of this attribute
declaration: The initial declaration of this attribute

| | jsprivateinline |

* @private

| | | jsprivatevar |

		/**
		 * @type {$typename$}
     * @private
     */
    var $attrname$ = $declaration$;

typename: The name of this attribute’s type
attrname: The name of this attribute
declaration: The initial declaration of this attribute

| | jsprotected |

		/**
		 * @type {$typename$}
     * @protected
     */
    this.$attrname$ = $declaration$;

typename: The name of this attribute’s type
attrname: The name of this attribute
declaration: The initial declaration of this attribute

| | jsprotectedinline |

* @protected

| | | jsprotomem |

		/**
 * @param {*=} $param1$
 */
$namespace$.$classname$.prototype.$methodname$ = function($param1$) {
		return this.member * args;
};

namespace: The name of this class’ namespace
classname: The name of this class
methodname: The name of this method
param1: The name of the sameple parameter

| | jsprovide |

goog.provide('$namespace$.$classname$');

namespace: The name of this class’ namespace
classname: The name of this class

| | jsrequire |

goog.require('$namespace$.$require$');

namespace: The name of this class’ namespace
require: Classes to import

| | jsreturn |

* @return {string}

| | | jssubclass |

/**
 * @fileoverview $classcomments$
 *
 */
goog.provide('$namespace$.$classname$');
goog.require('$require$');
/**
 * @constructor
 * @extends {$namespace$.$inherits$}
 * @param {string} $param1$ A sample parameter.
 */
$namespace$.$classname$ = function($param1$) {
	$contents$
};
goog.inherits($namespace$.$classname$, $namespace$.$inherits$);

classcomments: Comments describing this class
namespace: The name of this class’ namespace
classname: The name of this class
inherits: The name of the inherited class
require: Classes to import
param1: The name of the first constructor parameter.
contents: The contents of the class.

| | jstypedef |

/** @typedef {$type$} */
$namespace$.$typedefname$;

namespace: The name of this class’ namespace
type: The composite type of this definition
typedefname: The name of this typedef

License

MIT

Development

If you are interested in helping mantain the source code, let me know and we’ll organise something.

Mantaining the code is very straight forward simply:

Download the latest source.
Open the solution in visual studio
Edit the snippets in the \snippets directory
F5 to build a new VSI file and the supporting documentation
Install the VSI as described above to test your changes

Guido Tapia Software Development Manager PicNet Pty Ltd

Annotated, Google Closure Javascript Compiler - Visual Studio Snippets