Prettier Space Wars

Prettier is formatting most of my front-end work nowadays. Its great to finally don't have to care about syntax. I'm a lazy developer and these tools just makes work easier.

With that said, I've had an issue with JSON files. There are different standards for spaces in composer.json and package.json files. In the PHP community it is common to use four spaces in your composer.json file and with npm it automagically indents it with two spaces.

I tried to find a solution using the Prettier extension in Visual Studio Code but without luck. I gave up. It was a small price to pay. Composer didn't seem to care if I used four or two spaces. From then on I used two spaces everywhere. Turning on format on save in the settings.

"[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true

Just last week it occurred to me that I've been looking for a solution with the wrong tool. The Prettier extension can't solve this by itself (that I know of). I read through the documentation and found that you can configure Prettier with the .editorconfig file. This means I can specify a specific indentation for composer.json files.

indent_size = 2

indent_size = 4

indent_size = 4

Now my front-end code is indented using two spaces and back-end code using four ✨