painless code formatting

Photo by Samantha Gades on Unsplash

every software development team out there, has this phase of discussion on code formatting, which standards or style-guide to follow, tab width — should it be 2 spaces or 4 spaces, max line length and so on. Once we get over this, we are confronted with myriad of IDEs. Developers have their favourite code editors and they like to bring it with them.

Then comes the confusion of creating different editor configurations capturing the coding style we all agree upon & make it work uniformly across different code editors & that can be really painful and this whole process can take a while.

The good news is, we have this impressive tool called Prettier which can solve all above concerns and it is free! It is an opinionated code formatter, meaning we need not have to worry about the coding style itself. It comes with a recommended style for different languages. But if that is not our cup of coffee, it also allows us to tailor it. Below you can find how to set it up in just a few minutes.

1. install prettier

npm install --save-dev prettier

2. create prettier conf files

you can create a dot file named, .prettierrc

{
  "trailingComma": "es5",
  "tabWidth": 4,
  "semi": true,
  "singleQuote": true
}

3. install eslint conf prettier

this library instructs "eslint"to not get in the way of prettier and instead complement it. After this, they both will work seamlessly. eslint still continues to show syntax errors and prettier will take care of formatting the code. :)

npm install --save-dev eslint-config-prettier

now, add "prettier" to the "extends" array in your .eslintrc.* file. Make sure to place it last, so it gets to override other configs. Like so:

{
  "extends": [
    "some-other-config-you-use",
    "prettier"
  ]
}

4. add the script to format your code

add the following script in your package json to allow prettier to do its thing! after this you can format your code even without a code editor! it would do it just as good as your editor does it:

"scripts": {
    "format": "prettier --write src/**/*.{ts,js,css,html}",
}

5. the icing on the cake

Here comes the final touch, with this, you can ask your favourite IDE to format your code automatically whenever you make changes to a file. The screen below shows how you could do it for JetBrains family of IDEs (WebStorm, IntelliJ IDEA, etc.)

fix formatting on save

There you go! formatting code & following the style-guide should no longer be your problem.

Let prettier look after it. For other IDEs you can refer the docs from Prettier: https://prettier.io/docs/en/editors.html

Next steps

from here you can also improve it to format your code each time before you commit your code to a git repo using pre-commit/pre-push git hooks via husky.

npm install husky --save-dev

"husky": {
  "hooks": {
    "pre-commit": "npm run format --staged && ng lint && npm test",
    "pre-push": "ng build --aot true"
  }
}

should you need to ignore any files

create a dot file called .prettierignore& add the files/folders you would like to ignore

dist
e2e/**
package.json
package-lock.json
yarn.lock