Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vue/require-component-is false positive #869

Closed
Hyzual opened this issue Apr 5, 2019 · 3 comments
Closed

vue/require-component-is false positive #869

Hyzual opened this issue Apr 5, 2019 · 3 comments

Comments

@Hyzual
Copy link

Hyzual commented Apr 5, 2019

[edit] It turns out this only happens for vue-eslint-parser@^6.0.0. The parsing changes cause this.

Tell us about your environment

  • ESLint version: v5.16.0
  • eslint-plugin-vue version: 5.2.2
  • vue-eslint-parser version: 6.0.3
  • Node version: v10.15.0

Please show your full configuration:

module.exports = {
    plugins: ["vue"],
    extends: [
    ],
    parser: "vue-eslint-parser",
    parserOptions: {
        parser: "babel-eslint",
        ecmaVersion: 2019,
        sourceType: "module"
    },
    rules: {
        "vue/require-component-is": "error"
    }
};

What did you do?
I tried linting the following component in my project using the following command line:

npx eslint Component.vue
// Component.vue
<template><component v-bind:is="a"/></template>

What did you expect to happen?
I expected the component to be valid and no error to be reported.

What actually happened?

$ npx eslint Component.vue 

/home/jmasson/dev/tuleap/Component.vue
  1:11  error  Expected '<component>' elements to have 'v-bind:is' attribute  vue/require-component-is

✖ 1 problem (1 error, 0 warnings)

The rule fails because the parsing changed with vue-eslint-parser v6

@Hyzual Hyzual changed the title vue/component vue/require-component-is false positive Apr 5, 2019
@Hyzual
Copy link
Author

Hyzual commented Apr 5, 2019

[edit] I edited the original post instead to narrow down the problem.
It turns out this is because I was using vue-eslint-parser v6

Even removing all the rules altogether and leaving only "eslint:recommended", "plugin:vue/recommended", I still get the require-component-is error:

/home/jmasson/dev/tuleap/PostActionsSection.vue
  2:1   warning  Expected indentation of 2 spaces but found 4 spaces            vue/html-indent
  2:5   error    Expected '<component>' elements to have 'v-bind:is' attribute  vue/require-component-is
  2:29  warning  Expected a space before '/>', but not found                    vue/html-closing-bracket-spacing

✖ 3 problems (1 error, 2 warnings)
  0 errors and 2 warnings potentially fixable with the `--fix` option.

LeSuisse pushed a commit to Enalean/tuleap that referenced this issue Apr 17, 2019
Part of request #13228 Upgrade dev dependencies April 2019 edition

No functional change expected.

Note to reviewer: I tried to fix as many errors as possible but there
are still errors such as:
The template root requires exactly one element  vue/valid-template-root

We should deal with those in dedicated patches.

Changes to the configuration:

Errors:
- vue/match-component-file-name. It enforces the "name" property and the
filename to be the same in Vue components.
- vue/require-direct-export. It enforces to use "export default {" in
Vue components.
- vue/order-in-components now produces errors instead of warnings

Disabled rules:
- vue/multiline-html-element-content-newline and
vue/singleline-html-element-content-newline have been disabled. They
were set to "warning" by the vue/recommended config, but they are more
annoying than useful. I would prefer to automatically format this with
Prettier when it works.
- vue/require-component-is has a bug [0] and is now disabled
- vue/no-unused-components is too flaky. On the CLI it reports false
positives, in the editor it doesn't report when it should (false
negatives). It's therefore disabled.

[0]: vuejs/eslint-plugin-vue#869

Change-Id: I35556cfaaa0d4a83172dde24be6ddb5e74d02d16
@dietergeerts
Copy link

Any progress on getting this resolved?

@ota-meshi
Copy link
Member

Thank you for this issue.

eslint-plugin-vue@5 and vue-eslint-parser@6 are not compatible. Please use eslint-plugin-vue@6.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants