Summary

The article distinguishes between eslint-plugin-prettier and eslint-config-prettier, explaining their distinct roles in integrating Prettier code formatting with ESLint linting rules.

Abstract

The provided web content delves into the differences between eslint-plugin-prettier and eslint-config-prettier. It explains that eslint-plugin-prettier is designed to add linting for Prettier code style issues through ESLint, effectively running Prettier's formatting checks as part of the ESLint process. On the other hand, eslint-config-prettier is intended to disable any ESLint rules that might conflict with Prettier's formatting, ensuring that Prettier's formatting is not disrupted by ESLint. The article also notes that eslint-plugin-prettier internally uses eslint-config-prettier to manage conflicting rules. It advises developers to choose between the two tools based on whether they prefer to use Prettier separately from ESLint or integrate it with ESLint for linting and auto-fixing capabilities. Additionally, the article provides insights into ESLint's string resolution for plugins and configurations, detailing how ESLint interprets and resolves plugin and config names, and what happens if a specified package does not exist.

Opinions

The author suggests that developers who wish to use Prettier separately from ESLint should opt for eslint-config-prettier.
For those who want to integrate Prettier with ESLint for both linting and formatting, eslint-plugin-prettier is recommended.
The article emphasizes that eslint-plugin-prettier includes eslint-config-prettier to ensure that conflicting ESLint rules are disabled.
The author provides a clear preference for using eslint-plugin-prettier when a unified linting and formatting process is desired, as it streamlines workflow by handling both through ESLint.
The article highlights the importance of understanding ESLint's module resolution mechanism for plugins and configs to avoid errors and ensure proper setup.

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-

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

Helpful