vue/v-on-event-hyphenation does not fix events that start with @ (@update:modelValue, etc)

[maxsimych]

Checklist

• I have tried restarting my IDE and the issue persists.
• I have read the FAQ and my problem is not listed.

Tell us about your environment

• ESLint version: 7.32.0
• eslint-plugin-vue version: 7.18.0
• Node version: 14.15.4
• Operating System: Arch Linux

Please show your full configuration:

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/vue3-strongly-recommended",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
  ],
  parserOptions: {
    ecmaVersion: 2020,
    project: "./tsconfig.json",
  },
  rules: {
    "vue/v-on-event-hyphenation": [
      1,
      "always",
      {
        autofix: true,
      },
    ],
  },
};

What did you do?

        <MyComp
          :model-value="myModel"
          @update:modelValue="$emit('changeModel')"
        />

What did you expect to happen?
As rule vue/v-on-event-hyphenation set to autofix, I expect @update:modelValue to be fixed to @update:model-value

What actually happened?

Eslint shows that it can autofix that issue, but does not fix it.

That happens, because source code of this rule has this check before autofix:

// eslint-plugin-vue/utils/casing
function isKebabCase(str) {
  if (
    hasUpper(str) ||
    hasSymbols(str) ||
    /^-/u.exec(str) || // starts with hyphen is not kebab-case
    /_|--|\s/u.exec(str)
  ) {
    return false
  }
  return true
}

function hasSymbols(str) {
  return /[!"#%&'()*+,./:;<=>?@[\\\]^`{|}]/u.exec(str) // without " ", "$", "-" and "_"
}

Source code of hasSymbols function
So, we see, that inside hasSymbols regex includes symbol "@", and because of that check doesn't pass and autofix does not work.

If you willing, I can open PR with fix of this rule

[ota-meshi]

Thanks for posting this issue.
I think we need to specially handle event names that start with @update:.