Formatting with prettier and eslint

This doc serves to try and catch my thoughts and results of my research.

tl;dr

Everybody recommends using eslint for linting and Prettier for formatting. Eslint deprecates it's formatting rules. There's a Prettier configuration that puts attributes to new lines if more than two.

Situation

Description

There is a conflict between Prettier and Eslint, namely with the configuration vue/max-attributes-per-line. This configures that only a certain number of attributes in the HTML code are allowed before forcing it to be on a new line.

Now Prettier has the approach of allowing attributes on a single line as long as the line's not wider than 120 chars. Then it wraps it.

If we want to allow two in a row but not more, but then it's broken down then we have a conflict:

On save the editor will format the code with prettier
Then the linter might fix the code or at least fail the linting because it's not according to the rules.

Examples

This is a fine formatting for Prettier, because it's only 88 chars, even though it's three attributes:

        <div v-if="description" class="form-text" data-cy="text-area-input-description">
            {{ i18n.t(description) }}
        </div>

Whereas with the eslint rule set to 'vue/max-attributes-per-line': ['error', { singleline: 2, multiline: 1 }], this wouldn't be allowed.

Prettier

The thing about Prettier is that it's strongly opinionated and can't be configured much. This is considered by many a strength.

Prettier also seems to be a more powerful formatter than eslint.

Solutions

The default

The recommendation is generally:

use Prettier for formatting and linters for catching bugs!

The default setup of vue installs Prettier and eslint. It also includes a eslint plugin that turns off all the eslint formatting rules - handing it over to Prettier.

Disabling Prettier

One way would be to disable Prettier and let Eslint do the formatting. The drawback here would be that this goes against the recommended default as well as losing the power of Prettier.

Let prettier do the formatting

Another way would be to live with the way Prettier does the formatting, disabling the max-attributes-per-line rule altogether.

Apparently eslint is even moving away from being a formatter and recommends using a dedicated formatter.

prettier-eslint

There seems to be this project, which formats the code with Prettier but then runs it through eslint afterwards to enforce its rules. It seems though that this needs some customized way of doing things, including the installation of custom editor plugins.

singleAttributePerLine

There's also the possibilty to enable singleAttributePerLine in Prettier. This will always put them on single lines if there's more than two:

        <div class="text-area input-description">TEST</div>
        <div
            v-if="description"
            class="form-text"
            data-cy="text-area-input-description"
        >
            {{ i18n.t(description) }}
        </div>

Actually this would conform to the rule how it is right now: 'vue/max-attributes-per-line': ['error', { singleline: 1, multiline: 1 }],) and seems to be a good middle ground.

schtibe/formatting.md