code lint

Author: xpioneer

package.json

@@ -8,7 +8,9 @@
   "scripts": {
     "start": "npm run dev",
     "dev": "NODE_ENV=development webpack-dev-server --config build/webpack.dev.conf.js",
-    "build": "NODE_ENV=production webpack --config build/webpack.prod.conf.js"
+    "build": "NODE_ENV=production webpack --config build/webpack.prod.conf.js",
+    "lint": "eslint --ext ts,tsx src/",
+    "lint:fix": "eslint --ext ts,tsx src/ --fix"
   },
   "repository": {
     "type": "git",
@@ -41,12 +43,18 @@
     "@types/react": "^16.7.7",
     "@types/react-dom": "^16.0.10",
     "@types/react-router-dom": "^4.3.1",
+    "@typescript-eslint/eslint-plugin": "^2.4.0",
+    "@typescript-eslint/parser": "^2.4.0",
     "autoprefixer": "^9.3.1",
     "babel-loader": "^8.0.4",
     "clean-webpack-plugin": "^0.1.19",
     "copy-webpack-plugin": "^4.6.0",
     "css-loader": "^1.0.1",
+    "eslint": "^6.5.1",
+    "eslint-plugin-react": "^7.16.0",
     "html-webpack-plugin": "^3.2.0",
+    "husky": "^3.0.9",
+    "lint-staged": "^9.4.2",
     "mini-css-extract-plugin": "^0.4.4",
     "node-sass": "^4.12.0",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
@@ -55,13 +63,28 @@
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
     "sw-precache-webpack-plugin": "^0.11.5",
-    "typescript": "^3.1.6",
+    "typescript": "^3.6.4",
     "uglifyjs-webpack-plugin": "^2.0.1",
     "url-loader": "^1.1.2",
     "webpack": "^4.26.1",
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.10",
     "webpack-manifest-plugin": "^2.0.4",
     "webpack-merge": "^4.1.4"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "src/**/*.{js,jsx,ts,tsx}": [
+      "npm run lint:fix",
+      "git add"
+    ],
+    "src/**/*.{css,less,json,html,md,markdown}": [
+      "prettier --write",
+      "git add"
+    ]
   }
 }

src/components/editor/index.tsx

@@ -24,7 +24,7 @@ const toolbarOptions = [
   ['link', 'image'],
 
   ['clean'],                                         // remove formatting button
-];
+]
 
 interface IEditor {
   disabled?: boolean
@@ -46,30 +46,32 @@ export default class QuillEditorComponent extends React.Component<IEditor> {
     readOnly: false,
     theme: 'snow',
   }
+
+  $editor: any = null
 
   componentDidMount() {
     const { onChange } = this.props
-    const { editor }: any = this.refs
-    this.quillEditor = new Quill(editor, this.quillOptions)
+    const { $editor } = this
+    this.quillEditor = new Quill($editor, this.quillOptions)
 
     this.quillEditor.on('text-change', (delta: any, oldDelta: any, source: any) => {
-      let _html: string = this.quillEditor.root.innerHTML;
+      let _html: string = this.quillEditor.root.innerHTML
       if (_html === '<p><br></p>') {
-        _html = '';
+        _html = ''
       }
       if(this.oldVal !== _html) {
         this.oldVal = _html
-        onChange && onChange(_html);
+        onChange && onChange(_html)
       }
-    });
+    })
   }
 
   // change editor value
   changeEditorText = () => {
     const { value } = this.props
     // 赋值
     if(this.oldVal !== value && value !== undefined && this.quillEditor) {
-      this.quillEditor.root.innerHTML = value;
+      this.quillEditor.root.innerHTML = value
       this.oldVal = value
     }
   }
@@ -79,7 +81,7 @@ export default class QuillEditorComponent extends React.Component<IEditor> {
     this.changeEditorText()
 
     return <div className="editor-wrap">
-      <div style={{minHeight: '600px'}} ref="editor"></div>
+      <div style={{minHeight: '600px'}} ref={this.$editor}></div>
       {disabled ? <div className="editor-mask"></div> : ''}
     </div>
 

src/components/loading.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import * as React from 'react'
 import { Spin } from 'antd'
 
 interface ILoadingProps {

src/components/shared/footer.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Layout } from 'antd';
+import { Layout } from 'antd'
 
 const { Footer } = Layout
 

src/components/shared/header.tsx

@@ -18,7 +18,7 @@ export default class HeaderComponent extends React.Component<IHeaderProps> {
       padding: 0,
       display: 'flex',
       alignItems: 'center'
-      }}>
+    }}>
       <div style={{flex: '1 1 0'}}>
         <Icon
           style={{cursor: 'pointer'}}

