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

admin管理员组
文章数量:1026164

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
```

Share Improve this question edited Nov 18, 2024 at 10:32 asked Nov 18, 2024 at 9:50 Nitheesram Rajes 1541 silver badge14 bronze badges

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:

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.
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'

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
```

Share Improve this question edited Nov 18, 2024 at 10:32 asked Nov 18, 2024 at 9:50 Nitheesram Rajes 1541 silver badge14 bronze badges

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:

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.
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

版权声明：本文标题：vue.js - ESLint migration issue while converting extends to v9 - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://it.en369.cn/questions/1745628478a2160011.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

369IT编程

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

1 Answer 1

1 Answer 1

更多相关文章