How to enable prettier and setup it for running on file save for VS code in your JS project

Prettier is code formatter which can format your code automatically on file save. It can not only format, but fix code according to your eslint or tslint rules.

Assume that we have JS project and we need to enable there automatic formatting.

First of all we have to install prettier as dependency into the project. Execute in project directory where package.json is located:

npm install --save-dev --save-exact prettier

or using yarn:

yarn add prettier --dev --exact

Now we need to enable formatting on save in Visual Studio Code.

Navigate to setting using menu File -> Preferences -> Settings or using Ctrl+, key combination. Then search in settings for Format On Save and enable it.

format on save

At this moment everything should work. Try to navigate to some .ts or .js file, reindent some row and hit Ctrl+S.