Use different linter configurations for class based vue components (template and typescript)

Question

How can I properly setup linting with prettier and the vue linters with running into conflicts in vue files with and typescript code?

An example:

Default: closing bracket (in this case --> closing li) is in next line.

<template>
  <div>
    <li
      class="o-playtime__head__info__tags__item"
      v-if="playtimeItemObject.event.ageRecommendation"
    >
      ...
    </div>
  </div>
</template>

I want the closing bracket in the same line:

<template>
  <div>
    <li
      class="o-playtime__head__info__tags__item"
      v-if="playtimeItemObject.event.ageRecommendation">
      ...
    </div>
  </div>
</template>

Eslint configuration:

module.exports =  {
  root: true,
  env: {
    node: true
  },
  extends:  [
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint',
    'plugin:prettier/recommended',
    "plugin:vue/essential",
    "@vue/prettier",
    "@vue/typescript",
  ],
  parserOptions:  {
    parser: "@typescript-eslint/parser"
  },
};

Prettier configuration:

module.exports =  {
  semi:  true,
  trailingComma: 'all',
  tabWidth:  2,
};

Adding the vue linting rule to change the closing bracket:

rules: {
  "vue/html-closing-bracket-newline": ["error", {
    "singleline": "never",
    "multiline": "never"
  }]
}

This causes a conflict between vue/html-closing-bracket-newline and prettier/prettier. Is there a way to overrule prettier for this case? Or do I have to configure both vue and prettier? Or is there a general better way for combining the linters in vue development? I do not like the combination between two different formatters at all.

Is there a way to let different linters handle the different segments of a vue file?

<template> --> Linted by vue/recommended
<script lang="ts"> --> Linted by prettier/recommended // prettier/@typescript-eslint

Mikel Wohlschlegel Mikel Wohlschlegel · Accepted Answer · 2020-09-24T08:14:04

After digging deeper into all the mentioned linter configurations: Currently, there is no proper way to combine prettier with vue linting rules without running into conflicts, as prettier does not allow such configurations at the time of writing. It works out of the box, but as soon as there will be other rules defined for vue template handling, both formatters run into conflicts (vue formats after the defined rules, prettier tries to overwrite it again).

In my opinion, prettier does a good job, but is not a good partner to run beside other formatters due to missing configuration / skipping options. So in my case I removed prettier as a formatter and restrict linting to pure eslint with eslint-typescript and eslint-vue rules. This is a bit more work in configuration, but allows more customized formatting / linting without any conflicts.

eslint conf:

extends: [
  "plugin:vue/recommended",
  "eslint:recommended",
  "@vue/typescript/recommended"
],

Use different linter configurations for class based vue components (template and typescript)

1 Answers