Adding a plugin @freelancer cuts the r and tries to load it

[TheAifam5]

Tell us about your environment

• ESLint Version: 7.6.0
• Node Version: v14.7.0
• npm Version: not installed

What parser (default, Babel-ESLint, etc.) are you using?
@typescript-eslint/parser

What did you do? Please include the actual source code causing the issue, as well as the command that you used to run ESLint.

1. Create a plugin named @freelancer/eslint-plugin
2. Create a file index.js inside the @freelancer/eslint-plugin: module.exports = {};
3. Create new npm module and add to .eslintrc: "extends": ["plugin:@freelancer"]

yarn eslint ./web/src/App.tsx --debug
eslint ./web/src/App.tsx --debug

What did you expect to happen?
It should try to load @freelancer/eslint-plugin as in the documentation: https://eslint.org/docs/developer-guide/shareable-configs#npm-scoped-modules

What actually happened? Please include the actual, raw output from ESLint.

Tries to load @freelancer/eslint-plugin without the r in the @freelancer word.

 eslint:cli CLI args: [ './web/src/App.tsx', '--debug' ] +0ms
  eslint:cli Running on files +2ms
  eslint:config-array-factory Loading JSON config file: /home/theaifam5/Documents/Projects/TypeScript/freelancer/package.json +0ms
  eslint:ignore-pattern Create with: [ IgnorePattern { patterns: [ '/**/node_modules/*' ], basePath: '/home/theaifam5/Documents/Projects/TypeScript/freelancer', loose: false } ] +0ms
  eslint:ignore-pattern   processed: { basePath: '/home/theaifam5/Documents/Projects/TypeScript/freelancer', patterns: [ '/**/node_modules/*' ] } +1ms
  eslint:ignore-pattern Create with: [ IgnorePattern { patterns: [ '/**/node_modules/*' ], basePath: '/home/theaifam5/Documents/Projects/TypeScript/freelancer', loose: false } ] +0ms
  eslint:ignore-pattern   processed: { basePath: '/home/theaifam5/Documents/Projects/TypeScript/freelancer', patterns: [ '/**/node_modules/*' ] } +0ms
  eslint:file-enumerator Start to iterate files: [ './web/src/App.tsx' ] +0ms
  eslint:file-enumerator File: /home/theaifam5/Documents/Projects/TypeScript/freelancer/web/src/App.tsx +0ms
  eslint:cascading-config-array-factory Load config files for /home/theaifam5/Documents/Projects/TypeScript/freelancer/web/src. +0ms
  eslint:cascading-config-array-factory No cache found: /home/theaifam5/Documents/Projects/TypeScript/freelancer/web/src. +0ms
  eslint:config-array-factory Config file not found on /home/theaifam5/Documents/Projects/TypeScript/freelancer/web/src +5ms
  eslint:cascading-config-array-factory No cache found: /home/theaifam5/Documents/Projects/TypeScript/freelancer/web. +2ms
  eslint:config-array-factory Loading legacy config file: /home/theaifam5/Documents/Projects/TypeScript/freelancer/web/.eslintrc +0ms
  eslint:config-array-factory Config file found: /home/theaifam5/Documents/Projects/TypeScript/freelancer/web/.eslintrc +25ms
  eslint:config-array-factory Loading {extends:"plugin:@freelancer"} relative to /home/theaifam5/Documents/Projects/TypeScript/freelancer/web/.eslintrc +0ms
  eslint:config-array-factory Loading plugin "@freelance" from /home/theaifam5/Documents/Projects/TypeScript/freelancer/web/.eslintrc +0ms
  eslint:config-array-factory Failed to load plugin '@freelance' declared in 'web/.eslintrc'. +1ms

Oops! Something went wrong! :(

ESLint: 7.6.0

ESLint couldn't find the plugin "@freelance/eslint-plugin".

(The package "@freelance/eslint-plugin" was not found when loaded as a Node module from the directory "/home/theaifam5/Documents/Projects/TypeScript/freelancer/web".)

It's likely that the plugin isn't installed correctly. Try reinstalling by running the following:

    npm install @freelance/eslint-plugin@latest --save-dev

The plugin "@freelance/eslint-plugin" was referenced from the config file in "web/.eslintrc".

If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.

Are you willing to submit a pull request to fix this bug?
Did not find the code responsible for it.

[mdjermanovic]

Hi @TheAifam5, thanks for the issue!

Do you want to create a plugin that exports a config (and may also export custom rules, custom environments, etc.) or just a shareable config?

plugin: specifier in "extends" needs config name, for example:

"extends": ["plugin:@freelancer/myConfig"]

Plugin should export the config like this:

module.exports = {
    configs: {
        myConfig: {            
            rules: {
                semi: "error"
                // ...
            }
            // ...
        }
    }
}

Documentation for configs in plugins, including how to use config from a plugin, is here:

https://eslint.org/docs/developer-guide/working-with-plugins#configs-in-plugins

[mdjermanovic]

I'm marking this issue as a question since it's about the usage of plugins and configs, but we should detect an invalid entry in "extends" and print a more informative message, instead of trying and failing to load a plugin with a sliced name.

There's a similar issue #13255, and a PR to improve this: #13473