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

Multi-word-components incosistent behavior in template vs docs and bug when using both <script> and <script setup>

Open VividLemon opened this issue 2 years ago • 2 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": "^8.15.0",
  • **eslint-plugin-vue version:"eslint-plugin-vue": "^9.0.1",
  • **Node version:16.14.2
  • **Operating System:Windows 11

Please show your full configuration:

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    '@vue/typescript/recommended',
    'plugin:vue/vue3-recommended',
    '@vue/standard',
  ],
  parserOptions: {
    ecmaVersion: 2020
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  },
  overrides: [
    {
      files: [
        '**/__tests__/*.{j,t}s?(x)',
        '**/tests/unit/**/*.spec.{j,t}s?(x)'
      ],
      env: {
        jest: true
      }
    }
  ]
}

What did you do?

<template>
  <v-container
    class="mt-2"
    fluid
  >
    <v-row>
      <v-col class="text-center">
        <h1>
          {{ $t('message') }}
        </h1>
      </v-col>
    </v-row>
    <v-row class="text-center">
      <v-col>
        <genetics-gene-input />
      </v-col>
      <v-divider vertical />
      <v-col>
        <gene-output />
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup lang="ts">
import GeneOutput from '@/components/output/GeneOutput.vue'
import GeneticsGeneInput from '@/components/input/GeneticsGeneInput.vue'

const val = ref(1)
</script>

<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({ name: 'GeneticsPage' })
</script>

What did you expect to happen? It should have gone off without a hitch. Either using the

What actually happened?

\node_modules\vue\dist\vue.runtime.esm-bundler.js' imported multiple times.eslintimport/no-duplicates 'defineComponent' is declared but its value is never read.ts(6133) Import in body of module; reorder to top.eslintimport/first

These few issues cause a few problems, first, the reorder to top causes one of the two imports to move to the same place. Causing one of the two script tags to lose it's import, failing. Initially, using this type of setup would cause eslint to simply not work, but since updating it causes different issues. When using this setup:

<script setup lang="ts">
import GeneOutput from '@/components/output/GeneOutput.vue'
import GeneticsGeneInput from '@/components/input/GeneticsGeneInput.vue'

</script>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({ name: 'GeneticsPage' })
</script>

It will always cause 'defineComponent' is declared but its value is never read.ts(6133)

Repository to reproduce this issue

https://github.com/kwiksilver3441/Eslint-vue-bug

The behavior best is shown in the github repo. There's a few different rules from eslint fighting with vue, causing a few different issues. Look at the "views" directory. This would all be a non issue if <!-- filename: TodoItem.vue --> syntax worked properly, or there was the ability from vue to "defineComponentName" in

VividLemon avatar May 20 '22 20:05 VividLemon

Sorry, but I don't get what issues you are experiencing. Could you please show all the different versions your tried, together with the errors that each reports?

At least the import/first problem sounds like #1577.

FloEdelmann avatar May 21 '22 08:05 FloEdelmann

Sorry, but I don't get what issues you are experiencing. Could you please show all the different versions your tried, together with the errors that each reports?

At least the import/first problem sounds like #1577.

I'd recommend observing the behavior in the repository, as there are a few issues relating to eslint plugin vue and having two script tags, especially with TS. The import first does sound like the problem you mentioned.

VividLemon avatar May 21 '22 18:05 VividLemon