A Prettier / ESlint / stylelint configuration

Posted on Sunday, December 22nd, 2019

Prettier is a tool that allows your code to be automatically formatted according to certain rules.

It is a great time saver, because you can paste your code in any way you like, and upon saving it will be prettified. This is especially valuable in a team environment. Prettier works with JavaScript files and Scss/CSS files, and it’s even possible to automatically sort properties in Sass, by using stylelint and stylelint-order.

This is the magic that happens when you save a file:

Scss

JavaScript

So I have created for my own reference a starter configuration that enables your projects to highlight errors and format code on save according to Prettier rules.

This is the content of the repository:

You will need the Prettier, Eslint and stylelint packages for VS Code.

You can find the code here: github.com/akmur/react-prettier-setup