In all my other posts I intend to continue to avoid making anything specific to the development environment you use. There are loads out there and they all offer varying degrees of support, cost varying amounts and hog various amounts of you computers resources. Some basic ones you may want to consider if you don’t want a full IDE are notepad2 and notepad++.  Both are available in portable forms, and offer syntax highlighting but very little else.

Visual Studio

For those that want as much help as is available, I’ve found it impossible to beat Microsoft Visual Studio.  There are free versions available, as well as free licences for students.

You’ll want to use file->new->website or file->open->website to start using it with html5 development.  You’ll also want to delete everything it adds if you’re using the file->new option.  By default it will add an asp file as the home page and also web.config files.  None of these are necissary if you plan on coding in pure html and JavaScript.  Typically you’ll want some server side code at some point, but that could be node.js, php, asp.net, java or any of a huge array of alternatives.

Out of the box, Visual Studio will attempt to give you some assistance.  It will attempt to work out what would be valid options for what to type next so that it can show you and offer you the ability to pick them by simply pressing tab.  Microsoft call this Intelli Sense, other IDEs refer to it as code completion.  Part of JavaScript’s nature as a dynamic language makes this a difficult task, but we can offer it some help.

Reference Paths

You can tell Visual Studio where to look to find source code that is accessible by giving it references.  These will then be included in what intellisense displays.  These reference paths are always relative.  The easiest way to deal with this is probably to reference the index.html file of your application by placing the following at the top of your files.

/// <reference path="~/index.html" />

Unfortunately this has to go above the “use strict” declaration. You may therefore want to put the “use strict” declaration inside each function instead.

Comments

If you comment your code in a special way, Visual Studio will know what it means.  To do this just make the first few lines of each functions contain special comments.

Start with the summary comment

///<summary>A brief description of what my function does</summary>

Then have a comment for each parameter the function takes

///<param name="parameterName" type="parameterType">A description of what the parameter is for.</param>

Note that the parameter name must exactly match the name of the parameter your function takes.  The type can actually be any text.  Being a dynamic language, javascript doesn’t really have any fixed names for types so it’s up to you whether you use integer or number, text or string, object or thing etc.

Finally, if your method returns something, include the returns comment.

/// <returns type="returnType" />

There are short cuts for creating each of these in the form of code snippets.  Type in oen of the following followed by two tabs and it will enter the appropriate comment for you (ready to be filled in).

  • summary
  • param
  • returns

As an example of code completion in action take a look at the following example:

demonstration of intellisense for a function in visual studio.

Note that sometimes it’s necessary to save for visual studio to pick up the changes.

Formatting

The final bit of help Visual Studio offers that I want to talk about today is it’s ability to correct your indentation.  As you type Visual Studio will attempt to guess what indentation it should be using, but it struggles when you’ve typed the opening of a function or block or whatever, but not the closing of it.  The solution is to tell it to recompute all the indentations at a time when you believe your code to be broadly correct.  To do this simply old down ctrl and press e followed by d.  Alternatively you can go to Edit -> Advanced -> Format Document but I’d suggest that if you only learn one keyboard short-cut, it should be that one.

Advertisements