about use plugin in vue3 setup script

[JobinJia]

when i create a vue3 component and set lang='tsx' with setup script

// setup script SFC
<script setup lang="tsx">
  const labelText = ref('Label')
  const label = () => <div>{labelText}</div>
</script>

the console show file not found

plugin config in vite.config.ts

plugins: [
  vue(),
  vueJsx(),
  eslintPlugin({
    eslintOptions: {
      cache: false
    }
  })
]

it's not support setup script with tsx?

[ArnaudBarre]

Sorry for the delay. I don't use vue and never tested this plugin with it. I have no idea how eslint will handle .vue import actually. Can you provide a small project with your current setup of vue + tsx + eslint?

[vjee]

URLs that have "vue" in the query string like the one above (.../SomeComponent.vue?vue&type=script...) are virtual files emitted from @vitejs/plugin-vue and should not be passed to eslint.

@JobinJia What did you pass to the shouldLint option? The following works just fine for me:

eslintPlugin({
  shouldLint: (path) => /\/src\/.*\.(vue|[jt]sx?)$/.test(path),
})

This regex is basically the default one but also allows vue files. Note the $ at the end makes sure we only allow files that end with .vue or another js extension so the virtual files do not match this regex.

It might be useful for this plugin to also add this check so these files are never passed to eslint, even if shouldLint passes. (vite-plugin-eslint) does this too. Or maybe an extra explination in the readme would suffice?

[JobinJia]

Sorry for the delay. I don't use vue and never tested this plugin with it. I have no idea how eslint will handle .vue import actually. Can you provide a small project with your current setup of vue + tsx + eslint?

Sorry for taking so long to reply ：(

this is demo

[JobinJia]

URLs that have "vue" in the query string like the one above (.../SomeComponent.vue?vue&type=script...) are virtual files emitted from @vitejs/plugin-vue and should not be passed to eslint.

@JobinJia What did you pass to the shouldLint option? The following works just fine for me:

eslintPlugin({
  shouldLint: (path) => /\/src\/.*\.(vue|[jt]sx?)$/.test(path),
})

This regex is basically the default one but also allows vue files. Note the $ at the end makes sure we only allow files that end with .vue or another js extension so the virtual files do not match this regex.

It might be useful for this plugin to also add this check so these files are never passed to eslint, even if shouldLint passes. (vite-plugin-eslint) does this too. Or maybe an extra explination in the readme would suffice?

i used this config in my project . this is Demo

the demo vite.config.ts is

But it still prompts me file not found

and component it not .tsx file. it‘s a .vue file

// here set lang type
<script setup lang="tsx">
  import Icon from "./Icon";

  const options = [
    {
      id: 1,
      icon: () => <span>Icon 1</span>
    },
    {
      id: 2,
      icon: () => <span>Icon 2</span>
    }
  ]
</script>

<template>
  <div>
    Demo:
    <br />
    <div v-for="it in options" :key="it.id">
      <Icon :icon="it.icon"></Icon>
    </div>
  </div>
</template>

[vjee]

@JobinJia Oh I see, that path still matches the regex because it ends with .tsx Check out this regexr example: https://regexr.com/6akq1

You'll have to replace the .* with [^\?\r\n]*. Instead of matching "any character except newline", we want "any character except newline, except ?".

Final regex:

/\/src\/[^\?\r\n]*\.(vue|tsx?)$/

That should solve the problem.

[JobinJia]

@JobinJia Oh I see, that path still matches the regex because it ends with .tsx Check out this regexr example: https://regexr.com/6akq1

You'll have to replace the .* with [^\?\r\n]*. Instead of matching "any character except newline", we want "any character except newline, except ?".

Final regex:

/\/src\/[^\?\r\n]*\.(vue|tsx?)$/

That should solve the problem.

wow ! thank you very much, woking good now :) emm, i get it
it's runing dependent on @vitejs/plugin-vue emit virtual file. and need match the virtual file end with

Thanks again！^_^