Manually set ESlint rules in .eslintrc.js NOT working in Nuxt app, but DO work in Vue app

Question

I just initiated a new Nuxt app with npm init nuxt-app <project-name> and configured ESlint with npx eslint --init.

Additionally, I added two rules to the .eslintrc.js config file like so:

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:vue/essential',
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 12,
    sourceType: 'module'
  },
  plugins: [
    'vue'
  ],
  rules: {
    'vue/multi-word-component-names': 'warn',
    'no-unused-vars': 'warn'
  }
}

When I run my app and test whether everything is working I notice the rules that I have set in the .eslintrc.js file don't get applied properly. For example, I still get an error, and not a warning, when using unused variables.

Any experience with this? Or solution?

It always worked for me in Vue apps, but now with Nuxt it does not.

the best config is here: https://stackoverflow.com/a/70824561/2713125 regard — Masoud, Jan 23 '22 at 17:12

score 1 · Accepted Answer · answered Dec 03 '21 at 14:13

I'm not sure about the actual configuration of your project but I have setup my ESlint to match Nuxt's rules and also have additional rules working properly (getting warnings as expected) with the following .eslintrc.js file

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  parserOptions: {
    parser: '@babel/eslint-parser',
    requireConfigFile: false,
  },
  extends: [
    '@nuxtjs',
    'plugin:prettier/recommended',
    'prettier',
  ],
  plugins: [],
  // add your custom rules here
  rules: {},
}

Here are my ESlint + Prettier dev packages to have the whole thing properly working: @babel/eslint-parser @nuxtjs/eslint-config @nuxtjs/eslint-module eslint eslint-config-prettier eslint-plugin-nuxt eslint-plugin-prettier eslint-plugin-vue prettier.

score 0 · Answer 2 · edited Dec 17 '21 at 19:21

Thank you for your reply.

By change I needed a fresh install of my Nuxt project. I used npm init nuxt-app <project-name> and, this time around, set TypeScript as my language.

For some reason, this time around, all went well.

My current .eslintrc.js file:

module.exports = {
  env: {
    browser: true,
    es2021: true
  },
  extends: [
    'plugin:vue/essential',
    'standard'
  ],
  parserOptions: {
    ecmaVersion: 12,
    parser: '@typescript-eslint/parser',
    sourceType: 'module'
  },
  plugins: [
    'vue',
    '@typescript-eslint'
  ],
  rules: {
    'vue/multi-word-component-names': 'warn',
    'no-unused-vars': 'warn',
    'space-in-parens': 'off',
    'computed-property-spacing': 'off'
  }
}

Honestly, not sure what made the difference...

Manually set ESlint rules in .eslintrc.js NOT working in Nuxt app, but DO work in Vue app

2 Answers2