eslint-plugin-prettier vs eslint-config-prettier

This article clearly unvails the difference between eslint-plugin-prettier and eslint-config-prettier.

eslint-plugin-prettier

• add linting
• load prettier config
• and execute formatting through eslint

eslint-config-prettier

▪️ provide rules that

• disable conflicting rules of eslint with prettier
  ◌ intended so that you use prettier separately from eslint
  ◌ And not have eslint screw prettier formatting and conflicting
• How does eslint-config-prettier works ? 🔥

▪️ Does also provide a CLI to check if there are any conflicts between

• prettier config
• and actual eslint config

So mmmm what !!!

• If you count to use prettier separately from eslint
  ✨ use only eslint-config-prettier
• If you count to use prettier through eslint with linting prettier problems, and formating through eslint by fixes, or by setting eslint as formatter
  ✨ Then you should use eslint-plugin-prettier
  - ( which does internally use eslint-config-prettier to disable the conflicting rules )

eslint-plugin-prettier does use eslint-config-prettier

• eslint-plugin-prettier provide plugin:prettier/recommended config for extends

which is

{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error",
    "arrow-body-style": "off",
    "prefer-arrow-callback": "off"
  }
}

"extends": ["prettier"],

=> eslint-config-prettier

"plugins": ["prettier"],

=> eslint-plugin-prettier

This is the eslint string resolution algorithms

• Eslint: string names resolution

eslint strings resolution

• Eslint: string names resolution

✨ plugins

▪️ plugins => whatever string that doesn't have the prefix yet. prefix it with eslint-plugin-

• ex:

plugins: ["dragon/crazy"]

===> eslint-plugin-dragon/crazy

Which will be resolved 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 be resolved 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 ❌

My Other Eslint related Articles

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

Helpful

• Eslint: how to name plugins
• Eslint: strings names resolution
• ✨ Eslint flat config and new system an ultimate deep dive 2023 ✨🔥