Prettier with linters

Recently I started using prettier in my side projects and for those who don’t know what prettier is; it is an opinionated code formatter. I highly encourage you to check it out.

prettier’s documentation is a great place to get started, but when trying to set it up for a “real project” I couldn’t find any complete examples with linters. If not correctly configured, your linter of choice and prettier will be at war about formatting your code.

In my case I was using:

• TypeScript with tslint
• CSS with stylelint

After some digging and playing around, I got the previously mentioned linters playing nice with prettier.

To save the next person who tries to do this a few hours, I thought I would share my minimal setup on GitHub. Simply:

• Clone the project.
• Open up one of the folders e.g. tslint.
• Install the dependencies with npm or yarn.
• Run the linter command with “npm run lint-ts” or “yarn run lint-ts” (Replace lint-ts with lint-css for stylelint).

If everything worked as expected, you should have some linting errors.

There you go. Happy coding :)