feat: add eslint-plugin-peer-deps blog

Author: unional

.vscode/ltex.hiddenFalsePositives.en-US.txt

@@ -1,2 +1,4 @@
 {"rule":"MORFOLOGIK_RULE_EN_US","sentence":"^\\Q[NPM version]npm-url [GitHub NodeJS]github-action-url\\E$"}
 {"rule":"HOW_TO_HYPHEN","sentence":"^\\QI would recommend having a quick read through of the How to TypeScript section, and then check out the Supporting Tools section to find out how to set up your project, and use the rest of the book for reference as you need them.\\E$"}
+
+{"rule":"COMMA_PARENTHESIS_WHITESPACE","sentence":"^\\Q- ...\\node_modules\\@typescript-eslint\\eslint-plugin\\dist\\index.js (loaded in \".eslintrc.json\")\n- ...\\node_modules\\eslint-config-react-app\\node_modules\\@typescript-eslint\\eslint-plugin\\dist\\index.js (loaded in \".eslintrc.json » eslint-config-react-app#overrides[0]\")\n```\\E$"}

examples/eslint-plugin-peer/.eslintrc.json

@@ -0,0 +1,8 @@
+{
+  "extends": [
+    "react-app"
+  ],
+  "plugins": [
+    "@typescript-eslint"
+  ]
+}

examples/eslint-plugin-peer/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@unional/eslint-plugin-peer",
+  "private": true,
+  "scripts": {
+    "lint": "eslint --ext=ts ."
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "5.4",
+    "eslint": "^8.15.0",
+    "eslint-config-react-app": "^7.0.1"
+  }
+}

examples/eslint-plugin-peer/src/index.ts

@@ -0,0 +1 @@
+export const empty = {}

github-page/blog/2022-05-15-eslint-plugin-peer-deps.mdx

@@ -0,0 +1,46 @@
+---
+slug: 2022-eslint-plugin-peer-deps
+title: "@typescript-eslint/eslint-plugin should be a peer dependency"
+authors: [unional]
+tags: [typescript, eslint, "@typescript-eslint"]
+---
+
+# The Problem
+
+Recently I run into this problem:
+
+```sh
+ESLint couldn't determine the plugin "@typescript-eslint" uniquely.
+
+- ...\node_modules\@typescript-eslint\eslint-plugin\dist\index.js (loaded in ".eslintrc.json")
+- ...\node_modules\eslint-config-react-app\node_modules\@typescript-eslint\eslint-plugin\dist\index.js (loaded in ".eslintrc.json » eslint-config-react-app#overrides[0]")
+```
+
+It is caused by [eslint-config-react-app] using [@typescript-eslint/eslint-plugin] as a `dependency` instead of a `peer dependency`.
+
+Here is the [GitHub issue] for [eslint-config-react-app].
+
+## Plugin and dependency
+
+The problem is when one plugin uses another plugin,
+it should always declare the dependency as a `peer dependency`.
+
+The reason is simple.
+
+The host application (ESLint in this case) controls and loads its plugins.
+If the host application is not designed to support loading multiple versions of the same plugin at the same time,
+which most of them don't, then the result is an undefined behavior.
+
+That's why ESLint plainly detects and disallows it.
+
+Yes, that means the consuming repository needs to add the dependency themselves.
+Any version incompatibility in the dependency graph would lead to the [doppelgängers] problem.
+
+That is an inherited problem of NodeJS resolution algorithm, and is a topic for another day.
+
+Happy coding, 🧑‍💻
+
+[@typescript-eslint/eslint-plugin]: https://github.com/typescript-eslint/typescript-eslint/tree/main/packages/eslint-plugin
+[eslint-config-react-app]: https://github.com/facebook/create-react-app/tree/main/packages/eslint-config-react-app
+[GitHub issue]: https://github.com/facebook/create-react-app/issues/12400
+[doppelgängers]: https://rushjs.io/pages/advanced/npm_doppelgangers/

yarn.lock

@@ -3286,7 +3286,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@typescript-eslint/experimental-utils@npm:^5.0.0, @typescript-eslint/experimental-utils@npm:^5.23.0":
+"@typescript-eslint/experimental-utils@npm:^5.0.0":
   version: 5.23.0
   resolution: "@typescript-eslint/experimental-utils@npm:5.23.0"
   dependencies:
@@ -3442,9 +3442,7 @@ __metadata:
   dependencies:
     "@typescript-eslint/eslint-plugin": 5.4
     eslint: ^8.15.0
-    eslint-config-prettier: ^8.5.0
     eslint-config-react-app: ^7.0.1
-    eslint-plugin-harmony: ^7.0.1
   languageName: unknown
   linkType: soft
 
@@ -6030,17 +6028,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-config-prettier@npm:^8.5.0":
-  version: 8.5.0
-  resolution: "eslint-config-prettier@npm:8.5.0"
-  peerDependencies:
-    eslint: ">=7.0.0"
-  bin:
-    eslint-config-prettier: bin/cli.js
-  checksum: 0d0f5c32e7a0ad91249467ce71ca92394ccd343178277d318baf32063b79ea90216f4c81d1065d60f96366fdc60f151d4d68ae7811a58bd37228b84c2083f893
-  languageName: node
-  linkType: hard
-
 "eslint-config-react-app@npm:^7.0.1":
   version: 7.0.1
   resolution: "eslint-config-react-app@npm:7.0.1"
@@ -6099,20 +6086,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-plugin-harmony@npm:^7.0.1":
-  version: 7.0.1
-  resolution: "eslint-plugin-harmony@npm:7.0.1"
-  dependencies:
-    "@typescript-eslint/experimental-utils": ^5.23.0
-  peerDependencies:
-    "@typescript-eslint/eslint-plugin": ^5.0.0
-    "@typescript-eslint/parser": ^5.0.0
-    eslint: ">=8.4.0"
-    eslint-config-prettier: ^8.0.0
-  checksum: 2131f12e75f37aa7b3cd9f4ec85a0fa681ac522941fc3064200b5586c352665f2f4be4cdaf9f5a8b009a7d7f5c22e223714dd6a0be647c2d9acb163841c42772
-  languageName: node
-  linkType: hard
-
 "eslint-plugin-import@npm:^2.25.3":
   version: 2.26.0
   resolution: "eslint-plugin-import@npm:2.26.0"