Problem with right aligned code comments

Commenting code is great as it gives more information to other programmers what your code actually does. But sometimes we can be a little too fancy with code comments. For example:

$(".menu-main").dropDownMenu({ subMenuEffect : { type : 'fade', // fade | expand openSpeed : 300, // Milliseconds closeSpeed : 150, // Milliseconds delay : 300 // Milliseconds } });

The above code is commented quite well. It gives the correct information about each property but the formatting makes it difficult to change values. For example let's say we want to change our close speed to 1000 and our type to expand.

$(".menu-main").dropDownMenu({ subMenuEffect : { type : 'expand', // fade | expand openSpeed : 300, // Milliseconds closeSpeed : 1000, // Milliseconds delay : 300 // Milliseconds } });

Suddenly our comments aren't so fancy now. Each indentation is different which makes it look messy. We can do two things from this point on. One is to leave the code as is, this is fair enough if you are busy, lazy or just don't care. The second solution is to fix the problem and indent the comments so they are all equal again. You may do this if you have a lot of time or are a perfectionist which good programmers are.

But in the end it was the creator of the above code that caused problems. By placing comments certain space characters to the right, we are causing problems for programmers later on that edit your code. Therefore we suggest you avoid aligning commented code to the right.