Eslint: strings names resolution

What is the convention for strings names and how does eslint resolve them? Let’s cover all of that.

Resolution introduction

some parts of the eslint config like plugins , extends

▪️ depends on packages

▪️ you can specify the full package

• ex: eslint-plugin-prettier

▪️ or just the small name

• ex prettier
• in this case, a resolution happen
  ◌ depending on what part of the config, a prefix will be added
  - ex: eslint-plugin- , eslint-config-

✨ plugins

▪️ plugins => whatever string prefix with eslint-plugin-

• ex:

plugins: ["dragon/crazy"]

===> eslint-plugin-dragon/crazy

Which will resolve through nodejs module resolution to

▪️ node_modules/eslint-plugin-dragon/crazy.js

• the eslint-plugin-dragon npm package should expose crazy.js at root
◌ or through npm module resolution in package.json

✨ extends

▪️ similarly

• prefix with eslint-config- instead

extends: ["dragon/crazy"]

===> eslint-config-dragon/crazy

Which will resolve through nodejs module resolution to

▪️ node_modules/eslint-config-dragon/crazy.js

• the eslint-config-dragon npm package should expose crazy.js at root
◌ or through npm module resolution in package.json

✨ what if package doesn’t exist ?

• fail with a not found error ❌

Real example

✨ Extends string resolution of eslint-config-prettier

extends: ['prettier']

Whatever is typed in extends

=> That would be prefixed with eslint-config-

prettier = giving => eslint-config-prettier

Which is this package

• https://github.com/prettier/eslint-config-prettier

• The config is
  ◌ https://github.com/prettier/eslint-config-prettier/blob/main/index.js

"prettier/prettier" = give => "eslint-config-prettier/prettier"

• which would resolve to node_modules/eslint-config-prettier/prettier.js

▪️ That’s why eslint-config-* repos if want to provide extra configs

• They generate files with names
• And they would be accessible
• or they would use npm files resolution

▪️ at the end the resolution algorithm

• after adding "eslint-config-"
◌ gonna be nodejs module resolution algorithm
  - commonjs
  - or esm
  - path.resolve() does use it

The whole naming convention

• There is more than one form
  ◌ check below

prefix

• eslint-plugin
• eslint-config

Convention

• {prefix}-{name}
◌ name {name}
• @{scope}/{prefix}
◌ name @{scope}
• Otherwise if @{scope}/{prefix}-{some_name}
◌ name @{scope}/{some_name}

Example with eslint-plugin prefix

• eslint-plugin-{name}
◌ name {name}
• @{scope}/eslint-plugin
◌ name @{scope}
• Otherwise if @{scope}/eslint-plugin-{some_name}
◌ name @{scope}/{some_name}

Full Examples

• eslint-plugin-prettier
◌ name prettier
• @typescript-eslint/eslint-plugin
◌ name @typescript-eslint

Details of normalization

▪️ For the details check my write-up on the exploration of FlatCompat eslintrc translation tool

• Eslint: FlatCompat utility and its work and magic, a deep dive that demystifies Flat config and translation from eslintrc 🔥🔥 ✨👀
  ◌ Very great deep dive, that covers a lot. Check the navigation notice. To know how to navigate the article. Skimming or directly going to the resume at the end

My Other Eslint related articles ✨

▪️ Flat config system

• ✨ Eslint flat config and new system an ultimate deep dive 2023 ✨ 🔥
• Eslint: FlatCompat utility and its work and magic, a deep dive that demystifies Flat config and translation from eslintrc 🔥
• Eslint: how to name plugins 🔥
• + All below

▪️ Eslint prettier

• Flat config: Setting up Eslint and Prettier with eslint-prettier-plugin 🔥
• eslint-plugin-prettier vs eslint-config-prettier 🔥
• How does eslint-config-prettier works ? 🔥

▪️ String, name resolution (plugin, config)

• Eslint: how to name plugins 🔥
• and this one