src/components/shared/sider.tsx

@@ -90,26 +90,26 @@ class SiderComponent extends React.Component<ISiderProps> {
         {
           MenuList.map(m => {
             return m.children ?
-            <SubMenu
-              key={m.key}
-              title={<span><Icon type={m.icon} /><span>{m.title}</span></span>}>
-              {
-                m.children.map(mc => {
-                  return <Item key={mc.key}>
-                    <Link to={mc.path}>
-                      <Icon type={mc.icon} />
-                      <span>{mc.title}</span>
-                    </Link>
-                  </Item>
-                })
-              }
-            </SubMenu> :
-            <Item key={m.key}>
-              <Link to={m.path}>
-                <Icon type={m.icon} />
-                <span>{m.title}</span>
-              </Link>
-            </Item>
+              <SubMenu
+                key={m.key}
+                title={<span><Icon type={m.icon} /><span>{m.title}</span></span>}>
+                {
+                  m.children.map(mc => {
+                    return <Item key={mc.key}>
+                      <Link to={mc.path}>
+                        <Icon type={mc.icon} />
+                        <span>{mc.title}</span>
+                      </Link>
+                    </Item>
+                  })
+                }
+              </SubMenu> :
+              <Item key={m.key}>
+                <Link to={m.path}>
+                  <Icon type={m.icon} />
+                  <span>{m.title}</span>
+                </Link>
+              </Item>
           })
         }
       </Menu>

src/index.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react'
-import * as ReactDOM from 'react-dom';
-import App from './pages/app';
-import './assets/scss/app.scss';
+import * as ReactDOM from 'react-dom'
+import App from './pages/app'
+import './assets/scss/app.scss'
 import 'antd/dist/antd.css'
-import 'quill/dist/quill.snow.css';
+import 'quill/dist/quill.snow.css'
 import serviceWorker from './serviceWorker'
 
 ReactDOM.render(
   <App/>,
   document.getElementById('app')
-);
+)
 serviceWorker()

src/pages/app.tsx

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { BrowserRouter as Router, Route, Switch, Redirect} from 'react-router-dom';
+import * as React from 'react'
+import { BrowserRouter as Router, Route, Switch, Redirect} from 'react-router-dom'
 import { Provider } from 'mobx-react'
 import stores from '../stores'
 import Loading from '@components/loading'
@@ -28,4 +28,4 @@ class App extends React.Component {
   }
 }
 
-export default App;
+export default App

src/pages/article/articleCreate.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react'
 import {inject, observer} from 'mobx-react'
-import { Row, Col, Form, Icon, Input, Button, DatePicker, Select, Checkbox, Badge } from 'antd';
+import { Row, Col, Form, Icon, Input, Button, DatePicker, Select, Checkbox, Badge } from 'antd'
 import Editor from '@components/editor'
 
-const FormItem = Form.Item;
+const FormItem = Form.Item
 const CheckboxGroup = Checkbox.Group
 
 const formItemLayout = {
@@ -56,7 +56,7 @@ export default class ArticleCreate extends React.Component<IProps> {
             <FormItem label="文章类型" labelCol={{sm: {span: 8}}} wrapperCol={{sm: { span: 16 }}}>
               <Select value={mainData.typeId} onChange={e => inputChange(e, 'typeId')}>
                 {
-                  typeList.map((t:any, i:number) => <Select.Option value={t.id} key={t.id}>{t.name}</Select.Option>)
+                  typeList.map((t: any, i: number) => <Select.Option value={t.id} key={t.id}>{t.name}</Select.Option>)
                 }
               </Select>
             </FormItem>

src/pages/article/articleCreateStore.ts

@@ -1,4 +1,4 @@
-import { observable, action, autorun, runInAction, computed } from 'mobx';
+import { observable, action, autorun, runInAction, computed } from 'mobx'
 import { GRAPHQL_API } from '@constants/index'
 
 const getInitQuery = `{