Skip to content

attribute-hyphenation doesn't work with TSX #1742

Open
@Maxim-Mazurok

Description

@Maxim-Mazurok

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: 6.8.0
  • eslint-plugin-vue version: 7.12.0
  • Node version: v16.13.0
  • Operating System: Windows 11

Please show your full configuration:

module.exports = {
  root: true,
  env: {
    node: true,
  },
  plugins: ["@typescript-eslint"],
  extends: [
    "plugin:vue/essential",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "@vue/prettier",
    "@vue/prettier/@typescript-eslint",
    "plugin:jest-formatting/strict",
    "plugin:@typescript-eslint/recommended",
  ],
  parserOptions: {
    ecmaVersion: 2020,
    project: "./tsconfig.eslint.json",
    extraFileExtensions: [".json"],
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "error" : "warn",
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "warn",
    "vue/no-unused-properties": [
      "warn",
      {
        groups: ["props", "data", "computed", "methods", "setup"],
      },
    ],
    "vue/match-component-file-name": [
      "error",
      {
        extensions: ["tsx"],
        shouldMatchCase: true,
      },
    ],
    "@typescript-eslint/no-floating-promises": "error",
    "unicode-bom": "error",
    "vue/attribute-hyphenation": ["error", "never"],
  },
  overrides: [
    {
      files: ["./jest/**/*.spec.ts?(x)"],
      plugins: ["jest"],
      extends: ["plugin:jest/recommended", "plugin:jest/style"],
      env: {
        jest: true,
      },
    },
  ],
};

What did you do?

<VDialog max-width={450} v-model={this.unsavedChangesDialogIsActive}>
// or
<VDialog max-width={450} vModel={this.unsavedChangesDialogIsActive}>

What did you expect to happen?
One of options to fail.

What actually happened?

No options failed:

DONE No lint errors found!

Also, I did this:

return utils.defineTemplateBodyVisitor(context, {
      VAttribute(node) {
        console.log(node); // << see if it gets called

in node_modules\eslint-plugin-vue\lib\rules\attribute-hyphenation.js and it didn't log anything.

Repository to reproduce this issue

https://github.com/Maxim-Mazurok/eslint-jsx-vue-props-repro
run yarn to install deps and npm run lint to lint
(also see the latest commit for the most relevant changes: Maxim-Mazurok/eslint-jsx-vue-props-repro@0cde244)

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions