// Common elements import C" /> // Common elements import C" /> // Common elements import C"/>

multiple file components and false positives with eslint

36 Views Asked by At

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

0

There are 0 best solutions below