build: update eslint config and fix eslint error

DTStack · Aug 11, 2020 · 50644d5 · 50644d5
1 parent ecbd0fc
commit 50644d5
Show file tree

Hide file tree

Showing 5 changed files with 250 additions and 95 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,77 +1,89 @@
 {
-    "parser": "@typescript-eslint/parser",
-    "parserOptions": {
-        "ecmaVersion": 8,
-        "sourceType": "module",
-        "project": "./tsconfig.json"
-    },
-    "extends":[
-        "standard",
-        "plugin:react/recommended",
-        "plugin:@typescript-eslint/recommended"
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 8,
+    "sourceType": "module",
+    "project": "./tsconfig.json"
+  },
+  "extends": [
+    "standard",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "eslint-config-prettier",
+    "eslint-config-prettier/react",
+    "eslint-config-prettier/@typescript-eslint"
+  ],
+  "plugins": ["import", "react", "jsx-a11y", "@typescript-eslint", "unicorn"],
+  "settings": {
+    "react": {
+      "pragma": "React",
+      "version": "16.6.3"
+    }
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
+  "globals": {
+    "expect": true,
+    "test": true,
+    "describe": true,
+    "beforeEach": true,
+    "afterEach": true,
+    "jest": true,
+    "it": true
+  },
+  "rules": {
+    "semi": 0,
+    "strict": 0,
+    "indent": [2, 4, { "SwitchCase": 1 }],
+    "arrow-body-style": 0,
+    "no-return-assign": 0,
+    "no-useless-constructor": 0,
+    "eqeqeq": 0,
+    "no-console": 0,
+    "no-param-reassign": 0,
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      { "vars": "all", "args": "none", "ignoreRestSiblings": false }
     ],
-    "plugins": [ 
-        "import",
-        "react",
-        "jsx-a11y"
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": true,
+        "optionalDependencies": false,
+        "peerDependencies": false
+      }
     ],
-    "settings": {
-        "react": {
-          "pragma": "React",
-          "version": "16.6.3"
-        }
-    },
-    "env": {
-        "browser": true,
-        "node": true,
-        "es6": true
-    },
-    "globals": {
-        "expect": true,
-        "test": true,
-        "describe": true,
-        "beforeEach": true,
-        "afterEach": true,
-        "jest": true,
-        "it": true
-    },
-    "rules": {
-        "semi": 0,
-        "strict": 0,
-        "indent": [2, 4, { "SwitchCase": 1 }],
-        "arrow-body-style": 0,
-        "no-return-assign": 0,
-        "no-useless-constructor": 0,
-        "eqeqeq": 0,
-        "no-console": 0,
-        "no-param-reassign": 0,
-        "@typescript-eslint/no-unused-vars": ["error", { "vars": "all", "args": "none", "ignoreRestSiblings": false }],
-        "import/no-extraneous-dependencies": ["error", {"devDependencies": true, "optionalDependencies": false, "peerDependencies": false}],
-        "react/display-name":[0],
-        "react/sort-comp": 0,
-        "react/jsx-uses-react": 1,
-        "react/prefer-stateless-function": 0,
-        "react/jsx-closing-bracket-location": 0,
-        "jsx-a11y/no-static-element-interactions": 0,
-        "react/prop-types": [0, {"ignore": ["children"]}],
-        "react/jsx-filename-extension": [1, { "extensions": [".tsx", ".js", ".jsx"] }],
-        "react/react-in-jsx-scope": 0,
-        "@typescript-eslint/no-explicit-any": 0,
-        "@typescript-eslint/explicit-member-accessibility": 0,
-        "@typescript-eslint/explicit-function-return-type": 0,
-        "@typescript-eslint/no-use-before-define": 0,
-        "@typescript-eslint/no-var-requires": 0,
-        "@typescript-eslint/interface-name-prefix":0,
-        "@typescript-eslint/no-empty-interface":0,
-        "@typescript-eslint/no-this-alias": [
-            "error",
-            {
-                "allowDestructuring": true, // Allow `const { props, state } = this`; false by default
-                "allowedNames": ["that"] // Allow `const self = this`; `[]` by default
-            }
-        ],
-        "prefer-const": 0,
-        "no-var": 0,
-        "prefer-rest-params": 0
-    }
-}
+    "react/display-name": [0],
+    "react/sort-comp": 0,
+    "react/jsx-uses-react": 1,
+    "react/prefer-stateless-function": 0,
+    "react/jsx-closing-bracket-location": 0,
+    "jsx-a11y/no-static-element-interactions": 0,
+    "react/prop-types": [0, { "ignore": ["children"] }],
+    "react/jsx-filename-extension": [
+      1,
+      { "extensions": [".tsx", ".js", ".jsx"] }
+    ],
+    "react/react-in-jsx-scope": 0,
+    "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/explicit-member-accessibility": 0,
+    "@typescript-eslint/explicit-function-return-type": 0,
+    "@typescript-eslint/no-use-before-define": 0,
+    "@typescript-eslint/no-var-requires": 0,
+    "@typescript-eslint/interface-name-prefix": 0,
+    "@typescript-eslint/no-empty-interface": 0,
+    "@typescript-eslint/no-this-alias": [
+      "error",
+      {
+        "allowDestructuring": true, // Allow `const { props, state } = this`; false by default
+        "allowedNames": ["that"] // Allow `const self = this`; `[]` by default
+      }
+    ],
+    "prefer-const": 0,
+    "no-var": 0,
+    "prefer-rest-params": 0
+  }
+}
diff --git a/package.json b/package.json
@@ -99,7 +99,9 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-react-16": "^1.15.2",
     "eslint": "^5.16.0",
