FEI-4957.11: Reorganize eslint configs (#535)

## Summary:
When I initially updating the eslint config to support TypeScript, I added settings to .eslintrc.js that I should've added to eslint-config-khan/index.js.  Without these settings, using @khanacademy/eslint-config in other codebases would fail.

TODO:
- [x] update eslint-config-khan's package.json to have the appropriate peer deps

Issue: FEI-4957

## Test plan:
- add some lint
- see that it's reported in VSCode
- yarn lint, see that it's reported
- fix the lint
- yarn lint, see there's no lint

Author: kevinbarabash

Reviewers: jeresig, kevinbarabash

Required Reviewers:

Approved By: jeresig, jeresig

Checks: ⌛ Prime node_modules cache for primary configuration (ubuntu-latest, 16.x), ⌛ gerald, ⌛ Analyze (javascript), ⏭  dependabot

Pull Request URL: #535

.changeset/long-hairs-turn.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/eslint-config": patch
+---
+
+Add missing settings

.eslintrc.js

@@ -9,9 +9,6 @@ module.exports = {
                 "jsx-a11y": ["./*.js", "src/*.js"],
             },
         },
-        "import/parsers": {
-            "@typescript-eslint/parser": [".ts", ".tsx"],
-        },
         "import/resolver": {
             typescript: {
                 project: [
@@ -26,7 +23,6 @@ module.exports = {
                 ],
             },
         },
-        "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
     },
     globals: {
         __IS_BROWSER__: "readonly",
@@ -64,14 +60,25 @@ module.exports = {
         },
     ],
     rules: {
+        /**
+         * built-in rules
+         */
         "new-cap": "off",
         "no-invalid-this": "off",
         "object-curly-spacing": "off",
         semi: "off",
+
+        /**
+         * @babel rules
+         */
         "@babel/new-cap": "error",
         "@babel/no-invalid-this": "error",
         "@babel/object-curly-spacing": "error",
         "@babel/semi": "error",
+
+        /**
+         * import rules
+         */
         "import/no-default-export": "error",
         "import/no-unresolved": "error",
         "import/named": "error",
@@ -101,14 +108,6 @@ module.exports = {
                 ignorePackages: true,
             },
         ],
-        "jest/no-focused-tests": "error",
-        "promise/always-return": "error",
-        "promise/no-return-wrap": "error",
-        "promise/param-names": "error",
-        "promise/catch-or-return": "error",
-        "promise/no-new-statics": "error",
-        "promise/no-return-in-finally": "error",
-        "monorepo/no-internal-import": "error",
         // NOTE: This rule reports false positives for cross-module imports using
         // `@khanacademy/wonder-stuff-*`.  This is likely due to a bad interaction
         // with the settings we're using for `import/resolver`.
@@ -125,6 +124,24 @@ module.exports = {
             },
         ],
 
-        "@typescript-eslint/no-explicit-any": "off",
+        /**
+         * jest rules
+         */
+        "jest/no-focused-tests": "error",
+
+        /**
+         * promise rules
+         */
+        "promise/always-return": "error",
+        "promise/no-return-wrap": "error",
+        "promise/param-names": "error",
+        "promise/catch-or-return": "error",
+        "promise/no-new-statics": "error",
+        "promise/no-return-in-finally": "error",
+
+        /**
+         * monorepo rules
+         */
+        "monorepo/no-internal-import": "error",
     },
 };

packages/eslint-config-khan/README.md

@@ -1,3 +1,49 @@
 # eslint-config-khan
 
 Shared Khan Academy eslint configuration.
+
+## Quick Start
+
+- `yarn add @khanacademy/eslint-config`
+- Update your .eslintrc.js file to:
+  - extend `"@khanacademy"`
+  - include settings for `"import/resolver"`
+
+For monorepos the `"import/resolver"` settings will look like this:
+
+```
+    settings: {
+        "import/resolver": {
+            typescript: {
+                project: [
+                    "packages/*/tsconfig.json",
+                    "packages/tsconfig-shared.json",
+                ],
+            },
+            node: {
+                project: [
+                    "packages/*/tsconfig.json",
+                    "packages/tsconfig-shared.json",
+                ],
+            },
+        },
+    },
+```
+
+For regulard repos, the settings will look like this:
+
+```
+For monorepos the `"import/resolver"` settings will look like this:
+
+```
+    settings: {
+        "import/resolver": {
+            typescript: {
+                project: "tsconfig.json",
+            },
+            node: {
+                project: "tsconfig.json",
+            },
+        },
+    },
+```

packages/eslint-config-khan/index.js

@@ -24,6 +24,10 @@ module.exports = {
         react: {
             version: "16.4",
         },
+        "import/parsers": {
+            "@typescript-eslint/parser": [".ts", ".tsx"],
+        },
+        "import/extensions": [".js", ".jsx", ".ts", ".tsx"],
     },
     rules: {
         /**
@@ -61,11 +65,7 @@ module.exports = {
         "no-unexpected-multiline": ERROR,
         "no-unreachable": ERROR,
         "no-unused-expressions": ERROR,
-        "no-unused-vars": OFF,
-        "@typescript-eslint/no-unused-vars": [
-            ERROR,
-            {args: "none", varsIgnorePattern: "^_*$"},
-        ],
+        "no-unused-vars": OFF, // Superseded by @typescript-eslint/no-unused-vars
         "no-useless-call": ERROR,
         "no-var": ERROR,
         "no-with": ERROR,
@@ -121,5 +121,14 @@ module.exports = {
         "react/sort-prop-types": OFF, // We tried this, but there wasn't much benefit.
         "react/no-unsafe": WARN,
         "react/no-deprecated": WARN,
+
+        /**
+         * typescript rules
+         */
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-unused-vars": [
+            ERROR,
+            {args: "none", varsIgnorePattern: "^_*$"},
+        ],
     },
 };

packages/eslint-config-khan/package.json

@@ -11,17 +11,14 @@
     "license": "MIT",
     "dependencies": {},
     "peerDependencies": {
+        "@typescript-eslint/eslint-plugin": "^5.52.0",
+        "@typescript-eslint/parser": "^5.52.0",
         "eslint": "^7.27.0",
         "eslint-config-prettier": "^8.3.0",
-        "eslint-plugin-babel": "^5.3.1",
-        "eslint-plugin-eslint-comments": "^3.2.0",
-        "eslint-plugin-graphql": "^4.0.0",
         "eslint-plugin-import": "^2.23.4",
         "eslint-plugin-jsx-a11y": "^6.4.1",
         "eslint-plugin-prettier": "^3.4.0",
         "eslint-plugin-react": "^7.24.0",
-        "eslint-plugin-react-hooks": "^4.2.0",
-        "eslint-plugin-react-native": "^3.11.0",
-        "eslint-plugin-react-native-animation-linter": "^0.1.2"
+        "eslint-import-resolver-typescript": "^3.5.3"
     }
-}
+}