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

【问题标题】：Use different linter configurations for class based vue components (template and typescript)对基于类的 vue 组件（模板和打字稿）使用不同的 linter 配置
【发布时间】：2021-01-09 08:14:00
【问题描述】：

如何正确设置 linting 与 prettier 和 vue linters 并在 vue 文件中与 typescript 代码发生冲突？

一个例子：

默认值：右括号（在这种情况下-->关闭li）在下一行。

<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-closure-bracket-newline 和 prettier/prettier 之间发生冲突。有没有办法在这种情况下推翻更漂亮的？还是我必须同时配置 vue 和 prettier？或者有没有一种更好的方法来结合 vue 开发中的 linter？我根本不喜欢两种不同格式化程序之间的组合。

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

<template> --> 由 vue 整理/推荐
<script lang="ts"> --> 由 prettier 整理/推荐 // prettier/@typescript-eslint

【问题讨论】：

标签： vue.js eslint prettier

【解决方案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"
],

【讨论】：