Setting up Prettier along ESLint

In my previous article “ESlint configuration on Meteor-React project” I showed you how you can install and configure ESLint for automatically enforcing code-style to your Javascript code. With Prettier you can take this one step further and have Prettier do the actual formatting part of your code style.

This is an article on how you can easily integrate Prettier into your project in combination with ESLint.

Prettier vs ESLint

ESLint is concerned both for code quality and code formatting styles.

Prettier is only concerned with the formatting styles of your code.

So eventually you can keep ESLint for code quality and use Prettier for formatting your code.

Install Prettier

You should install Prettier pinned to a specific version. The creators most probably will introduce stylistic changes between releases. So you don’t want to automatically update your Prettier package, before you check it.

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

Integrating with ESLint

By integrating we mean that each time you run ESLint, it will automatically run Prettier checks and report any non-compliances along with the normal ESLint issues. For this you will have to install eslint-plugin-prettier.

1
npm install --save-dev eslint-plugin-prettier

Then bind the plugin to ESLint via ESLint configuration.

.eslintrc.json

1
2
3
4
5
6
{
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error"
}
}

Disable ESLint formatting rules

Since now you will be using Prettier for code styling (not quality), you should disable the styling rules of ESLint so you don’t have conflicts between the packages. You don’t want ESLint to complain about styles that were fixed by Prettier.

The easiest way to do this, is to install eslint-config-prettier.

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

and in .eslintrc.json

1
2
3
{
"extends": [..., "prettier"]
}

Re-enabling some ESLint Rules

Now Prettier has disabled styling rules from ESLint but in addition some other quality rules, that MAY conflict. So you may want to re-enable these rules again in ESLint. In addition there are some configurations/rules between the two packages that need to be configured properly so they work together.

I urge you to read the special rules documentation and re-enable rules and make adjustments to your needs.

ESLint rules can be re-enabled in .eslintrc.json config file. Prettier configuration can be stored in .prettierrc.json file.

My preffered .eslintrc.json (see curly, max-len, no-confusing-arrow rules):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
{
{
"extends": [
"@meteorjs/eslint-config-meteor",
"prettier"
],
"plugins": ["prettier"],
"rules": {
"prettier/prettier": "error",
"indent": [
"error",
4
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"always"
],
"no-console": "off",
"import/prefer-default-export": "off",
"curly": [
"error",
"all"
],
"max-len": [
"error",
{
"code": 80,
"ignoreUrls": true
}
],
"no-confusing-arrow": [
"error",
{
"allowParens": false
}
]
}
}

And my preffered .prettierrc.json file:

1
2
3
4
{
"tabWidth": 4,
"singleQuote": true
}

Calling Prettier manually

You can setup an npm script to scan your code and prettify it:

package.json

1
2
3
4
5
{
"scripts": {
"pretty:write": "node_modules/.bin/prettier --write './**/*.{js,jsx,scss}'"
}
}

It write directly to the files and make changes. So better to have committed you changes before you ‘prettify’ them. So you can revert back.

If you want to exclude specific folders/files from the script, you can setup a .prettierignore file:

.prettierignore

1
2
dist/
node_modules/

Git Hooks

A recommended approach is to ‘hook’ Prettier with git so you can prettify your files when you commit your changes.

There are various solutions to this and you can explore them here: https://prettier.io/docs/en/precommit.html

Precise-Commits

The precise-commits package will trigger Prettier only for lines that you changed during commit. This can be a very convinient approach for large projects with an established code base, which you want to prettify in stages.

You can install it along with husky package to hook it into git.

1
npm install precise-commits husky@next --save-dev

And then hook it to git:

package.json

1
2
3
4
5
6
7
{
"husky": {
"hooks": {
"pre-commit": "precise-commits"
}
}
}

Each time you commit your changes, the script will run and prettify your changes (thus needing an additional commit).

VSCode plugin

If you are using VSCode editor you can alwasy install the appropriate plugin so you prettify your code while you are writing it.

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode