We are splitting the files into the component.vue, styles.scss and template.html, something like:
<script setup lang="ts">
// Common elements
import Category from '@/components/Elements/Category/Category.vue';
// COMPOSABLES
const localePath = useLocalePath();
// DATA
const session = ref(getSession());
</script>
<template src="./CustomTable.html" />
<style lang="scss" src="./custom-table.scss" />
But even that Category, localePath and session are used on ./CustomTable.html the linter provides this issues:
3:8 warning 'Category' is defined but never used @typescript-eslint/no-unused-vars
6:7 warning 'localePath' is assigned a value but never used @typescript-eslint/no-unused-vars
9:7 warning 'session' is assigned a value but never used @typescript-eslint/no-unused-vars
I know we could use eslint-disable
<script setup lang="ts">
/* eslint-disable @typescript-eslint/no-unused-vars */
// Common elements
import Category from '@/components/Elements/Category/Category.vue';
// COMPOSABLES
const localePath = useLocalePath();
// DATA
const session = ref(getSession());
/* eslint-enable @typescript-eslint/no-unused-vars */
</script>
<template src="./CustomTable.html" />
<style lang="scss" src="./custom-table.scss" />
But that could lead to truly un-used variables to be ignored
Is there any way to make the linter to search for usages in the linked template file? else what do you suggest we could do about it?
by the way this is our eslintrc.ts
{
"env": {
"browser": true,
"es2021": true,
"node": true,
"vue/setup-compiler-macros": true
},
"extends": [
"eslint:recommended",
"plugin:vue/vue3-recommended",
"@nuxtjs/eslint-config-typescript",
"plugin:@typescript-eslint/recommended",
"prettier",
"plugin:storybook/recommended"
],
"overrides": [],
"parser": "vue-eslint-parser",
"parserOptions": {
"parser": "@typescript-eslint/parser"
},
"plugins": ["vue", "@typescript-eslint"],
"rules": {
"no-debugger": "off",
"vue/multi-word-component-names": "off",
"@typescript-eslint/no-explicit-any": "off",
"vue/no-reserved-component-names": "off",
"import/no-named-as-default": "off",
"arrow-body-style": ["error", "as-needed"],
"padding-line-between-statements": ["error", { "blankLine": "always", "prev": "*", "next": "if" }]
}
}
-EDIT-
Could also
defineExpose({ Category, localePath, session })
but I prefer not avoid exposing when not intended