fix: Remove warnings on installation (#229)

iamturns · web-flow · commit c010a65e0e55 · 2021-08-20T21:54:53.000+10:00
BREAKING CHANGE: Install `eslint-config-airbnb` (or `eslint-config-airbnb-base`) and `@typescript-eslint/parser` as dependencies. Follow the updated README.md file.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,5 +1,5 @@
 module.exports = {
-  extends: ['./base.js', 'prettier'],
+  extends: ['eslint-config-airbnb-base', './base.js', 'prettier'],
   parserOptions: {
     project: './tsconfig.json',
   },
diff --git a/README.md b/README.md
@@ -2,49 +2,41 @@
 
 [![Version](https://img.shields.io/npm/v/eslint-config-airbnb-typescript.svg?style=flat-square)](https://www.npmjs.com/package/eslint-config-airbnb-typescript?activeTab=versions) [![Downloads](https://img.shields.io/npm/dt/eslint-config-airbnb-typescript.svg?style=flat-square)](https://www.npmjs.com/package/eslint-config-airbnb-typescript) [![Last commit](https://img.shields.io/github/last-commit/iamturns/eslint-config-airbnb-typescript.svg?style=flat-square)](https://github.com/iamturns/eslint-config-airbnb-typescript/graphs/commit-activity) [![Build](https://img.shields.io/circleci/project/github/iamturns/eslint-config-airbnb-typescript/master.svg?style=flat-square)](https://circleci.com/gh/iamturns/eslint-config-airbnb-typescript) [![License](https://img.shields.io/github/license/iamturns/eslint-config-airbnb-typescript.svg?style=flat-square)](https://github.com/iamturns/eslint-config-airbnb-typescript/blob/master/LICENSE) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](https://github.com/iamturns/eslint-config-airbnb-typescript/blob/master/CONTRIBUTING.md) [![Code of conduct](https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square)](https://github.com/iamturns/eslint-config-airbnb-typescript/blob/master/CODE_OF_CONDUCT.md)
 
-Airbnb's ESLint config with TypeScript support
+Enhances Airbnb's ESLint config with TypeScript support
 
 ## Setup
 
-### 1) Install
+### 1) Setup regular Airbnb config
 
-```
-npm install eslint-config-airbnb-typescript --save-dev
-```
-
-### 2) Install ESLint plugins
+Make sure you have the regular Airbnb config setup. See [eslint-config-airbnb](https://www.npmjs.com/package/eslint-config-airbnb), or [eslint-config-airbnb-base](https://www.npmjs.com/package/eslint-config-airbnb-base) if you're not using React.
 
-ESLint plugins used by this config must also be installed within your project. This is a limitation within ESLint (see [RFC](https://github.com/eslint/rfcs/tree/master/designs/2019-config-simplification) and [progress](https://github.com/eslint/eslint/issues/13481)).
+### 2) Install this config (and peer dependencies)
 
 ```bash
-npm install eslint-plugin-import@^2.22.0 \
-            eslint-plugin-jsx-a11y@^6.3.1 \
-            eslint-plugin-react@^7.20.3 \
-            eslint-plugin-react-hooks@^4.0.8 \
-            @typescript-eslint/eslint-plugin@^4.4.1 \
-            --save-dev
-```
-
-If you don't need React support:
-
-```bash
-npm install eslint-plugin-import@^2.22.0 \
-            @typescript-eslint/eslint-plugin@^4.4.1 \
+npm install eslint-config-airbnb-typescript \
+            @typescript-eslint/eslint-plugin \
+            @typescript-eslint/parser \
             --save-dev
 ```
 
 ### 3) Configure ESLint
 
-Add `"extends": "airbnb-typescript"` to your ESLint config file.
+Within your ESLint config file:
 
-If you don't need React support, add `"extends": "airbnb-typescript/base"` instead.
+```diff
+extends: [
+  'airbnb',
++ 'airbnb-typescript'
+]
+```
 
-An example `.eslintrc.js`:
+If you don't need React support:
 
-```js
-module.exports = {
-  extends: ['airbnb-typescript'],
-};
+```diff
+extends: [
+  'airbnb-base',
++ 'airbnb-typescript/base'
+]
 ```
 
 ### 4) Configure the ESLint TypeScript parser
@@ -56,12 +48,12 @@ In your ESLint config, set [parserOptions.project](https://github.com/typescript
 For example:
 
 ```diff
- module.exports = {
-   extends: ['airbnb-typescript'],
-+  parserOptions: {
-+    project: './tsconfig.json',
+{
+  extends: ['airbnb', 'airbnb-typescript'],
++ parserOptions: {
++   project: './tsconfig.json'
 + }
- };
+}
 ```
 
 ### 5) Run ESLint
@@ -78,10 +70,6 @@ You can also get results in realtime inside most IDEs via a plugin.
 
 ## FAQ
 
-### Does this work with JavaScript files too?
-
-Yep! This config is a drop-in replacement for `eslint-config-airbnb`, decorating it with TypeScript support.
-
 ### I get this error when running ESLint: "The file must be included in at least one of the projects provided"
 
 This means you are attempting to lint a file that `tsconfig.json` doesn't include.
@@ -104,17 +92,20 @@ parserOptions: {
 }
 ```
 
-### I get peer dependency warnings for ESLint React plugins, but I'm using `airbnb-typescript/base`
+### Why do I need the peer dependencies?
+
+`@typescript-eslint/eslint-plugin` is a peer dependency because of a limitation within ESLint. See [issue](https://github.com/eslint/eslint/issues/3458), [RFC](https://github.com/eslint/rfcs/tree/master/designs/2019-config-simplification), and [progress](https://github.com/eslint/eslint/issues/13481).
 
-This is a known problem. Some suggestions exist in this [GitHub issue](https://github.com/iamturns/eslint-config-airbnb-typescript/issues/6).
+`@typescript-eslint/parser` is a peer dependency because the version number must match `@typescript-eslint/eslint-plugin`.
 
 ### I wish this config would support [...]
 
-The goal of `eslint-config-airbnb-typescript` is to simply decorate `eslint-config-airbnb` with TypeScript support. It's not a single config to cater for all TypeScript linting requirements. For additional functionality, alter your ESLint config file. For example:
+This config simply enhances the Airbnb with TypeScript support. It's not a single config to cater for all TypeScript linting requirements. For additional functionality, alter your ESLint config file. For example:
 
 ```js
 module.exports = {
   extends: [
+    'airbnb',
     'airbnb-typescript',
     'airbnb/hooks',
     'plugin:@typescript-eslint/recommended',
diff --git a/base.js b/base.js
@@ -1,3 +1,3 @@
 module.exports = {
-  extends: ['eslint-config-airbnb-base', './lib/shared.js'].map(require.resolve),
+  extends: ['./lib/shared.js'].map(require.resolve),
 };
diff --git a/index.js b/index.js
@@ -1,6 +1,6 @@
 // This file adds some React specific settings. Not using React? Use base.js instead.
 module.exports = {
-  extends: ['eslint-config-airbnb', './lib/shared'].map(require.resolve),
+  extends: ['./lib/shared'].map(require.resolve),
   settings: {
     // Append 'ts' extensions to Airbnb 'import/resolver' setting
     'import/resolver': {
diff --git a/lib/shared.js b/lib/shared.js
@@ -1,9 +1,11 @@
+/* eslint-disable import/no-extraneous-dependencies */
 const { rules: baseBestPracticesRules } = require('eslint-config-airbnb-base/rules/best-practices');
 const { rules: baseErrorsRules } = require('eslint-config-airbnb-base/rules/errors');
 const { rules: baseES6Rules } = require('eslint-config-airbnb-base/rules/es6');
 const { rules: baseImportsRules } = require('eslint-config-airbnb-base/rules/imports');
 const { rules: baseStyleRules } = require('eslint-config-airbnb-base/rules/style');
 const { rules: baseVariablesRules } = require('eslint-config-airbnb-base/rules/variables');
+/* eslint-enable import/no-extraneous-dependencies */
 
 module.exports = {
   plugins: ['@typescript-eslint'],
diff --git a/package.json b/package.json
@@ -21,15 +21,15 @@
     "lint": "eslint ./",
     "validate": "npm run lint"
   },
-  "dependencies": {
-    "@typescript-eslint/parser": "^4.4.1",
-    "eslint-config-airbnb": "^18.2.0",
-    "eslint-config-airbnb-base": "^14.2.0"
+  "peerDependencies": {
+    "@typescript-eslint/eslint-plugin": "^4.4.1",
+    "@typescript-eslint/parser": "^4.4.1"
   },
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "4.14.2",
     "doctoc": "2.0.1",
     "eslint": "7.32.0",
+    "eslint-config-airbnb-base": "^14.2.1",
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-import": "2.24.1",
     "husky": "4.3.8",
diff --git a/renovate.json b/renovate.json
@@ -2,11 +2,7 @@
   "extends": ["config:base"],
   "packageRules": [
     {
-      "packageNames": [
-        "@typescript-eslint/parser",
-        "eslint-config-airbnb",
-        "eslint-config-airbnb-base"
-      ],
+      "packageNames": ["@typescript-eslint/eslint-plugin", "@typescript-eslint/parser"],
       "rangeStrategy": "replace"
     }
   ]

Original file line number	Diff line number	Diff line change
`@@ -2,11 +2,7 @@`
`2`	`2`	`"extends": ["config:base"],`
`3`	`3`	`"packageRules": [`
`4`	`4`	`{`
`5`		`- "packageNames": [`
`6`		`- "@typescript-eslint/parser",`
`7`		`- "eslint-config-airbnb",`
`8`		`- "eslint-config-airbnb-base"`
`9`		`- ],`
	`5`	`+ "packageNames": ["@typescript-eslint/eslint-plugin", "@typescript-eslint/parser"],`
`10`	`6`	`"rangeStrategy": "replace"`
`11`	`7`	`}`
`12`	`8`	`]`