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

Jun, 03, 2010

1

SHARE THIS