Autoformatting Code - The Good And The Bad

This is why you should not always use autoformatting when coding.

583 views

By. Jacob

Edited: 2019-10-11 00:54

Doing my studies in Multimedia Design, I was introducerede to Visual Studio Code, which has a feature that will autoformat code when you hit save. This feature is simply amazing, but it can also cause problems, and sometimes it might even cause your code to break.

In the past, I would mostly use Eclipse to edit larger projects, but this did not have autoformatting enabled by default, which meant I had to manually indent everything with spaces.

If you have been coding for a while, you will likely have developed your own preferences about formatting. Personally, I preferred using spaces for indentation, and also leaving curly brackets "{}" on the same line as the function deceleration, like this:

function say_hallo() {
  // Code here ....
}

The plugin for PHP in Visual Studio Code automatically inserts a newline "\n" before the opening curly bracket, resulting in this akward setup:

function say_hallo()
{
  // Code here ....
}

The difference is minisule, but when you have gotten used to the former, it can be quite annoying having to change your style. Eventually, I decided to settle with the latter, since it only appears to affect functions and not if statements. The increased productivity of autoformatting is just too great to miss out on, so I will gladly trade it for a few lines of screen-real-estate.

If you work in a team, it will probably be best to make sure everyone uses the same coding standard, so you will not get too many false commits on your code repository.

Autoformatting for PHP scripts is provided by the phpfmt extension, while prettier takes care of HTML, CSS and JavaScript.

When I write CSS, I prefer not using any formatting at all. I usually place CSS selectors on a single line in order to have more code on the screen:

.hay {padding:0;margin:0;background:none;position:absolute;top:0;right:0;bottom:0;left:0;}
.goodbye {background:#000;position:relative;}