feat: update eslint config (#20)

This is based on the linting rules recently added to threads-native-ui.
Use `--resolve-plugins-relative-to node_modules/@threads/tsconfig`
when invoking the lint command from the app repo.

BREAKING CHANGE: lint rules are stricter than before - linting may break on existing projects.

.eslintrc.js

@@ -24,6 +24,14 @@ module.exports = {
      * Turns off all TypeScript rules that are unnecessary or might conflict with Prettier.
      */
     'prettier/@typescript-eslint',
+    /**
+     * Adds React-related rules.
+     */
+    'plugin:react/recommended',
+    /**
+     * Adds React hooks-related rules.
+     */
+    'plugin:react-hooks/recommended',
   ],
   /**
    * An ESLint parser which leverages TypeScript ESTree to allow for ESLint to lint TypeScript source code.
@@ -36,7 +44,7 @@ module.exports = {
       jsx: true,
     },
   },
-  plugins: ['@typescript-eslint', 'import', 'jsdoc'],
+  plugins: ['@typescript-eslint', 'import', 'jsdoc', '@babel'],
   rules: {
     /**
      * Require that member overloads be consecutive
@@ -60,6 +68,10 @@ module.exports = {
           Object: 'Avoid using the `Object` type. Did you mean `object`?',
           Function:
             'Avoid using the `Function` type. Prefer a specific function type, like `() => void`.',
+          /*
+           * Allow use of '{}' - we use it to define React components with no properties
+           */
+          '{}': false,
         },
       },
     ],
@@ -201,7 +213,7 @@ module.exports = {
     'import/no-extraneous-dependencies': [
       'error',
       {
-        devDependencies: ['**/__tests__/**/*'],
+        devDependencies: ['**/__tests__/**/*', '**/__story__/**/*', '**/fixtures/**/*'],
         optionalDependencies: false,
       },
     ],
@@ -290,8 +302,13 @@ module.exports = {
     'no-fallthrough': 'error',
     /**
      * Disallow this keywords outside of classes or class-like objects.
+     *
+     * We use class fields in our class components, which is an ES proposal.
+     * Eslint generates false positives for no-invalid-this in this case -
+     * we need to use the babel plugin, which checks them correctly.
      */
-    'no-invalid-this': 'error',
+    'no-invalid-this': 'off',
+    '@babel/no-invalid-this': 'error',
     /**
      * Disallow Primitive Wrapper Instances
      */
@@ -364,5 +381,30 @@ module.exports = {
      * Require calls to isNaN() when checking for NaN
      */
     'use-isnan': 'error',
+
+    // React-specific rule overrides
+
+    /**
+     * We use TypeScript - we don't use dynamic prop type checks
+     */
+    'react/prop-types': 'off',
+    /**
+     * We use anonymous functions for components - having displayNames would be good,
+     * but we don't want to change the entire code base
+     */
+    'react/display-name': 'off',
+    /**
+     * Enable ' in unescaped entities - it's safe and escaping it makes adding copy harder
+     */
+    'react/no-unescaped-entities': [
+      'error',
+      {
+        forbid: ['>', '}', '"'],
+      },
+    ],
+    /**
+     * Make exhaustive deps mandatory
+     */
+    'react-hooks/exhaustive-deps': 'error',
   },
 };

package.json

@@ -12,6 +12,7 @@
   "license": "MIT",
   "keywords": [
     "tslint",
+    "eslint",
     "typescript",
     "prettier",
     "commitlint",
@@ -27,6 +28,9 @@
     "release": "semantic-release"
   },
   "dependencies": {
+    "@babel/eslint-plugin": "^7.11.5",
+    "eslint-plugin-react": "^7.20.6",
+    "eslint-plugin-react-hooks": "^4.1.2",
     "@commitlint/config-conventional": "^8.0.0",
     "@typescript-eslint/eslint-plugin": "^3.6.0",
     "@typescript-eslint/parser": "^3.6.0",