vue.js - ESLint migration issue while converting extends to v9 - Stack Overflow

admin管理员组

文章数量:1434388

I'm trying to convert my .eslintrc.cjs to eslint.config.js with migration of ESLint.

My current config file has

extends: ['eslint:recommended',
        'plugin:vue/vue3-recommended',
        'plugin:@typescript-eslint/recommended',
        'prettier'],

And I tried to convert this as follows according to the migration guide and documentation

import eslint from "@eslint/js";

export default [

    {
        plugins: {
            eslint: eslint
        },
        rules: {
            'eslint': "warn"
        }
    }
];

When I run lint I get the following error.

 @hmp/[email protected] lint
> npx eslint

npm warn config ignoring workspace config at D:PATH\workspaces\vue3/.npmrc

Oops! Something went wrong! :(

ESLint: 9.15.0

TypeError: Key "rules": Key "eslint": Could not find "eslint" in plugin "@".
    at throwRuleNotFoundError (D:\node_modules\eslint\lib\config\rule-validator.js:66:11)
    at RuleValidator.validate (D:\node_modules\eslint\lib\config\rule-validator.js:147:17)
    at new Config (D:\node_modules\eslint\lib\config\config.js:228:27)
    at [finalizeConfig] (D:\node_modules\eslint\lib\config\flat-config-array.js:216:16)
    at FlatConfigArray.getConfigWithStatus (D:\node_modules\@eslint\config-array\dist\cjs\index.cjs:1178:55)
    at FlatConfigArray.getConfig (D:\\node_modules\@eslint\config-array\dist\cjs\index.cjs:1196:15)
    at entryFilter (D:\\node_modules\eslint\lib\eslint\eslint-helpers.js:282:40)
    at async NodeHfs.<anonymous> (file:///D:/node_modules/@humanfs/core/src/hfs.js:574:24)
    at async NodeHfs.walk (file:///D:/node_modules/@humanfs/core/src/hfs.js:614:3)
    at async globSearch (D:\node_modules\eslint\lib\eslint\eslint-helpers.js:323:26)
npm error Lifecycle script `lint` failed with error:
npm error code 2
npm error path D:PATH\workspaces\vue3
npm error workspace @hmp/[email protected]
npm error location D:PATH\workspaces\vue3
npm error command failed
npm error command C:\Windows\system32\cmd.exe /d /s /c npx eslint
```

I'm trying to convert my .eslintrc.cjs to eslint.config.js with migration of ESLint.

My current config file has

extends: ['eslint:recommended',
        'plugin:vue/vue3-recommended',
        'plugin:@typescript-eslint/recommended',
        'prettier'],

And I tried to convert this as follows according to the migration guide and documentation

import eslint from "@eslint/js";

export default [

    {
        plugins: {
            eslint: eslint
        },
        rules: {
            'eslint': "warn"
        }
    }
];

When I run lint I get the following error.

 @hmp/[email protected] lint
> npx eslint

npm warn config ignoring workspace config at D:PATH\workspaces\vue3/.npmrc

Oops! Something went wrong! :(

ESLint: 9.15.0

TypeError: Key "rules": Key "eslint": Could not find "eslint" in plugin "@".
    at throwRuleNotFoundError (D:\node_modules\eslint\lib\config\rule-validator.js:66:11)
    at RuleValidator.validate (D:\node_modules\eslint\lib\config\rule-validator.js:147:17)
    at new Config (D:\node_modules\eslint\lib\config\config.js:228:27)
    at [finalizeConfig] (D:\node_modules\eslint\lib\config\flat-config-array.js:216:16)
    at FlatConfigArray.getConfigWithStatus (D:\node_modules\@eslint\config-array\dist\cjs\index.cjs:1178:55)
    at FlatConfigArray.getConfig (D:\\node_modules\@eslint\config-array\dist\cjs\index.cjs:1196:15)
    at entryFilter (D:\\node_modules\eslint\lib\eslint\eslint-helpers.js:282:40)
    at async NodeHfs.<anonymous> (file:///D:/node_modules/@humanfs/core/src/hfs.js:574:24)
    at async NodeHfs.walk (file:///D:/node_modules/@humanfs/core/src/hfs.js:614:3)
    at async globSearch (D:\node_modules\eslint\lib\eslint\eslint-helpers.js:323:26)
npm error Lifecycle script `lint` failed with error:
npm error code 2
npm error path D:PATH\workspaces\vue3
npm error workspace @hmp/[email protected]
npm error location D:PATH\workspaces\vue3
npm error command failed
npm error command C:\Windows\system32\cmd.exe /d /s /c npx eslint
```

• vue.js
• eslint
• typescript-eslint
• eslintrc
• prettier-eslint

Share Improve this question Follow edited Nov 18, 2024 at 10:32 Nitheesram Rajes asked Nov 18, 2024 at 9:50 Nitheesram RajesNitheesram Rajes 15411 silver badge1414 bronze badges 5

• What is the issue? – Estus Flask Commented Nov 18, 2024 at 10:10
• @EstusFlask Sorry, I updated the error – Nitheesram Rajes Commented Nov 18, 2024 at 10:33
• Can you clarify what's the intention? You have no counterpart to "extends", and 'eslint': "warn" results in an error because there's no such rule. Rules are these eslint./docs/latest/rules . I'd suggest to just create a new vue project and borrow the config from there – Estus Flask Commented Nov 18, 2024 at 10:54
• Here what I'm trying to do is converting the eslint to v9. The one given at the top is the extends in v8 and I tried to convert that to v9. Not sure how extends can be converted into v9. @EstusFlask – Nitheesram Rajes Commented Nov 18, 2024 at 11:08
• See eslint.vuejs./user-guide , it has eslint.config.js examples aka flat config). Proceed from the recommended approach on this plugin as it's important to make .vue files work. Notice the use of ts.config() helper, it helps. Since that config file already contain most things you need, you'll need to add prettierRecommended from 'eslint-plugin-prettier/recommended' the same way as other plugin configs – Estus Flask Commented Nov 18, 2024 at 11:33

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

Since you're using typescript-eslint and Vue, I'd suggest going off the docs from https://eslint.vuejs./user-guide/#how-to-use-a-custom-parser:

import js from '@eslint/js'
import eslintPluginVue from 'eslint-plugin-vue'
import ts from 'typescript-eslint'

export default ts.config(
  js.configs.recommended,
  ...ts.configs.recommended,
  ...eslintPluginVue.configs['flat/recommended'],
  {
    files: ['*.vue', '**/*.vue'],
    languageOptions: {
      parserOptions: {
        parser: '@typescript-eslint/parser'
      }
    }
  }
)

The issues in the config you've posted are:

1. eslint (imported from @eslint/js) doesn't need to be listed in plugins. ESLint's JS rules are built into ESLint. plugins is used to load in external plugins that aren't built-in, such as typescript-eslint and Vue.
2. rules: { 'eslint': 'warn' } does not make sense. rules is an object mapping rule names to their severities and options. eslint is not the name of a rule.
   • This is why you're getting the TypeError: ESLint is saying there's no built-in (under the default plugin namespace, '@') rule named 'eslint'

本文标签： vuejsESLint migration issue while converting extends to v9Stack Overflow