Add eslint-plugin-compat

.babelrc.js

-const path = require('path');
-
-module.exports = {
-  plugins: [
-    [
-      'module-resolver',
-      {
-        alias: {
-          components: path.join(__dirname, './src/components'),
-        },
-      },
-    ],
-    [
-      'import',
-      {
-        libraryName: 'antd',
-        style: true, // or 'css'
-      },
-    ],
-  ],
-};

.eslintrc.js

 module.exports = {
   parser: 'babel-eslint',
-  extends: ['airbnb', 'prettier'],
+  extends: ['airbnb', 'prettier', 'plugin:compat/recommended'],
   env: {
     browser: true,
     node: true,
@@ -13,7 +13,6 @@ module.exports = {
     'react/jsx-filename-extension': [1, { extensions: ['.js'] }],
     'react/jsx-wrap-multilines': 0,
     'react/prop-types': 0,
-    'react/prefer-stateless-function': 0,
     'react/forbid-prop-types': 0,
     'react/jsx-one-expression-per-line': 0,
     'import/no-unresolved': 0,
@@ -24,6 +23,6 @@ module.exports = {
     'jsx-a11y/anchor-is-valid': 0,
   },
   settings: {
-    polyfills: ['fetch', 'promises'],
+    polyfills: ['fetch', 'promises', 'url'],
   },
 };

package.json

@@ -50,7 +50,7 @@
     "@types/react-dom": "^16.0.6",
     "antd-pro-merge-less": "^0.0.9",
     "antd-pro-theme-webpack-plugin": "^1.1.8",
-    "babel-eslint": "^9.0.0",
+    "babel-eslint": "^8.2.6",
     "cross-env": "^5.1.1",
     "cross-port-killer": "^1.0.1",
     "enzyme": "^3.4.4",
@@ -59,7 +59,6 @@
     "eslint-config-prettier": "^3.0.1",
     "eslint-plugin-babel": "^5.1.0",
     "eslint-plugin-compat": "^2.5.1",
-    "eslint-plugin-flowtype": "2.50.0",
     "eslint-plugin-import": "^2.8.0",
     "eslint-plugin-jsx-a11y": "^6.0.3",
     "eslint-plugin-markdown": "^1.0.0-beta.6",

src/components/Authorized/Authorized.js

-import React from 'react';
 import CheckPermissions from './CheckPermissions';
 
-class Authorized extends React.Component {
-  render() {
-    const { children, authority, noMatch = null } = this.props;
-    const childrenRender = typeof children === 'undefined' ? null : children;
-    return CheckPermissions(authority, childrenRender, noMatch);
-  }
-}
+const Authorized = ({ children, authority, noMatch = null }) => {
+  const childrenRender = typeof children === 'undefined' ? null : children;
+  return CheckPermissions(authority, childrenRender, noMatch);
+};
 
 export default Authorized;

src/pages/Exception/403.js

-import React, { Component } from 'react';
+import React from 'react';
 import { formatMessage } from 'umi/locale';
 import Link from 'umi/link';
 import Exception from '@/components/Exception';
 
-class Exception403 extends Component {
-  render() {
-    return (
-      <Exception
-        type="403"
-        desc={formatMessage({ id: 'app.exception.description.403' }, {})}
-        style={{ minHeight: 500, height: '80%' }}
-        linkElement={Link}
-        backText={formatMessage({ id: 'app.exception.back' })}
-      />
-    );
-  }
-}
+const Exception403 = () => (
+  <Exception
+    type="403"
+    desc={formatMessage({ id: 'app.exception.description.403' }, {})}
+    style={{ minHeight: 500, height: '80%' }}
+    linkElement={Link}
+    backText={formatMessage({ id: 'app.exception.back' })}
+  />
+);
+
 export default Exception403;

src/pages/Exception/404.js

-import React, { Component } from 'react';
+import React from 'react';
 import { formatMessage } from 'umi/locale';
 import Link from 'umi/link';
 import Exception from '@/components/Exception';
 
-class Exception404 extends Component {
-  render() {
-    return (
-      <Exception
-        type="404"
-        desc={formatMessage({ id: 'app.exception.description.404' }, {})}
-        style={{ minHeight: 500, height: '80%' }}
-        linkElement={Link}
-        backText={formatMessage({ id: 'app.exception.back' })}
-      />
-    );
-  }
-}
+const Exception404 = () => (
+  <Exception
+    type="404"
+    desc={formatMessage({ id: 'app.exception.description.404' }, {})}
+    style={{ minHeight: 500, height: '80%' }}
+    linkElement={Link}
+    backText={formatMessage({ id: 'app.exception.back' })}
+  />
+);
+
 export default Exception404;

src/pages/Exception/500.js

-import React, { Component } from 'react';
+import React from 'react';
 import { formatMessage } from 'umi/locale';
 import Link from 'umi/link';
 import Exception from '@/components/Exception';
 
-class Exception500 extends Component {
-  render() {
-    return (
-      <Exception
-        type="500"
-        desc={formatMessage({ id: 'app.exception.description.500' }, {})}
-        style={{ minHeight: 500, height: '80%' }}
-        linkElement={Link}
-        backText={formatMessage({ id: 'app.exception.back' })}
-      />
-    );
-  }
-}
+const Exception500 = () => (
+  <Exception
+    type="500"
+    desc={formatMessage({ id: 'app.exception.description.500' }, {})}
+    style={{ minHeight: 500, height: '80%' }}
+    linkElement={Link}
+    backText={formatMessage({ id: 'app.exception.back' })}
+  />
+);
+
 export default Exception500;