Eslint: how to name plugins

Eslint has a convention for plugins and module naming. In this article we gonna break it down, clear and simple.

The rule

▪️ plugins names are used in the name of rules 🔥🔥

• plugin-name/some-rule-name ◌ is setting the rule for a plugin with the name plugin-name

▪️ Examples

• "@typescript-eslint/quotes": 0, ◌ @typescript-eslint/eslint-plugin plugin package
• "babel/quotes": 0, ◌ eslint-plugin-babel. plugin package
• "vue/html-self-closing": 0, ◌ eslint-plugin-vue plugin package

If you see in some rules set "@typescript-eslint/quotes"

• you would know that you need to name @typescript-eslint/eslint-plugin plugin as @typescript-eslint

you do it in such a manner

plugins: {
  "@typescript-eslint": typescriptEslintPlugin
}

However, there is an eslint convention. And how eslint used to normalize the names

Naming convention when it comes to translating old plugins

• 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

Plugins that disable or override other plugins or configs settings

Example eslint-config-prettier

• in doc ◌ https://github.com/prettier/eslint-config-prettier#eslintconfigjs-flat-config-plugin-caveat

• It’s saying you can name typescriptEslint 🔥🔥 ◌ I guess that’s the go-to if no doc, outdated doc.Or if you want to be sharp.
• I would say name it "@typescript-eslint": typescriptEslintPlugin ◌ it’s what FlatCompat do ◌ less confusing to people ◌ natural to match with the conventions

▪️ You can also verify that in rules

• that’s what is used

▪️ but if typescriptEslint works

• that means somehow eslint is converting that to match @typescript-eslint ◌ basically adding @ and converting the camel case to use -

▪️ Personally, I’ll go with the full name

• "@typescript-eslint": typescriptEslintPlugin
• and directly I would go check the rules ◌ and see what they used ◌ ctrl|cmd + F when you are searching to handle it fast

Example with FlatConfig and the importance of the naming for plugins

(FlatConfig, naming, plugins)

• Flat config: Setting up Eslint and Prettier with eslint-prettier-plugin

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 🔥
• this one
• • 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: strings names resolution 🔥
• and this one