Using this extension with create-nuxt-app results in 'definition for rule ... not found' errors

[timfee]

With a vanilla eslint config (below),

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

As long as '@nuxtjs/eslint-config-typescript' is included, VS Code shows a bunch of Vue errors:

My package.json is:

{
  "name": "cal",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt-ts",
    "build": "nuxt-ts build",
    "start": "nuxt-ts start",
    "generate": "nuxt-ts generate",
    "lint:js": "eslint --ext .js,.vue --ignore-path .gitignore .",
    "lint": "npm run lint:js"
  },
  "dependencies": {
    "@nuxt/typescript-runtime": "^2.0.0",
    "@nuxtjs/axios": "^5.12.4",
    "core-js": "^3.8.1",
    "nuxt": "^2.14.12"
  },
  "devDependencies": {
    "@nuxt/types": "^2.14.12",
    "@nuxt/typescript-build": "^2.0.3",
    "@nuxtjs/eslint-config": "^5.0.0",
    "@nuxtjs/eslint-config-typescript": "^5.0.0",
    "@nuxtjs/eslint-module": "^3.0.2",
    "@nuxtjs/tailwindcss": "^3.4.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^7.16.0",
    "eslint-config-prettier": "^7.1.0",
    "eslint-plugin-nuxt": "^2.0.0",
    "eslint-plugin-prettier": "^3.3.0",
    "prettier": "^2.2.1"
  }
}

I'm not sure this is the right project, but as it seemed to be the one that impacted the results, I figured I'd start here :) Apologies if I got something basic wrong!

[timfee]

Update: it looks like I had to install eslint-plugin-vue manually

[kazuemon]

Facing the same problem

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true,
  },
  extends: [
    '@nuxtjs/eslint-config-typescript',
    'plugin:nuxt/recommended',
    'plugin:prettier/recommended',
    'prettier',
    'prettier/vue',
  ],
  rules: {
    'no-unused-vars': 'off',
    '@typescript-eslint/no-unused-vars': 'error',
  },
}

[kazuemon]

MEMO: @nuxtjs/eslint-config (load from @nuxtjs/eslint-config-typescript) is using eslint-plugin-vue https://github.com/nuxt/eslint-config/blob/master/packages/eslint-config/package.json

[kazuemon]

( Google Translate )

The cause is unknown, but once I specified v3.0.0 and reinstalled it, and then updated to v5.0.0, the error no longer occurred (I'm not sure if it's working properly).

• .eslintrc.json

{
  "root": true,
  "env": {
    "browser": true,
    "node": true
  },
  "extends": ["@nuxtjs/eslint-config-typescript", "prettier", "prettier/vue"],
  "rules": {}
}

• package.json The package configuration has changed from before, but the error disappeared when I changed to v3.0.0

"dependencies": {
    "@aspida/axios": "^1.1.1",
    "@nuxt/typescript-runtime": "^2.0.0",
    "@nuxtjs/axios": "^5.12.2",
    "@nuxtjs/dayjs": "^1.3.0",
    "@nuxtjs/markdownit": "^1.2.10",
    "@nuxtjs/proxy": "^2.1.0",
    "@nuxtjs/pwa": "^3.0.2",
    "chart.js": "^2.9.4",
    "core-js": "^3.6.5",
    "nuxt": "^2.14.6",
    "vue-chartjs": "^3.5.1"
},
"devDependencies": {
  "@nuxt/types": "^2.14.6",
  "@nuxt/typescript-build": "^2.0.3",
  "@nuxtjs/eslint-config-typescript": "^5.0.0",
  "@nuxtjs/eslint-module": "^3.0.2",
  "@nuxtjs/storybook": "^3.3.0",
  "@nuxtjs/stylelint-module": "^4.0.0",
  "@storybook/addon-a11y": "^6.1.11",
  "@storybook/addon-actions": "^6.1.11",
  "@storybook/addon-docs": "^6.1.11",
  "@storybook/addon-knobs": "^6.1.11",
  "@storybook/addon-viewport": "^6.1.11",
  "eslint": "^7.10.0",
  "eslint-config-prettier": "^7.1.0",
  "eslint-plugin-nuxt": "^2.0.0",
  "fibers": "^5.0.0",
  "npm-run-all": "^4.1.5",
  "pathpida": "^0.10.2",
  "prettier": "^2.1.2",
  "sass": "^1.32.0",
  "sass-loader": "^10.1.0",
  "storybook-addon-designs": "^5.4.2",
  "stylelint": "^13.8.0",
  "stylelint-config-prettier": "^8.0.2",
  "stylelint-config-recess-order": "^2.3.0",
  "stylelint-config-recommended-scss": "^4.2.0",
  "stylelint-config-standard": "^20.0.0",
  "stylelint-prettier": "^1.1.2",
  "stylelint-scss": "^3.18.0"
}

[danny-pearson]

I had the same issue, but I managed to get it sorted after a little playing around. Not sure how necessary a couple of the steps were, but it's working fine now :) There should be no need to install eslint-plugin-vue manually, because it's already included in this package.

I updated eslint to the latest version (I believe it needs to be anything > 7.13.0). I stripped down my .eslintrc.js because some properties (e.g parser) are already included in the configs and overriding them could be causing issues. I deleted yarn.lock and the node_modules folder, ran yarn cache clean then reinstalled. I restarted VSCode. This is when the error disappeared, and strangely enough I've had similar issues before that have eventually been fixed this way.

My .eslintrc.js ended up like this.

module.exports = {
  root: true,
  extends: [
    '@nuxtjs',
    'airbnb-base',
    'plugin:nuxt/recommended',
  ],
  plugins: [
    'prettier',
  ],
  globals: {
    $nuxt: true,
  },
  // ... settings, rules etc...
};

[danny-pearson]

Feel like .eslintcache may have something to do with this issue also.

[clarkdo]

This may also be related to npm/yarn hoisting or vscode cache, I suggest reinstalling dependencies and reload vscode window, if it's still now working, let's add eslint-plugin-vue explicitly which can make it be installed at root node_modules.

[antfu]

We temporarily closed this due to the lack of enough information. We could not identify whether it was a bug or a userland misconfiguration with the given info. Please provide a minimal reproduction to reopen the issue. Thanks.

Why reproduction is required