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

问题描述

我该如何正确地设置漂亮的lint和vue的短毛绒，并在使用和打字稿代码的vue文件中发生冲突？

一个例子：

默认值：右括号（在本例中为-> 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-closing-bracket-newline与漂亮/漂亮之间的冲突。有没有办法在这种情况下推翻漂亮？还是我必须同时配置Vue和更漂亮？还是在vue开发中将短毛绒结合起来的一般更好的方法？我根本不喜欢两个不同格式化程序之间的组合。

有没有办法让不同的短毛猫处理vue文件的不同部分？

<template>->由vue推荐/推荐
<script lang="ts">->由漂亮/推荐//漂亮/ @ typescript-eslint

解决方法

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

我认为，漂亮的表现不错，但由于缺少配置/跳过选项，因此不是与其他格式化程序一起运行的好伙伴。因此，以我为例，我删除了更漂亮的格式化程序，并使用eslint-typescript和eslint-vue规则将linting限制为纯eslint。这在配置上需要做更多的工作，但是可以进行更多自定义的格式设置/ lint，而不会发生任何冲突。

eslint conf：

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

eslint eslint prettier vue.js