Nuxt•2mo ago

Basic nuxt/eslint configuration

I have fresh Nuxt project with only @nuxt/eslint module and some things are bothering me regarding the configuration... Module was added to Nuxt with: npx nuxi module add eslint This add dependency under the "dependencies" and not under the "devDependencies" like this command would if following documentation for manual setup: pnpm add -D @nuxt/eslint eslint typescript Is this a problem with nuxi command... since this is a dev dependency, isn't it? Another thing is no-undef eslint rule which is showing error for defineNuxtConfig and I guess al other globals. I have manually disabled the rule in eslint.config.mjs file... But shouldn't be this disabled by default because of all the auto-imports enabled by default?

5 Replies

kapa.ai•2mo ago

Hi @Jure. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Your question is about Nuxt and ESLint configuration, so I'll be happy to help based on the information provided in the knowledge sources. Regarding your first concern about the dependency placement: You're correct that the ESLint module should typically be a dev dependency. The npx nuxi module add eslint command seems to be adding it to the regular dependencies, which is not ideal. This appears to be an inconsistency with the manual setup process described in the documentation. According to the Quick Setup guide (https://eslint.nuxt.com/packages/module#quick-setup), the recommended way to add the module is indeed using the npx nuxi module add eslint command. However, the manual setup instructions do suggest adding it as a dev dependency. This discrepancy might be an oversight or a bug in the nuxi command. For your project, it would be better to move @nuxt/eslint to the devDependencies section of your package.json file manually. This won't affect the functionality but will more accurately reflect its role as a development tool. Regarding your second concern about the no-undef rule and globals: The no-undef rule showing errors for Nuxt-specific globals like defineNuxtConfig is indeed unexpected behavior. The ESLint configuration generated by the @nuxt/eslint module should typically handle Nuxt-specific globals automatically. According to the Packages > Quick Setup (https://eslint.nuxt.com/packages/module#quick-setup) documentation, when you start your Nuxt app after adding the module, an eslint.config.mjs file should be generated in your project root. This file should include configurations that handle Nuxt-specific globals. If you're still experiencing issues with globals, you might want to check if your eslint.config.mjs file looks similar to this:

import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt(
  // your custom flat configs go here
)

import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt(
  // your custom flat configs go here
)

The withNuxt function should include the necessary configurations for Nuxt, including handling of globals. If the issue persists, it might be worth checking if there are any updates available for the @nuxt/eslint module or considering reporting this as a potential bug to the Nuxt ESLint module repository. Remember, you can always customize your ESLint configuration further if needed, but ideally, Nuxt-specific globals should be handled out of the box by the module. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@511529913518391308> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

JureOP•2mo ago

@kapa.ai eslint.config.mjs looks exactly like your example... I also expected that this file includes all the necessary configurations for Nuxt... but it I still get an error: 'defineNuxtConfig' is not defined.eslintno-undef Updating the eslint config like this remove the error:

// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt({
  rules: {
    'no-undef': 'off',
  },
})

// @ts-check
import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt({
  rules: {
    'no-undef': 'off',
  },
})

But I'm not sure if this is the best practice...

kapa.ai•2mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Thank you for providing more details about your ESLint configuration issue with Nuxt. Let's explore this further based on the information available in our knowledge sources. You're right to be cautious about simply turning off the no-undef rule globally, as it's not the best practice. The defineNuxtConfig function should be recognized by the ESLint configuration provided by Nuxt. Based on the Packages > Recipes > Config Customizations (https://eslint.nuxt.com/packages/module#config-customizations) documentation, there's a more targeted way to customize your ESLint configuration. Instead of turning off the rule globally, you can override it specifically for the Nuxt TypeScript configuration:

import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt()
  .override('nuxt/typescript', {
    rules: {
      'no-undef': 'off'
    }
  })

import withNuxt from './.nuxt/eslint.config.mjs'

export default withNuxt()
  .override('nuxt/typescript', {
    rules: {
      'no-undef': 'off'
    }
  })

This approach allows you to keep the no-undef rule active for other parts of your codebase while disabling it specifically for Nuxt-related TypeScript files. However, it's worth noting that this is still a workaround and not an ideal solution. The defineNuxtConfig function should be recognized automatically by the Nuxt ESLint configuration. Given that this issue persists even with the default configuration, it might be a bug in the @nuxt/eslint module. Here are a couple of things you can try: 1. Make sure you have the latest version of @nuxt/eslint installed. 2. If you're using TypeScript, ensure that typescript is installed in your project as mentioned in the Manual Setup guide (https://eslint.nuxt.com/packages/module#quick-setup). If the problem continues after these steps, it would be beneficial to report this issue to the Nuxt ESLint module repository. They might be able to provide a more definitive solution or fix the bug in a future release. In the meantime, using the targeted override approach mentioned above is a reasonable compromise to get your development environment working without completely disabling an important ESLint rule. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

<@511529913518391308> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Basic nuxt/eslint configuration

Did you find this page helpful?