eslint return a false positive for "no-unused-vars" - vuejs3

Question

I'm using Vite + Vue3
I installed:
eslint (8.33.0)
eslint-plugin-vue (9.9.0)
vite-plugin-eslint (1.8.1)
In vite.config.js I have:
[...]
import eslint from 'vite-plugin-eslint'
export default ({ mode }) => {
return defineConfig({
[…some conf…],
plugins: [
basicSsl(), // to have a local `https` server
vue(),
vuetify(),
{ // do not fail on serve (i.e. local development)
...eslint({
failOnWarning: false,
failOnError: false,
lintOnStart:true,
include:['src/**/*.js', 'src/**/*.vue']
}),
apply: 'serve',
enforce: 'post'
}
]
})
}
In .eslintrc.cjs I have:
module.exports = {
root: true,
env: {
browser: true,
es2022: true
},
extends: [
'eslint:recommended',
'plugin:vue/vue3-recommended'
],
globals: {
"process":false
},
rules: {
'no-console': [
"warn",
{ "allow": ["clear", "info", "error", "dir", "trace", "log"] }
],
'no-extra-semi': 'off',
'no-useless-escape': 'off',
'vue/multi-word-component-names': 'off',
'vue/html-self-closing': 'off',
'vue/max-attributes-per-line': 'off',
'vue/order-in-components': 'off',
'vue/component-definition-name-casing': 'off'
}
}
In my .vue files I have the below loops:
for (let [value, id] of existingLabels) {
values.push({id:id, value:value});
}
[…]
for (let monthName in this.valuesGrouped[year]) {
if (!this.checked.includes(year+'-'+monthName)) {
this.checked.push(year+'-'+monthName);
}
}
And eslint returns errors:
210:19 error 'value' is defined but never used no-unused-vars
210:26 error 'id' is defined but never used no-unused-vars
140:36 error 'monthName' is defined but never used no-unused-vars
I don't use TypeScript or Babel. I use modules that will be loaded in modern browsers.
Any idea why I got these error messages from ESlint??

Answer 1

I found the problem: it's because I included a folder that wasn't in my current project folder. My vite.config.js was actually like that:
[...]
import eslint from 'vite-plugin-eslint'
export default ({ mode }) => {
return defineConfig({
[…some conf…],
plugins: [
basicSsl(), // to have a local `https` server
vue(),
vuetify(),
{ // do not fail on serve (i.e. local development)
...eslint({
failOnWarning: false,
failOnError: false,
lintOnStart:true,
include:['src/**/*.js', 'src/**/*.vue', '/other/folder/project/src/*.vue']
}),
apply: 'serve',
enforce: 'post'
}
]
})
}
And I had an old .eslintrc file in that /other/folder/project/, which was causing this false-positive.
So I deleted /other/folder/project/.eslintrc.
However it created a new error: No ESLint configuration found in /other/folder/project/.
To fix it, I changed my vite.config.js using the option overrideConfigFile (see the doc):
[...]
import eslint from 'vite-plugin-eslint'
export default ({ mode }) => {
return defineConfig({
[…some conf…],
plugins: [
basicSsl(), // to have a local `https` server
vue(),
vuetify(),
{ // do not fail on serve (i.e. local development)
...eslint({
failOnWarning: false,
failOnError: false,
lintOnStart:true,
overrideConfigFile:'.eslintrc.cjs',
include:['src/**/*.js', 'src/**/*.vue', '/other/folder/project/src/*.vue']
}),
apply: 'serve',
enforce: 'post'
}
]
})
}