eslint-plugin-vue icon indicating copy to clipboard operation
eslint-plugin-vue copied to clipboard

`vue/no-undef-properties` doesn't support non-inline props declarations

Open caugner opened this issue 4 years ago • 0 comments

Checklist

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

Tell us about your environment

  • ESLint version:
  • eslint-plugin-vue version:
  • Node version:
  • Operating System:

Please show your full configuration:

module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: [
    'plugin:vue/recommended',
    '@vue/prettier/recommended',
    '@vue/prettier/@typescript-eslint',
    '@vue/typescript/recommended',
  ],
  rules: {
    'vue/block-lang': ['error', { script: { lang: 'ts' } }],
    'vue/component-api-style': ['error', ['composition']],
    'vue/component-name-in-template-casing': [
      'error',
      'PascalCase',
      { registeredComponentsOnly: false, ignores: ['i18n'] },
    ],
    'vue/match-component-file-name': [
      'error',
      {
        extensions: ['vue'],
        shouldMatchCase: true,
      },
    ],
    'vue/no-computed-properties-in-data': ['error'],
    'vue/no-deprecated-data-object-declaration': ['error'],
    'vue/no-deprecated-destroyed-lifecycle': ['error'],
    'vue/no-deprecated-events-api': ['error'],
    'vue/no-deprecated-filter': ['error'],
    'vue/no-deprecated-inline-template': ['error'],
    'vue/no-deprecated-props-default-this': ['error'],
    'vue/no-deprecated-router-link-tag-prop': ['error'],
    'vue/no-deprecated-scope-attribute': ['error'],
    'vue/no-deprecated-slot-attribute': ['error'],
    'vue/no-deprecated-v-bind-sync': ['error'],
    'vue/no-deprecated-v-on-number-modifiers': ['error'],
    'vue/no-deprecated-vue-config-keycodes': ['error'],
    'vue/no-empty-component-block': ['error'],
    'vue/no-template-target-blank': ['error'],
    'vue/no-undef-properties': ['error'],
    'vue/no-unused-refs': ['error'],
    'vue/no-use-computed-property-like-method': ['error'],
    'vue/no-v-text': ['error'],
    'vue/padding-line-between-blocks': ['error', 'always'],
    'vue/require-explicit-emits': ['error'],
    'vue/v-for-delimiter-style': ['error', 'in'],
    'vue/valid-next-tick': ['error'],
    // Conflict with prettier
    'no-extra-semi': 'off',
    '@typescript-eslint/no-extra-semi': 'off',
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)',
      ],
      env: {
        jest: true,
      },
    },
  ],
}

What did you do?

<script lang="ts">
<template>
  <div>{{ value }}</div>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api'

// Usually imported from another module.
const props = {
  value: {
    type: String,
    required: true,
  },
}

export default defineComponent({
  name: 'ExampleText',
  props,
})
</script>

What did you expect to happen?

No error should be reported.

What actually happened?

ESLint claims that the value property does not exist:

error: 'value' is not defined (vue/no-undef-properties) at src/components/ExampleText.vue:2:11:
  1 | <template>
> 2 |   <div>{{ value }}</div>
    |           ^
  3 | </template>
  4 |
  5 | <script lang="ts">

Repository to reproduce this issue

(closed source)

caugner avatar Oct 21 '21 10:10 caugner