Retrieve auto-imported component / function names

[MorevM]

Describe the feature

Hi, I'm not sure if this is a feature request or just a question, but I didn't find any related issues / docs.

Context:

I have an ESLint configuration and it contains rules no-undef and vue/no-undef-components that report undeclared functions/variables/components.

Nuxt automatically imports many things and I like it, I don't want to import them explicitly.
This is slightly related issue, but I don't need to import them explicitly, I need an option to retrieve a names of all auto-imported components/functions to declare them as global in .eslintrc file.

My current workaround is define them manually and declare as global like that:

Although this is a working solution, there are some limitations:

• It needs to be filled manually
• It doesn't update automatically if I register a new module that adds a global component (such as @nuxt/image) or new composables (such as @vueuse/nuxt)
• It doesn't update if I set custom dirs to import in nuxt.config.ts via imports.dirs and create a new file inside it.
• It doesn't update if new release of Vue/Nuxt includes a new features

So, a lot of manual work every time something was changed.
This can be done using custom module, but I believe it should be done by Nuxt itself.

Feature request:

Expose an auto-imported functions / components names to allow import them and mark as global in .eslintrc

Additional info

I know it's recommended to disable no-undef for TypeScript at all, but currently, as far I know, there is no robust way to separate <script lang="ts"> and <script> in ESLint confgurations for .vue files.

Also Nuxt isn't only TypeScript framework. and global components still needs to be configured

Additional information

• Would you be willing to help implement this feature?
• Could this feature be implemented as a module?

Final checks

• Read the contribution guide.
• Check existing discussions and issues.

[manniL]

This should be a discussion instead of an issue ☺️

[MorevM]

@manniL feel free to move it in the right place if you can, the edge between "feature request" and "discussion about feature request" isn't fully clear to me, but I believe that the issue has a better chance of prompt feedback, and described problem is important for me enough to put it here :)

[danielroe]

You would be better off using typescript eslint rules, which will just automatically work: https://typescript-eslint.io/docs/linting/troubleshooting/#i-get-errors-from-the-no-undef-rule-about-global-variables-not-being-defined-even-though-there-are-no-typescript-errors.

[danielroe]

The authors write:

We strongly recommend that you do not use the no-undef lint rule on TypeScript projects. The checks it provides are already provided by TypeScript without the need for configuration - TypeScript just does this significantly better.

[MorevM]

@danielroe I know about this recommendation, but it can't be used here as I noticed in issue text, last paragraph.

What if I want to use JS, not TS? Or if I migrate some project from JS to TS and it's obvious it can't be done in a single commit?

Well, I turned off no-undef rule for files with .vue extension.

<script lang="ts"> reports about usage of non-existed things, thanks to Volar:

But pure JS <script> reports nothing with no-undef turned off:

Currently I can't even apply different ESLint rules to <script> and <script lang="ts"> (related issue in eslint-plugin-vue), so I need to decide that ruleset I should use for all .vue files - JS or TS.
Considering a lot of code written before in JS, I can't force TS rules to be applied to every .vue file.
I can, of course, list in the ESLint config each file migrated to TS, but this is even worse DX than manually specifying globals as I write before.

And anyway, even if I can separate <script> and <script lang="ts"> to apply a different rulesets, this is still an issue with files written in JS.

Also you skipped the section about components (with vue/no-undef-components).
The rule can't recognize global components, but it has an option to specify known global components, so it's good to provide that information.

I understand the urge to say "just turn those rules off, write everything in TS and be happy", but migrating from JS to TS is a long process, and during this process components need to be maintained (even before they are rewritten to TS), and disabling rules during a transition increases the chance of errors

[lecoueyl]

@MorevM there is a discussion how to export auto imported functions for eslint here https://github.com/nuxt/framework/discussions/4607

[danielroe]

We discussed this and think a good solution would be to write a file with components metadata based on setting an option in nuxt.config (maybe components.generateMetadata). However, note that we wouldn't recommend using eslint without TypeScript integration as there are likely to be other issues as well if it is not aware of the full Nuxt TS environment.

[BernardoSM]

I don't know the relationship between nuxt and this plugin here https://github.com/antfu/unplugin-auto-import

But if we add this config below on nuxt import configs will solve the globals issues

  eslintrc: {
    enabled: false, // If we set this true is going to generate a file with all eslint globals
    filepath: './.eslintrc-auto-import.json',
    globalsPropValue: true,
  },