require-v-for-key shouldn't be raised on slots

Akryum commented 7 years ago

Tell us about your environment

ESLint Version: 4.8.0
eslint-plugin-vue Version: 3.13.1
Node Version: 8.5.0

Please show your full configuration:

// http://eslint.org/docs/user-guide/configuring

module.exports = {
  root: true,
  parser: 'vue-eslint-parser',
  parserOptions: {
    'parser': 'babel-eslint',
    'ecmaVersion': 2017,
    'sourceType': 'module'
  },
  env: {
    browser: true,
    es6: true,
    jest: true,
  },
  globals: {
    '$': true,
    '_': true,
    'google': true,
    'gapi': true,
    'i18n': true,
    'storage': true,
    'locationUrlBase': true,
    'locationUrl': true,
    'browser': true,
    'screenfull': true,
    'OT': true,
    'Raven': true,
    'Cookies': true,
    'md5': true,
    'countdown': true,
    'videojs': true,
    'ifvisible': true,
    'YT': true,
    'platform': true,
    'ga': true,
    'analytics': true,
    'Parsley': true,
    'accounting': true,
    'Headway': true,
    'jscolor': true,
    'Simditor': true,
    'descriptionEditor': true,
  },
  extends: [
    // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
    'standard',
    'plugin:vue/recommended',
  ],
  // check if imports actually resolve
  // settings: {
  //   'import/resolver': {
  //     'webpack': {
  //       config: 'config/webpack/development.js'
  //     }
  //   }
  // },
  // add your custom rules here
  rules: {
    /*'no-console': 0,
    'comma-dangle': ['error', 'always-multiline'],
    'padded-blocks': 0,
    'spaced-comment': 1,
    'no-undef': 0,
    'func-names': 0,
    'no-multiple-empty-lines': [2, {
      'max': 2,
      'maxEOF': 2
    }],
    'max-len': [1, 200, 1, {
      'ignoreUrls': false,
      'ignoreComments': false
    }],
    'no-param-reassign': 1,
    'global-require': 0,
    'no-useless-escape': 0,
    'radix': 0,
    'consistent-return': 0,
    'no-lonely-if': 0,
    'import/extensions': 0,
    'import/newline-after-import': 0,
    'import/no-unresolved': 0, // To fix
    'import/no-extraneous-dependencies': 0, // To fix
    'object-curly-newline': 0,
    'prefer-destructuring': 1,*/

    'import/no-webpack-loader-syntax': 'off',

    'no-debugger': 'off',
    'comma-dangle': ['error', 'always-multiline'],

    // https://github.com/babel/babel-eslint/issues/517
    'no-use-before-define': 'off',

    // Vue

    'vue/html-end-tags': 'off', // Buggy
    // Error
    'vue/attribute-hyphenation': ['error', 'always'],
    'vue/name-property-casing': ['error', 'PascalCase'],
    'vue/no-multi-spaces': 'error',
    'vue/v-bind-style': 'error',
    'vue/v-on-style': 'error',
    'vue/no-shared-component-data': 'error',
    'vue/no-dupe-keys': 'error',
    'vue/no-reserved-keys': 'error',
    'vue/no-template-key': 'error',
    'vue/require-render-return': 'error',
    'vue/mustache-interpolation-spacing': 'error',
    // Warn
    'vue/order-in-components': 'warn',
    'vue/no-duplicate-attributes': 'warn',
    'vue/require-default-prop': 'warn',
    'vue/require-prop-types': 'warn',
    'vue/this-in-template': 'warn',
    'vue/no-async-in-computed-properties': 'warn',
    'vue/no-side-effects-in-computed-properties': 'warn',
    'vue/max-attributes-per-line': ['warn', {
      "singleline": 2,
      "multiline": {
        "max": 1,
        "allowFirstLine": false
      }
    }],
    'vue/require-valid-default-prop': 'warn',
  }
}

What did you do? Please include the actual source code causing the issue.

<template>
  <div>
    <slot
      v-for="item of items"
      :item="item"
    />
  </div>
</template>

What did you expect to happen?

No error.

What actually happened? Please include the actual, raw output from ESLint.

Failed to compile.

./app/frontend/common/vue/components/ItemsCarousel/ItemsCarousel.vue ]50;CurrentDir=/Users/guillaumechau/Documents/Projets/livestorm-container/livestorm-app ✘ https://google.com/#q=vue%2Frequire-v-for-key Elements in iteration expect to have 'v-bind:key' directives app/frontend/common/vue/components/ItemsCarousel/ItemsCarousel.vue:3:5     <slot      ^ ✘ 1 problem (1 error, 0 warnings)
Errors:
1 https://google.com/#q=vue%2Frequire-v-for-key

mysticatea commented 7 years ago

Thank you for the report.

However, I think this is intentional. We have two rules about the key attribute.

One is no-invalid-v-for rule. It reports elements which require key attribute but don't have. This rule is in order to prevent errors.
Another is require-v-for-key rule. It reports all repeated elements which don't have key attribute. This rule is in order to follow the recommendation of Vue.js team.

Akryum commented 7 years ago

Thanks for your answer! Slots are like templates abstract, they can't have a key. You will also get an error from Vue if a key is set on a <slot/>. So this is still a bug, since eslint-plugin-vue will complain about <slot/> not having a key, and then Vue won't compile your template since you have put a key on the slot (which is forbidden).

mysticatea commented 7 years ago

Oh, I see. Indeed, require-v-for-key has an exception for <template> elements because it isn't rendered. If <slot> also isn't rendered, require-v-for-key rule should not report <slot> elements as well.

vuejs / eslint-plugin-vue

require-v-for-key shouldn't be raised on slots #216