Shortcut of the month: CTRL + ALT + J (eclipse)

I don’t actually know if there will always be a shortcut of the month or even one a week, but recently I found a new shortcut, which I would like to share with you. Even after finding it, I couldn’t find any documentation about it in the internet.

The shortcut

But now let’s introduce the shortcut. I work a lot with eclipse (especially with the plugin Aptana). That’s where I accidently found the new shortcut:

CTRL + ALT + J

But what does the shortcut actually do? With the shortcut you can convert multiple lines into a single line statement of code. It deletes line breaks and tabs (or multiple whitespaces) at the beginning of the line. All previous lines will be separated with a single whitespace in only one line.

An example

Let’s take a look on an example you’ll probably have regularly. We take a tiny CSS file as input (my current footer styles):

/* footer styles */
#footer {
    margin: 0;
    padding: 0 0 0 20px;
    list-style: none;
    color: white
}

#footer li {
    margin: 0;
    padding: 10px 0;
    font: 11px Arial, Helvetica, sans-serif;
}

#footer li.left {
    float: left;
    width: 35%;
}

#footer li.right {
    float: right;
    width: 65%;
}

Quite often you would like to write styles more compact. Therefore you usually have to manually delete all the line breaks and tabs (or use some complex search and replace rules with regular expressions). But with the shortcut it all goes very easy. You just have to make e.g. the lines 1 to 6 and use the shortcut CTRL+ALT+J on the selection. You repeat this with all the following definitions in the brackets. Afterwards you can delete the line breaks between the definitions and you will get the following result:

/* footer styles */
#footer { margin: 0; padding: 0 0 0 20px; list-style: none; color: white }
#footer li { margin: 0; padding: 10px 0; font: 11px Arial, Helvetica, sans-serif; }
#footer li.left { float: left; width: 35%; }
#footer li.right { float: right; width: 65%; }

Another Example

The shortcut can be used for other types of languages and not only for CSS. Good examples are switch-case blocks or XML structures. You can use the shortcut to format the source code more readable:

Switch-case before:

switch($var){
	case 1 :
		func1();
		break;
	case 2 :
		func2();
		break;
	case 3 :
		func3();
		break;
	default :
		func();
}

Switch-case after:

switch($var){
	case 1 : func1(); break;
	case 2 : func2(); break;
	case 3 : func3(); break;
	default : func();
}

As you can see, you can use the shortcut on many constructs to make them simpler and more readable. A nice application is minifying CSS code. Therefore you simple mark all the CSS code in the file and use the shortcut. In languages with single line comment, you can’t use it to minify the code as everything after the first comment would be commented out.

Boundaries of the shortcuts and conclusion

The shortcut cannot be used, when line breaks are necessary. It can also lead to problems with HTML as it might add additional whitespaces in the text. But for constructs where whitespaces have no effect on the execution, it can make the code more readable. It is some kind of reverse shortcut to the CTRL+SHIFT+F shortcut which will format the source code nicely. I really like this new shortcut and I hope it can also help you to save some time.

Posted by

Bernhard is a full time web developer who likes to write WordPress plugins in his free time and is an active member of the WP Meetups in Berlin and Potsdam.

Leave a Reply

Your email address will not be published. Required fields are marked *