Update ESLint (#187)

* Minor eslint cleanup
* Add import sorting

Author: MonicaOlejniczak

.eslintrc.js

@@ -1,82 +1,86 @@
 module.exports = {
-  parser: '@babel/eslint-parser',
   env: {
     browser: true,
     es6: true,
     node: true,
   },
   extends: [
     'eslint:recommended',
+    'plugin:import/recommended',
     'plugin:react/recommended',
     'plugin:prettier/recommended',
   ],
+  globals: {
+    // enable webpack require
+    require: 'readonly',
+    // fix for eslint-plugin-flowtype/384 not supporting wildcard
+    _: 'readonly',
+  },
+  parser: '@babel/eslint-parser',
   parserOptions: {
     ecmaFeatures: {
       jsx: true,
     },
     ecmaVersion: 2018,
     sourceType: 'module',
   },
-  settings: {
-    react: {
-      version: 'detect',
-    },
-  },
-  globals: {
-    // enable webpack require
-    require: 'readonly',
-    // fix for eslint-plugin-flowtype/384 not supporting wildcard
-    _: 'readonly',
-  },
   plugins: ['react', 'react-hooks', 'import'],
   rules: {
-    'no-shadow': ['error'],
-    indent: ['off'],
-    'linebreak-style': ['off'],
-    quotes: ['off'],
-    semi: ['off'],
-    'newline-before-return': ['error'],
-    'prettier/prettier': ['warn'],
-    'react/no-direct-mutation-state': ['off'],
-    'react/display-name': ['off'],
-    'react-hooks/rules-of-hooks': ['error'],
-    'react-hooks/exhaustive-deps': ['warn'],
-    'react/prop-types': ['off'],
+    'import/order': [
+      'error',
+      {
+        alphabetize: {
+          order: 'asc',
+        },
+        'newlines-between': 'always',
+      },
+    ],
+    indent: 'off',
+    'linebreak-style': 'off',
+    'newline-before-return': 'error',
+    'no-shadow': 'error',
+    'prettier/prettier': 'warn',
+    quotes: 'off',
+    'react/display-name': 'off',
+    'react/no-direct-mutation-state': 'off',
+    'react/prop-types': 'off',
+    'react-hooks/exhaustive-deps': 'warn',
+    'react-hooks/rules-of-hooks': 'error',
+    semi: 'off',
   },
   overrides: [
     {
       // Flow specific rules
-      files: [
-        'src/index.js.flow',
-        'src/server/index.js.flow',
-        '*/*flow.js',
-        'examples/*-flow/*/*.js',
-      ],
       extends: ['plugin:flowtype/recommended'],
+      files: ['*.flow'],
       plugins: ['flowtype'],
       rules: {
-        'flowtype/generic-spacing': ['off'],
+        'flowtype/generic-spacing': 'off',
       },
     },
     {
       // TypeScript specific rules
       files: ['*.{ts,tsx}'],
-      extends: ['plugin:@typescript-eslint/recommended'],
+      extends: [
+        'plugin:@typescript-eslint/recommended',
+        'plugin:import/typescript',
+      ],
       rules: {
-        '@typescript-eslint/explicit-function-return-type': 'off',
-        '@typescript-eslint/no-use-before-define': 'off',
-        '@typescript-eslint/no-explicit-any': 'off',
-        '@typescript-eslint/no-implicit-any': 'off',
-        '@typescript-eslint/explicit-member-accessibility': 'off',
-        '@typescript-eslint/no-unnecessary-type-constraint': 'off',
-        '@typescript-eslint/no-non-null-assertion': 'off',
-        '@typescript-eslint/no-empty-interface': 'off',
         '@typescript-eslint/ban-ts-comment': 'off',
         '@typescript-eslint/no-empty-function': 'off',
+        '@typescript-eslint/no-empty-interface': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/no-non-null-assertion': 'off',
         '@typescript-eslint/no-unused-vars': [
           'error',
           { vars: 'all', args: 'after-used', ignoreRestSiblings: true },
         ],
+        '@typescript-eslint/no-unnecessary-type-constraint': 'off',
+      },
+      settings: {
+        'import/resolver': {
+          typescript: true,
+        },
       },
     },
     {
@@ -87,4 +91,9 @@ module.exports = {
       },
     },
   ],
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
 };

examples/basic-routing/about.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { Link } from 'react-resource-router';
 
 export const About = () => (

examples/basic-routing/home.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { Link } from 'react-resource-router';
 
 export const Home = () => (

examples/basic-routing/index.tsx

@@ -1,15 +1,15 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from 'react-dom';
+
+import { About } from './about';
+import { Home } from './home';
 
 import {
   Router,
   RouteComponent,
   createBrowserHistory,
 } from 'react-resource-router';
 
-import { Home } from './home';
-import { About } from './about';
-
 const myHistory = createBrowserHistory();
 
 const appRoutes = [
@@ -37,4 +37,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.getElementById('root'));
+render(<App />, document.getElementById('root'));

examples/hooks/home.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { Link } from 'react-resource-router';
 
 const Home = () => {

examples/hooks/index.tsx

@@ -1,5 +1,9 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from 'react-dom';
+
+import Home from './home';
+import PathParamExample from './use-path-param';
+import QueryParamExample from './use-query-param';
 
 import {
   Router,
@@ -8,10 +12,6 @@ import {
   createRouterSelector,
 } from 'react-resource-router';
 
-import Home from './home';
-import QueryParamExample from './use-query-param';
-import PathParamExample from './use-path-param';
-
 const myHistory = createBrowserHistory();
 const useRouteName = createRouterSelector(s => s.route.name);
 
@@ -54,4 +54,4 @@ const App = () => {
   );
 };
 
-ReactDOM.render(<App />, document.getElementById('root'));
+render(<App />, document.getElementById('root'));

examples/hooks/use-path-param.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { Link, usePathParam } from 'react-resource-router';
 
 const randomStr = (length: number) => {

examples/hooks/use-query-param.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { Link, useQueryParam } from 'react-resource-router';
 
 const randomStr = (length: number) => {

examples/hydration/home.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { createResource, useResource } from 'react-resource-router';
 
 export const homeResource = createResource({

examples/hydration/index.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import { render } from 'react-dom';
 import { defaultRegistry } from 'react-sweet-state';
 
+import { homeRoute } from './routes';
+
 import {
   Router,
   RouteComponent,
   createBrowserHistory,
   StaticRouter,
 } from 'react-resource-router';
 
-import { homeRoute } from './routes';
-
 const myHistory = createBrowserHistory();
 
 const appRoutes = [homeRoute];
@@ -45,7 +45,7 @@ const main = async () => {
     );
   };
 
-  ReactDOM.render(<App />, document.getElementById('root'));
+  render(<App />, document.getElementById('root'));
 };
 
 main();