对基于 class 的 vue 组件（模板和打字稿）使用不同的 linter 配置

Question

如何正确设置 linting with prettier 和 vue linters with 运行导致 vue 文件与 typescript 代码发生冲突？

一个例子：

默认值：右括号（在本例中 --> 右括号）在下一行。

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

我想要右括号在同一行:

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

Eslint 配置：

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"
  },
};

更漂亮的配置：

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

添加 vue linting 规则以更改右括号:

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

这会导致 vue/html-closing-bracket-newline 和 prettier/prettier 之间发生冲突。对于这种情况，有没有办法否决 prettier ？还是必须同时配置 vue 和 prettier？或者有没有更好的方法在 vue 开发中组合 linters？我根本不喜欢两种不同格式化程序之间的组合。

有没有办法让不同的 linter 处理一个 vue 文件的不同段？

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

Answer 1

深入研究所有提到的 linter 配置后：目前，没有合适的方法将 prettier 与 vue linting 规则结合起来而不运行引起冲突，因为 prettier 在撰写本文时不允许这样的配置。它开箱即用，但是一旦为 vue 模板处理定义了其他规则，两个格式化程序运行就会发生冲突（定义规则后的 vue 格式，prettier 会再次尝试覆盖它）。

在我看来，prettier 做得很好，但由于缺少配置/跳过选项，与运行相比，它不是其他格式化程序的好搭档。因此，在我的例子中，我删除了 prettier 作为格式化程序，并使用 eslint-typescript 和 eslint-vue 规则将 linting 限制为纯 eslint。这在配置中需要做更多的工作，但允许更多自定义格式/linting 而不会发生任何冲突。

eslint 配置文件：

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

对基于 class 的 vue 组件（模板和打字稿）使用不同的 linter 配置

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

eslint

vue.js

prettier