显示来自 Prettier 的 Vue CLI 警告的规则名称

Question

我为 Vue CLI 项目选择的预设有一些规则，会警告我 HTML 中的某些内容，如下所示：

warning: Replace `·title="Publicly·Visible"·:class="{·inactive:·!member.isPubliclyVisible·}">�</span` with `␍⏎··············title="Publicly·Visible"␍⏎··············:class="{ ·inactive:·!member.isPubliclyVisible·}"␍⏎··············>�</span␍⏎············` (prettier/prettier) at src\views\MemberList.vue:29:18:
  27 |             <span title="Archived" :class="{ inactive: !member.isArchived }">�</span>
  28 |             <span title="Honorary Member" :class="{ inactive: !member.isHonoraryMember }">�</span>
> 29 |             <span title="Publicly Visible" :class="{ inactive: !member.isPubliclyVisible }"> </span>
     |                  ^
  30 |             <span title="Student" :class="{ inactive: !member.isStudent }">�</span>
  31 |           </td>
  32 |         </tr>

我不同意此规则并想将其关闭。然而，从消息本身很难找出这是什么规则。

我想知道如何配置 Vue CLI 和/或 eslint 来告诉我规则是什么，这样我不仅可以设置此特定规则，而且将来如果我想关闭也可以设置其他规则。

如何找出与基于 vue-cli 的 eslint 警告相关的具体规则？

我当前的

.eslintrc.js

文件如下所示：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "@vue/prettier"],
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
  },
  parserOptions: {
    parser: "babel-eslint"
  }
};

当我运行

npm serve

时，我收到了引用的错误，它依次运行

vue-cli-service serve

。

Answer 1

到目前为止，Prettier 是否会列出影响代码块的规则的答案是“否”，根据 Prettier 人自己的说法：https://github.com/prettier/prettier/issues/6069。

为了总结链接的内容，有人提交了一个现已关闭的 GitHub 问题，要求提供一个标志来输出将应用于代码块的规则。可悲的是，Prettier 的人们并不理解这种需求。例如，他们建议使用

prettylint

，但

prettylint

只说明它将更改哪些行，而不说明原因。

鉴于与 Prettier 存储库相关的 1K+ 问题，这是 Prettier 无法满足的众多需求之一。