+    "eslint-config-prettier": "^6.11.0",
     "eslint-config-standard": "^12.0.0",
+    "eslint-formatter-pretty": "^4.0.0",
     "eslint-loader": "^1.7.1",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-jest": "^22.14.0",
@@ -109,6 +111,7 @@
     "eslint-plugin-react": "^7.11.1",
     "eslint-plugin-sort-requires": "^2.1.0",
     "eslint-plugin-standard": "^4.0.0",
+    "eslint-plugin-unicorn": "^21.0.0",
     "file-loader": "^6.0.0",
     "husky": "^1.2.0",
     "increase-memory-limit": "^1.0.7",

diff --git a/src/components/slidePane/__tests__/index.test.tsx b/src/components/slidePane/__tests__/index.test.tsx
@@ -12,11 +12,13 @@ describe('test SlidePane ', () => {
         style: { color: 'red', background: '#FF7C12' }
     }
     test('should render correct', () => {
-        const { container, getByTestId } = render(<SlidePane
-            children={expectValues.children}
-            visible={expectValues.visible}
-            style={expectValues.style}
-        />)
+        const { container, getByTestId } = render(
+            <SlidePane
+                visible={expectValues.visible}
+                style={expectValues.style}
+            >
+                {expectValues.children}
+            </SlidePane>)
         expect(container.firstChild).toHaveStyle(expectValues.style);
         const oDiv = getByTestId('slidepane_container');
         expect(oDiv).not.toBeNull();
@@ -25,10 +27,10 @@ describe('test SlidePane ', () => {
         expect(container).toMatchSnapshot();
     })
     test('should be invisible', () => {
-        const { getByTestId } = render(<SlidePane
-            children={expectValues.children}
-            visible={false}
-        />)
+        const { getByTestId } = render(
+            <SlidePane visible={false} >
+                {expectValues.children}
+            </SlidePane>)
         const oDiv = getByTestId('slidepane_container');
         expect(oDiv).not.toBeVisible();
     })

diff --git a/src/components/slidePane/index.tsx b/src/components/slidePane/index.tsx
@@ -16,11 +16,11 @@ export interface SlidePaneProps {
 }
 
 class SlidePane extends React.Component<SlidePaneProps, any> {
-    constructor (props: any) {
+    constructor(props: any) {
         super(props);
     }
 
-    render () {
+    render() {
         const { children, visible, style, className, onClose } = this.props
         const slidePrefixCls = 'dtc-slide-pane';
         let myStyle: any = {
@@ -34,13 +34,13 @@ class SlidePane extends React.Component<SlidePaneProps, any> {
         if (style) myStyle = assign(myStyle, style);
 
         return (
-            <div className={ classes } style={myStyle} >
-                <div className={`${slidePrefixCls}-conent`} 
-                data-testid="slidepane_container" 
-                style={{ display: visible ? 'block' : 'none', height: '100%' }}>
-                    { children }
+            <div className={classes} style={myStyle} >
+                <div className={`${slidePrefixCls}-conent`}
+                    data-testid="slidepane_container"
+                    style={{ display: visible ? 'block' : 'none', height: '100%' }}>
+                    {children}
                 </div>
-                <span className={`${slidePrefixCls}-toggle`} data-testid="slidepane_action"  onClick={onClose} {...{ onClick: onClose }}>
+                <span className={`${slidePrefixCls}-toggle`} data-testid="slidepane_action" onClick={onClose} {...{ onClick: onClose }}>
                     <Icon type="double-right" />
                 </span>
             </div>