refactor: eslint

Author: xiaosongxiaosong

.eslintrc.js

@@ -1,17 +1,20 @@
 module.exports = {
+  env: {
+    browser: true,
+    es2021: true,
+  },
+  extends: ['plugin:react/recommended', 'react-app', 'airbnb', 'plugin:prettier/recommended'],
   parser: 'babel-eslint',
-  extends: ['react-app', 'airbnb', 'prettier', 'prettier/react'],
-  plugins: ['prettier'],
-  globals: {
-    // 这里填入你的项目需要的全局变量
-    // 这里值为 false 表示这个全局变量不允许被重新赋值，比如：
-    //
-    // React: false,
-    // ReactDOM: false
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2021,
+    sourceType: 'module',
   },
+  plugins: ['react', 'prettier'],
   rules: {
     // 这里填入你的项目需要的个性化配置
-    'prettier/prettier': 'error',
     'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
     'react-hooks/exhaustive-deps': 'error', // Checks effect dependencies
     yoda: [2, 'always'],
@@ -28,4 +31,5 @@ module.exports = {
     'react/jsx-props-no-spreading': 0,
     'no-empty': ['error', { allowEmptyCatch: true }],
   },
+  ignorePatterns: ['build', 'dist', 'node_modules'],
 };

.gitignore

@@ -23,3 +23,4 @@ npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 *.log
+___*

package.json

@@ -28,15 +28,34 @@
     "nrm": "nrm use taobao"
   },
   "devDependencies": {
+    "@ant-design/icons": "^4.7.0",
     "@babel/core": "^7.15.8",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.5",
     "@rollup/plugin-url": "^6.1.0",
     "@svgr/rollup": "^5.5.0",
+    "antd": "^4.16.13",
+    "babel-eslint": "^10.1.0",
+    "eslint": "^7.32.0",
+    "eslint-config-airbnb": "^18.2.1",
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-config-react-app": "^6.0.0",
+    "eslint-plugin-flowtype": "^6.1.0",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-jsx-a11y": "^6.4.1",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.26.1",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "fbemitter": "^3.0.0",
     "gh-pages": "^3.2.3",
     "less": "^4.1.2",
+    "numeral": "^2.0.6",
     "postcss": "^8.3.9",
+    "prettier": "^2.4.1",
+    "prop-types": "^15.7.2",
+    "react": "^17.0.2",
+    "react-swf": "^1.0.7",
     "rollup": "^2.58.0",
     "rollup-plugin-filesize": "^9.1.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",

scripts/rollup.config.js

@@ -1,31 +1,31 @@
 // import resolve from '@rollup/plugin-node-resolve';
-import { nodeResolve } from "@rollup/plugin-node-resolve";
-import commonjs from "@rollup/plugin-commonjs";
-import { babel } from "@rollup/plugin-babel";
-import external from "rollup-plugin-peer-deps-external";
-import postcss from "rollup-plugin-postcss";
-import url from "@rollup/plugin-url";
-import svgr from "@svgr/rollup";
-import filesize from "rollup-plugin-filesize";
+import { nodeResolve } from '@rollup/plugin-node-resolve';
+import commonjs from '@rollup/plugin-commonjs';
+import { babel } from '@rollup/plugin-babel';
+import external from 'rollup-plugin-peer-deps-external';
+import postcss from 'rollup-plugin-postcss';
+import url from '@rollup/plugin-url';
+import svgr from '@svgr/rollup';
+import filesize from 'rollup-plugin-filesize';
 
-import pkg from "../package.json";
+import pkg from '../package.json';
 
 export default {
-  input: "src/index.js",
+  input: 'src/index.js',
   output: [
     {
       file: pkg.browser,
       name: pkg.name,
-      format: "umd",
+      format: 'umd',
       sourcemap: true,
       globals: {
-        react: "React",
-        "prop-types": "PropTypes",
-        "numeral": "numeral",
-        "antd": "antd",
-        "@ant-design/icons": "@ant-design/icons",
-        "react-swf": "ReactSWF",
-        "fbemitter": "fbemitter",
+        react: 'React',
+        'prop-types': 'PropTypes',
+        numeral: 'numeral',
+        antd: 'antd',
+        '@ant-design/icons': '@ant-design/icons',
+        'react-swf': 'ReactSWF',
+        fbemitter: 'fbemitter',
       },
     },
   ],
@@ -37,23 +37,23 @@ export default {
     url(),
     url({
       limit: 0,
-      include: ["**/*.swf"],
+      include: ['**/*.swf'],
       emitFiles: true,
-      fileName: "[name][extname]",
+      fileName: '[name][extname]',
     }),
     svgr(),
     babel({
       babelrc: false,
-      exclude: "node_modules/**",
-      babelHelpers: "bundled",
+      exclude: 'node_modules/**',
+      babelHelpers: 'bundled',
       presets: [
         [
-          "@babel/preset-env",
+          '@babel/preset-env',
           {
             modules: false,
           },
         ],
-        "@babel/preset-react",
+        '@babel/preset-react',
       ],
     }),
     nodeResolve(),

src/GrindPlayer/GrindPlayer.js

@@ -27,7 +27,7 @@ class GrindPlayer {
         this.el = document.getElementById(this.id);
         // this.el.addEventListener('mediaError', () => );
       }),
-      emitter.addListener(`${this.id}.mediaSize`, data => {
+      emitter.addListener(`${this.id}.mediaSize`, (data) => {
         if (0 === data.videoHeight && 0 === data.videoWidth) {
           this.emitter.emit('canplay');
         } else {
@@ -41,11 +41,11 @@ class GrindPlayer {
       emitter.addListener(`${this.id}.complete`, () => this.emitter.emit('ended')),
       emitter.addListener(`${this.id}.buffering`, () => this.emitter.emit('waiting')),
 
-      emitter.addListener(`${this.id}.durationChange`, e => this.emitter.emit('durationchange', e)),
-      emitter.addListener(`${this.id}.timeChange`, e => this.emitter.emit('timeupdate', e)),
-      emitter.addListener(`${this.id}.progress`, e => this.emitter.emit('progress', e)),
+      emitter.addListener(`${this.id}.durationChange`, (e) => this.emitter.emit('durationchange', e)),
+      emitter.addListener(`${this.id}.timeChange`, (e) => this.emitter.emit('timeupdate', e)),
+      emitter.addListener(`${this.id}.progress`, (e) => this.emitter.emit('progress', e)),
 
-      emitter.addListener(`${this.id}.volumeChange`, e => this.emitter.emit('volumechange', e)),
+      emitter.addListener(`${this.id}.volumeChange`, (e) => this.emitter.emit('volumechange', e)),
     ];
   }
 
@@ -68,7 +68,7 @@ class GrindPlayer {
     if (!this.eventMap) {
       return;
     }
-    this.eventMap = this.eventMap.filter(it => {
+    this.eventMap = this.eventMap.filter((it) => {
       if (it.event !== event) {
         return true;
       }
@@ -82,12 +82,12 @@ class GrindPlayer {
 
   destroy() {
     if (this.eventMap) {
-      this.eventMap.map(it => it.token.remove());
+      this.eventMap.map((it) => it.token.remove());
       delete this.eventMap;
     }
 
     if (this.tokenList) {
-      this.tokenList.map(it => it.remove());
+      this.tokenList.map((it) => it.remove());
       delete this.tokenList;
     }
 

src/GrindPlayer/useTime.js

@@ -2,15 +2,15 @@ import React from 'react';
 
 export default ({ ref, dispatch }) => {
   const onDurationChange = React.useCallback(
-    e => {
+    (e) => {
       const v = e.duration;
       dispatch({ type: 'update', payload: { duration: Number.isNaN(v) || Number.isFinite(v) || !v ? v : 0 } });
     },
     [dispatch],
   );
 
   const onTimeUpdate = React.useCallback(
-    e => {
+    (e) => {
       if (Number.isNaN(e.currentTime)) {
         return;
       }
@@ -19,12 +19,13 @@ export default ({ ref, dispatch }) => {
     [dispatch],
   );
 
-  const onProgress = React.useCallback(e => dispatch({ type: 'update', payload: { buffered: e.buffered } }), [
-    dispatch,
-  ]);
+  const onProgress = React.useCallback(
+    (e) => dispatch({ type: 'update', payload: { buffered: e.buffered } }),
+    [dispatch],
+  );
 
   const changeCurrentTime = React.useCallback(
-    t => {
+    (t) => {
       const v = parseFloat(t);
       if (Number.isNaN(v) || !ref.current || !ref.current.player) {
         return;

src/GrindPlayer/useVolume.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 export default ({ ref, dispatch }) => {
-  const onVolumeChange = React.useCallback(e => dispatch({ type: 'update', payload: e }), [dispatch]);
+  const onVolumeChange = React.useCallback((e) => dispatch({ type: 'update', payload: e }), [dispatch]);
 
   const onMutedClick = React.useCallback(() => {
     if (!ref.current || !ref.current.player) {
@@ -15,7 +15,7 @@ export default ({ ref, dispatch }) => {
   }, [ref]);
 
   const changeVolume = React.useCallback(
-    v => {
+    (v) => {
       if (ref.current && ref.current.player) {
         ref.current.player.invoker('setVolume', v);
       }

src/ReactPlayerSkin/index.js

@@ -60,7 +60,7 @@ const ReactPlayerSkin = React.memo(
     const onBodyClick = React.useCallback(() => setVisible(false), []);
 
     const onMenuClick = React.useCallback(
-      e => {
+      (e) => {
         changePlaybackRate(parseFloat(e.key, 10));
         setVisible(false);
       },
@@ -161,7 +161,7 @@ const ReactPlayerSkin = React.memo(
                   </button>
                 )}
                 <span className={styles.volumeSlider}>
-                  <Slider value={volume * 100} onChange={v => changeVolume(v / 100)} max={100} />
+                  <Slider value={volume * 100} onChange={(v) => changeVolume(v / 100)} max={100} />
                 </span>
               </span>
               <span className={styles.controlText}>

src/TimeSlider/index.js

@@ -17,7 +17,7 @@ const getBufferedEnd = (currentTime, buffered) => {
   return 0;
 };
 
-const getEventXCoordinate = e => {
+const getEventXCoordinate = (e) => {
   if (e.changedTouches && 1 <= e.changedTouches.length) {
     return e.changedTouches[0].pageX;
   }
@@ -83,7 +83,7 @@ const Slider = React.memo(({ live, hiding, currentTime, duration, buffered, onCh
   const updateRef = React.useRef(null);
 
   const onClick = React.useCallback(
-    e => {
+    (e) => {
       e.preventDefault();
       setSliding(false);
       if (live) {
@@ -97,7 +97,7 @@ const Slider = React.memo(({ live, hiding, currentTime, duration, buffered, onCh
   );
 
   const onMouseDown = React.useCallback(
-    e => {
+    (e) => {
       e.preventDefault();
       if (!sliderRef || !sliderRef.current || !reactRef || live) {
         return;
@@ -125,7 +125,7 @@ const Slider = React.memo(({ live, hiding, currentTime, duration, buffered, onCh
   }, []);
 
   const onMouseUp = React.useCallback(
-    e => {
+    (e) => {
       e.preventDefault();
       setSliding(false);
       if (reactRef && reactRef.current && updateRef) {
@@ -139,7 +139,7 @@ const Slider = React.memo(({ live, hiding, currentTime, duration, buffered, onCh
   );
 
   const onMouseMove = React.useCallback(
-    e => {
+    (e) => {
       e.preventDefault();
       if (!reactRef || !reactRef.current || !updateRef) {
         return;
@@ -176,7 +176,7 @@ const Slider = React.memo(({ live, hiding, currentTime, duration, buffered, onCh
   }, [sliding, onMouseMove, onMouseUp]);
 
   const onSliderMouseOver = React.useCallback(
-    e => {
+    (e) => {
       e.preventDefault();
       if (live) {
         return;
@@ -188,7 +188,7 @@ const Slider = React.memo(({ live, hiding, currentTime, duration, buffered, onCh
   );
 
   const onSliderMouseMove = React.useCallback(
-    e => {
+    (e) => {
       e.preventDefault();
       if (!reactRef || !reactRef.current || !updateRef) {
         return;
@@ -204,7 +204,7 @@ const Slider = React.memo(({ live, hiding, currentTime, duration, buffered, onCh
     [duration, update],
   );
 
-  const onResize = React.useCallback(e => {
+  const onResize = React.useCallback((e) => {
     e.preventDefault();
     if (!sliderRef || !sliderRef.current) {
       return;

src/hooks/useFlvjs.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
-const getFlvjs = src =>
-  new Promise(resolve => {
+const getFlvjs = (src) =>
+  new Promise((resolve) => {
     if (global.flvjs) {
       resolve(global.flvjs);
       return;
@@ -17,7 +17,7 @@ const getFlvjs = src =>
 // eslint-disable-next-line no-console
 const debug = console.error;
 
-const destroyPlayer = player => {
+const destroyPlayer = (player) => {
   if (!player) {
     return;
   }

src/hooks/useHlsjs.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
-const getHls = src =>
-  new Promise(resolve => {
+const getHls = (src) =>
+  new Promise((resolve) => {
     if (global.Hls) {
       resolve(global.Hls);
       return;
@@ -17,7 +17,7 @@ const getHls = src =>
 // eslint-disable-next-line no-console
 const debug = console.error;
 
-const destroyPlayer = player => {
+const destroyPlayer = (player) => {
   if (player) {
     try {
       player.destroy();