Setting up ESLint in nuxt 3

I didn't find any clear guidelines on this, so this is what I ended up with:

• Installed eslint and prettier as dev dependencies

• Installed @nuxt/eslint-config and eslint-config-prettier

• eslintrc.js

    module.exports = {
      env: {
        node: true,
      },
      extends: ['@nuxt/eslint-config', 'prettier'],
      rules: {
        'no-unused-vars': [
          'error',
          {
            argsIgnorePattern: '^_',
            varsIgnorePattern: '^_',
            caughtErrorsIgnorePattern: '^_',
          },
        ],
        'vue/no-multiple-template-root': 'off',
        'no-undef': 'off',
      },
    }
  

1. 'no-unused-vars' lets me keep unused variables that begin with an underscore.

2. vue3 lets you have multiple roots in a template, so allow that.

3. nuxt3 automatically imports globals, components and composables. 'no-undef' doesn't like that. Maybe if I were using TypeScript it would work better. 🤷‍♂️