search

Shinigami92 / eslint-plugin-vue-pug-sfc

eslint plugin vue pug sfc
https://www.npmjs.com/package/eslint-plugin-vue-pug-sfc
MIT License
32 stars 4 forks source link

Bug: incorrectly requiring key on template v-for #136

Closed sid-6581 closed 2 years ago

sid-6581 commented 2 years ago

Info

Tool Version
Plugin 1.0.0-alpha.18
Eslint 8.4.1
Node 17.2.0
OS Windows 11

Eslint config

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    "plugin:vue/recommended",
    "plugin:vue-pug-sfc/recommended",
    "plugin:prettier/recommended",
    "eslint:recommended",
    "@vue/typescript/recommended",
    "prettier",
  ],
  parser: "vue-eslint-parser",
  parserOptions: {
    parser: "@typescript-eslint/parser",
    ecmaVersion: 2020,
    vueFeatures: {
      filter: true,
      interpolationAsNonHTML: false,
    },
  },
  rules: {
    "@typescript-eslint/no-shadow": "error",
    "@typescript-eslint/no-non-null-assertion": "off",
    "no-shadow": "off",
    "no-await-in-loop": "off",
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "prefer-destructuring": ["error", { object: false, array: false }],
    "max-classes-per-file": "off",
    "no-restricted-syntax": "off",
    "no-unused-expressions": "off",
    "arrow-body-style": ["error", "as-needed"],
    "no-plusplus": "off",
    "lines-between-class-members": ["error", "always", { exceptAfterSingleLine: true }],
    "vue/multi-word-component-names": "off",
    "vue-pug-sfc/component-name-in-template-casing": ["warn", "kebab-case"],
    "vue/html-self-closing": [
      "error",
      {
        html: {
          void: "always",
          normal: "always",
          component: "always",
        },
        svg: "always",
        math: "always",
      },
    ],
    "no-nested-ternary": "off",
    "no-return-assign": "off",
    "prettier/prettier": [
      "warn",
      {
        tabWidth: 2,
        printWidth: 150,
        pugAttributeSeparator: "none",
        pugSortAttributes: "asc",
        pugEmptyAttributes: "none",
      },
    ],
  },
};

Input

<template lang="pug">
div
  template(#[slot]="scope" v-for="(ignored, slot) of $scopedSlots")
    slot(:name="slot" v-bind="scope")
</template>

Output or Error

 error  Elements in iteration expect to have 'v-bind:key' directives  vue-pug-sfc/require-v-for-key

Expected Output

No error

Additional Context

A v-for on a template containing a slot should not require a key, since neither a template nor a slot can have a key. This workaround works:

<template lang="pug">
div
  template(#[slot]="scope" v-for="(ignored, slot) of $scopedSlots")
    span(:key="slot" v-if="false")
    slot(:name="slot" v-bind="scope")
</template>