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. 🤷‍♂️