如何在 vue-cli-service lint 中关闭 HTML 属性的大小写更正？

Question

当我运行npm run lint（从 package.json 调用"lint": "vue-cli-service lint"）时，我在 HTML 属性中得到以下更改：

-      :auth0Login="auth0Login"
+      :auth0login="auth0Login"

这破坏了代码，我不希望这种情况发生。我尝试了以下规则来防止它：

      "vue/camelcase": "off",
      "vue/name-property-casing": "off",
      "vue/custom-event-name-casing": "off",
      "vue/component-definition-name-casing": "off",
      "vue/prop-name-casing": "off",
      "vue/component-name-in-template-casing": "off",

这些都不起作用，这并不奇怪，因为它们都没有指定 HTML 属性。这是我能找到的所有与外壳有关的东西。

我知道 linting 并不是绝对必要的，而且开始感觉它产生的问题多于它解决的问题，但如果有人知道解决方案，我仍然想让这项工作发挥作用。

package.json 中 eslintConfig 的 Pastebin：https://pastebin.com/h52YxjRd

Answer 1

这是因为vue/attribute-hyphenation规则

\n

vue/属性连字符

\n

\n

• 对模板中的自定义组件强制执行属性命名样式

  \n
\n

• 此规则包含在所有“plugin:vue/vue3-strongly-recommished”、“plugin:vue/strongly-recommished”、“plugin:vue/vue3-recommished”和“plugin:vue/recommished”中

  \n
\n

\n

例子 ：

\n

\r\n

\r\n

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>\n<template>\n      <!-- \xe2\x9c\x93 GOOD -->\n      <MyComponent my-prop="prop" />\n      <!-- \xe2\x9c\x97 BAD -->\n      <MyComponent myProp="prop" />\n</template>

\r\n

\r\n

\r\n

\n

您可以通过在规则中添加以下行来忽略此功能

\n

rules: {\n"vue/attribute-hyphenation": "off"\n}\n

\n

官方文档： https://eslint.vuejs.org/rules/attribute-hyphenation.html

\n