Firebug Coding Style

From FirebugWiki

(Difference between revisions)
Jump to: navigation, search
(Control Structures)
Line 39: Line 39:
...
...
</pre>
</pre>
-
 
-
 
-
=== Constants ===
 
-
 
-
Constants should be capitalized as follows
 
-
 
-
<pre>var MY_CONSTANT = true;</pre>
 
-
 
-
Use <code>var</code> instead of <code>const</code> since the code can be also used in browser environment where ''const'' is not supported.
 
Line 82: Line 73:
}</pre>
}</pre>
-
Control structures should look like as follows (also notice the spacing between keyword and brackets):
+
Control structures should look like as follows (also notice the spacing between a keyword and left bracket):
<pre>
<pre>
Line 137: Line 128:
-
=== Example File ===
+
== Naming ==
 +
 
 +
=== Functions and Methods ===
 +
Functions should use camelCase but should not capitalize the first letter.
 +
 
 +
<pre>
 +
function foo()
 +
{
 +
}
 +
</pre>
 +
 
 +
<pre>
 +
function myFoo()
 +
{
 +
}
 +
</pre>
 +
 
 +
<pre>
 +
myObject.prototype = ()
 +
{
 +
    myMethod: function()
 +
    {
 +
    }
 +
}
 +
</pre>
 +
 
 +
 
 +
=== Objects ===
 +
Constructors for objects should be capitalized and use CamelCase
 +
 
 +
<pre>
 +
function ObjectConstructor()
 +
{
 +
}
 +
</pre>
 +
 
 +
<pre>
 +
Firebug.MyModule = extend(Firebug.Module,
 +
{
 +
}
 +
</pre>
 +
 
 +
 
 +
=== Constants ===
 +
Constants should be capitalized as follows
 +
 
 +
<pre>var MY_CONSTANT = true;</pre>
 +
 
 +
Use <code>var</code> instead of <code>const</code> since the code can be also used in browser environment where ''const'' is not supported.
 +
 
 +
 
 +
=== Variables ===
 +
Variable should use camelCase and not capitalize the first letter.
 +
 
 +
var thisIsMyVariable = true;
 +
 
 +
 
 +
=== Prefixes ===
 +
Firebug codebase doesn't any prefixes for member fields.
 +
 
 +
 
 +
== Good Practices ==
 +
 
 +
=== Vertical Indentation ===
 +
Method defintions  should be separated by a new line. Note the new line between ''initialize'' and ''shutdown'' methods.
 +
 
 +
<pre>
 +
Firebug.MyModule = extend(Firebug.Module,
 +
{
 +
    initialize: function()
 +
    {
 +
    },
 +
 
 +
    shutdown: function()
 +
    {
 +
    }
 +
});
 +
</pre>
 +
 
 +
Also portions of code logically belonging together should be separated by a new line. Note the new line between ''super.initialize'' and ''this.onMutateText''.
 +
 
 +
<pre>
 +
initialize: function()
 +
{
 +
    super.initialize.apply(this, arguments);
 +
 
 +
    this.onMutateText = bind(this.onMutateText, this);
 +
    this.onMutateAttr = bind(this.onMutateAttr, this);
 +
    this.onMutateNode = bind(this.onMutateNode, this);
 +
}
 +
</pre>
 +
 
 +
 
 +
== Example File ==
Example of a typical Firebug file implementing a module object.
Example of a typical Firebug file implementing a module object.

Revision as of 08:31, 20 January 2011

This document attempts to explain the basic styles and patterns, that are used in Firebug codebase. New code should try to conform to these standards, so that it is as easy to maintain as existing code. Of course every rule has an exception, but it's important to know the rules nonetheless!

Contents

Resources


Formatting Code

Whitespace

No tabs. No whitespace at the end of a line.

Line Length

100 characters or less.

Indentation

Four spaces per logic level.

Licence

Files should include a license note at the first line of the file:

/* See license.txt for terms of usage */
...

In case of a XML files (e.g. in overlays), this must be after XML declaration, for example:

<?xml version="1.0"?>
<!-- See license.txt for terms of usage -->
...

In case of a *.properties or *.manifest files, this must be commented using # character.

# See license.txt for terms of usage
...


Control Structures

Existing Firebug codebase uses braces on the next line, like as follows:

function foo()
{
    // ...
}

Yes, there can be exceptions and K&R style can be preferred in some cases. For example, definition of a config object.

var foo = { prop1: "value1" };

var bar = {
    prop1: "value1",
    prop2: "value2",
};

Anyway, class and functions definitions should always have the braces on the next line as follows:

Firebug.MyModule = extend(Firebug.Module,
{
    initializeUI: function()
    {
    },
});
function myFunction()
{
    // ....
}

Control structures should look like as follows (also notice the spacing between a keyword and left bracket):

if (...)
{
}
else if (...)
{
}
switch (...)
{
    case 1:
    {
    }
}
for (var i=0; i<10; i++)
{
}
try
{
}
catch (err)
{
}

Firebug prefers no braces if they are not necessary.

if (...)
    dump(true);
else
    dump(false);

Horizontal Lines

Sometimes is helpful to divide portions of a file by a horizontal line. For this, you should use following comment (100 characters long):

// ********************************************************************************************* //

Firebug codebase also uses following horizontal separator for dividing members of one object (this separator uses indentation (4 spaces) since it's used within an object scope that is indented (100 characters long).

    // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * //


Naming

Functions and Methods

Functions should use camelCase but should not capitalize the first letter.

function foo()
{
}
function myFoo()
{
}
myObject.prototype = ()
{
    myMethod: function()
    {
    }
}


Objects

Constructors for objects should be capitalized and use CamelCase

function ObjectConstructor()
{
}
Firebug.MyModule = extend(Firebug.Module,
{
}


Constants

Constants should be capitalized as follows

var MY_CONSTANT = true;

Use var instead of const since the code can be also used in browser environment where const is not supported.


Variables

Variable should use camelCase and not capitalize the first letter.

var thisIsMyVariable = true;


Prefixes

Firebug codebase doesn't any prefixes for member fields.


Good Practices

Vertical Indentation

Method defintions should be separated by a new line. Note the new line between initialize and shutdown methods.

Firebug.MyModule = extend(Firebug.Module,
{
    initialize: function()
    {
    },

    shutdown: function()
    {
    }
});

Also portions of code logically belonging together should be separated by a new line. Note the new line between super.initialize and this.onMutateText.

initialize: function()
{
    super.initialize.apply(this, arguments);

    this.onMutateText = bind(this.onMutateText, this);
    this.onMutateAttr = bind(this.onMutateAttr, this);
    this.onMutateNode = bind(this.onMutateNode, this);
}


Example File

Example of a typical Firebug file implementing a module object.

/* See license.txt for terms of usage */

FBL.ns(function() { with (FBL) {

// ********************************************************************************************* //
// Constants

var MY_CONSTANT = true;

// ********************************************************************************************* //
// Module Implementation

Firebug.MyModule = extend(Firebug.Module,
{
    // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * //
    // Initialization

    initializeUI: function()
    {
    },

    // * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * //
    // Toolbar Actions

    myButtonHandler: function()
    {
    }
});

// ********************************************************************************************* //
// Registration

Firebug.registerModule(Firebug.StartButton);

// ********************************************************************************************* //
}});

The code should also have comments.

Personal tools