eslint-plugin-vue
eslint-plugin-vue copied to clipboard
Multi-word-components incosistent behavior in template vs docs and bug when using both <script> and <script setup>
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
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.
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.