diff --git a/package.json b/package.json
index 054b2bf2510..5ab2500e8fa 100644
--- a/package.json
+++ b/package.json
@@ -88,7 +88,7 @@
     "test:e2e": "cypress run",
     "serve": "NODE_ENV=production node server/server.js",
     "lego": "webpack -p --config scripts/webpack.lego.js",
-    "lint": "eslint ./src",
+    "lint": "eslint src/**/*.jsx src/**/*.js",
     "postinstall": "rimraf .cache-loader",
     "prebuild": "rimraf dist",
     "release": "standard-version"
diff --git a/src/components/Base/Dragger/index.jsx b/src/components/Base/Dragger/index.jsx
index 65cfc32d3ef..d9e91f35784 100644
--- a/src/components/Base/Dragger/index.jsx
+++ b/src/components/Base/Dragger/index.jsx
@@ -117,10 +117,13 @@ export default class Dragger extends React.Component {
 
   @observable
   scale = 1
+
   @observable
   translateX = 30
+
   @observable
   translateY = 60
+
   @observable
   isFullscreen = false
 
@@ -168,22 +171,19 @@ export default class Dragger extends React.Component {
       const contentWidth = this.content.clientWidth * this.scale
       const contentHeight = this.content.clientHeight * this.scale
 
-      if (clientX < this.translateX) {
-        this.translateX = this.translateX
-      } else if (clientX > this.translateX + contentWidth) {
+      if (clientX > this.translateX + contentWidth) {
         this.translateX =
           -(deltaScale * this.content.clientWidth) + this.translateX
-      } else {
+      } else if (clientX >= this.translateX) {
         this.translateX =
           -(deltaScale * (clientX - this.translateX)) / this.scale +
           this.translateX
       }
-      if (clientY < this.translateY) {
-        this.translateY = this.translateY
-      } else if (clientY > this.translateY + contentHeight) {
+
+      if (clientY > this.translateY + contentHeight) {
         this.translateY =
           -(deltaScale * this.content.clientHeight) + this.translateY
-      } else {
+      } else if (clientY >= this.translateY) {
         this.translateY =
           (-deltaScale * (clientY - this.translateY)) / this.scale +
           this.translateY
diff --git a/src/components/Base/ScrollLoad/index.jsx b/src/components/Base/ScrollLoad/index.jsx
index 918fed60e4b..925f917c48d 100644
--- a/src/components/Base/ScrollLoad/index.jsx
+++ b/src/components/Base/ScrollLoad/index.jsx
@@ -76,7 +76,8 @@ export default class ScrollLoad extends React.Component {
         loading: false,
         loadMore: isRemainingData(props),
       }
-    } else if (props.loading !== state.loading) {
+    }
+    if (props.loading !== state.loading) {
       return {
         loading: props.loading,
       }
diff --git a/src/components/Base/Steps/index.jsx b/src/components/Base/Steps/index.jsx
index a2e8029c1f6..16b19dee28d 100644
--- a/src/components/Base/Steps/index.jsx
+++ b/src/components/Base/Steps/index.jsx
@@ -51,7 +51,8 @@ export default class Steps extends React.Component {
     const { current } = this.props
     if (index === current) {
       return 'current'
-    } else if (index < current) {
+    }
+    if (index < current) {
       return 'finished'
     }
 
diff --git a/src/components/Forms/GrayRelease/Components/Card/index.jsx b/src/components/Forms/GrayRelease/Components/Card/index.jsx
index abc673e4967..7fbe0ee8b2e 100644
--- a/src/components/Forms/GrayRelease/Components/Card/index.jsx
+++ b/src/components/Forms/GrayRelease/Components/Card/index.jsx
@@ -45,6 +45,7 @@ export default class Card extends React.PureComponent {
 
     onSelect(component, !value)
   }
+
   renderActions() {
     const { value, component, loading } = this.props
 
diff --git a/src/components/Forms/ImageBuilder/B2IForm/index.jsx b/src/components/Forms/ImageBuilder/B2IForm/index.jsx
index ce8697e82f8..e69d98ca0c4 100644
--- a/src/components/Forms/ImageBuilder/B2IForm/index.jsx
+++ b/src/components/Forms/ImageBuilder/B2IForm/index.jsx
@@ -167,7 +167,9 @@ export default class S2IForm extends React.Component {
       <Form ref={formRef} data={formTemplate}>
         <Form.Item
           label={t('Upload Artifacts')}
-          rules={[{ required: true, message: t('The file has not been uploaded.') }]}
+          rules={[
+            { required: true, message: t('The file has not been uploaded.') },
+          ]}
         >
           <Uploader
             name={`${this.prefix}spec.config.sourceUrl`}
diff --git a/src/components/Graph/Detail/Monitors/TrafficCard.jsx b/src/components/Graph/Detail/Monitors/TrafficCard.jsx
index 9e11c2cfb79..e15b2045847 100644
--- a/src/components/Graph/Detail/Monitors/TrafficCard.jsx
+++ b/src/components/Graph/Detail/Monitors/TrafficCard.jsx
@@ -26,6 +26,7 @@ export default class TrafficCard extends React.Component {
   static propTypes = {
     metrics: PropTypes.array,
   }
+
   static defaultProps = {
     metrics: [],
   }
diff --git a/src/components/Inputs/InputPassword/index.jsx b/src/components/Inputs/InputPassword/index.jsx
index ea1929fa6a2..cbae0cdf84a 100644
--- a/src/components/Inputs/InputPassword/index.jsx
+++ b/src/components/Inputs/InputPassword/index.jsx
@@ -100,11 +100,14 @@ export default class Password extends React.Component {
 
     if (strength === -1) {
       return { width: 0, backgroundColor: '#fff' }
-    } else if (strength >= 0 && strength < 6) {
+    }
+    if (strength >= 0 && strength < 6) {
       return { width: '33%', backgroundColor: '#ca2621' }
-    } else if (strength >= 6 && strength < 8) {
+    }
+    if (strength >= 6 && strength < 8) {
       return { width: '66%', backgroundColor: '#f5a623' }
-    } else if (strength >= 8) {
+    }
+    if (strength >= 8) {
       return { width: '100%', backgroundColor: '#55bc8a' }
     }
   }
diff --git a/src/components/Modals/AuditingSearch/Auditing/Detail/MetadataModal/Metadata/index.jsx b/src/components/Modals/AuditingSearch/Auditing/Detail/MetadataModal/Metadata/index.jsx
index 1125e2c5e11..146f5bb9f67 100644
--- a/src/components/Modals/AuditingSearch/Auditing/Detail/MetadataModal/Metadata/index.jsx
+++ b/src/components/Modals/AuditingSearch/Auditing/Detail/MetadataModal/Metadata/index.jsx
@@ -12,7 +12,7 @@ export default class Metadata extends React.Component {
   }
 
   onCollapsed(item) {
-    const data = Object.assign({}, item, { collapsed: !item.collapsed })
+    const data = { ...item, collapsed: !item.collapsed }
     this.setState({ data })
   }
 
diff --git a/src/components/Modals/CustomMonitoring/components/Form/GraphTargetsForm/index.jsx b/src/components/Modals/CustomMonitoring/components/Form/GraphTargetsForm/index.jsx
index 9cc7ad0a52d..7ee4fc22f14 100644
--- a/src/components/Modals/CustomMonitoring/components/Form/GraphTargetsForm/index.jsx
+++ b/src/components/Modals/CustomMonitoring/components/Form/GraphTargetsForm/index.jsx
@@ -22,7 +22,7 @@ import { Form } from 'components/Base'
 import { Input, Select } from '@pitrix/lego-ui'
 
 import CustomMonitorMetircQueryInput from '../../MetircQueryInput'
-import FormItemContainer from '../../Form/ItemContianer'
+import FormItemContainer from '../ItemContianer'
 import Field from '../Field'
 
 import styles from './index.scss'
diff --git a/src/components/Modals/CustomMonitoring/components/FormInput/TableColumnStyle/index.jsx b/src/components/Modals/CustomMonitoring/components/FormInput/TableColumnStyle/index.jsx
index cd1d5e3e45f..75b16a7e552 100644
--- a/src/components/Modals/CustomMonitoring/components/FormInput/TableColumnStyle/index.jsx
+++ b/src/components/Modals/CustomMonitoring/components/FormInput/TableColumnStyle/index.jsx
@@ -19,7 +19,7 @@ import React from 'react'
 import { isFunction } from 'lodash'
 import { Icon } from '@pitrix/lego-ui'
 import { toJS } from 'mobx'
-import TableColumnStyleModal from '../../../components/TableColumnStyleModal'
+import TableColumnStyleModal from '../../TableColumnStyleModal'
 
 import styles from './index.scss'
 
diff --git a/src/components/Modals/CustomMonitoring/components/RowTitleEditor/index.jsx b/src/components/Modals/CustomMonitoring/components/RowTitleEditor/index.jsx
index 2375f8b8c2c..4e3fe3e3861 100644
--- a/src/components/Modals/CustomMonitoring/components/RowTitleEditor/index.jsx
+++ b/src/components/Modals/CustomMonitoring/components/RowTitleEditor/index.jsx
@@ -42,6 +42,7 @@ export default class RowTitleEditor extends React.Component {
   onBlur = () => {
     this.setState({ editing: false })
   }
+
   onKeyUp = e => {
     const isEnter = e.keyCode === 13
     isEnter && this.setState({ editing: false })
diff --git a/src/components/Modals/CustomMonitoring/components/TableColumnStyleModal/index.jsx b/src/components/Modals/CustomMonitoring/components/TableColumnStyleModal/index.jsx
index 1247c4fc6be..2dd7ff89f3c 100644
--- a/src/components/Modals/CustomMonitoring/components/TableColumnStyleModal/index.jsx
+++ b/src/components/Modals/CustomMonitoring/components/TableColumnStyleModal/index.jsx
@@ -20,7 +20,7 @@ import { pick } from 'lodash'
 import { Modal, Form } from 'components/Base'
 import { Select, Columns, Column } from '@pitrix/lego-ui'
 import NumberInput from 'components/Inputs/NumberInput'
-import ColorSelector from '../../components/FormInput/ColorSelector'
+import ColorSelector from '../FormInput/ColorSelector'
 
 import styles from './index.scss'
 
diff --git a/src/components/Modals/EventSearch/Event/Detail/MetadataModal/Metadata/index.jsx b/src/components/Modals/EventSearch/Event/Detail/MetadataModal/Metadata/index.jsx
index 1125e2c5e11..146f5bb9f67 100644
--- a/src/components/Modals/EventSearch/Event/Detail/MetadataModal/Metadata/index.jsx
+++ b/src/components/Modals/EventSearch/Event/Detail/MetadataModal/Metadata/index.jsx
@@ -12,7 +12,7 @@ export default class Metadata extends React.Component {
   }
 
   onCollapsed(item) {
-    const data = Object.assign({}, item, { collapsed: !item.collapsed })
+    const data = { ...item, collapsed: !item.collapsed }
     this.setState({ data })
   }
 
diff --git a/src/components/Tables/Ranking/index.jsx b/src/components/Tables/Ranking/index.jsx
index ebd7ab5f63b..747e8d1746c 100644
--- a/src/components/Tables/Ranking/index.jsx
+++ b/src/components/Tables/Ranking/index.jsx
@@ -39,11 +39,10 @@ export const THEME = {
 export default class RankingTable extends React.Component {
   get columns() {
     const sort_metric = get(this, 'props.store.sort_metric', '')
-    return this.props.columns.map(column =>
-      Object.assign({}, column, {
-        className: column.sort_metric === sort_metric ? styles.rankCol : '',
-      })
-    )
+    return this.props.columns.map(column => ({
+      ...column,
+      className: column.sort_metric === sort_metric ? styles.rankCol : '',
+    }))
   }
 
   render() {
diff --git a/src/components/TextPreview/index.jsx b/src/components/TextPreview/index.jsx
index 1e46c8d2d98..4ccaed6835e 100644
--- a/src/components/TextPreview/index.jsx
+++ b/src/components/TextPreview/index.jsx
@@ -34,6 +34,7 @@ export default class TextPreview extends React.Component {
     hideToolbar: PropTypes.bool,
     hideOverlayBtns: PropTypes.bool,
   }
+
   static defaultProps = {
     files: {},
     type: 'selectFiles',
diff --git a/src/pages/appStore/components/AppPreview/index.jsx b/src/pages/appStore/components/AppPreview/index.jsx
index 0b9350ecbd6..a15b824882f 100644
--- a/src/pages/appStore/components/AppPreview/index.jsx
+++ b/src/pages/appStore/components/AppPreview/index.jsx
@@ -39,6 +39,7 @@ export default class AppPreview extends React.Component {
     versionId: PropTypes.string,
     currentTab: PropTypes.string,
   }
+
   static defaultProps = {
     currentTab: '',
     appId: '',
@@ -90,7 +91,9 @@ export default class AppPreview extends React.Component {
     }
 
     return (
-      <p className={styles.noReadme}>{t('The version has no documentation.')}</p>
+      <p className={styles.noReadme}>
+        {t('The version has no documentation.')}
+      </p>
     )
   }
 
diff --git a/src/pages/appStore/components/Banner/index.jsx b/src/pages/appStore/components/Banner/index.jsx
index 50521f8f6b4..6d89049b24d 100644
--- a/src/pages/appStore/components/Banner/index.jsx
+++ b/src/pages/appStore/components/Banner/index.jsx
@@ -30,6 +30,7 @@ export default class Banner extends React.PureComponent {
     className: PropTypes.string,
     children: PropTypes.node,
   }
+
   get isAppsPage() {
     return location.pathname === '/apps'
   }
diff --git a/src/pages/devops/components/Cards/CodeQualityResult/StatusCard.jsx b/src/pages/devops/components/Cards/CodeQualityResult/StatusCard.jsx
index 85d0ad92d7a..ba749cbdbd6 100644
--- a/src/pages/devops/components/Cards/CodeQualityResult/StatusCard.jsx
+++ b/src/pages/devops/components/Cards/CodeQualityResult/StatusCard.jsx
@@ -30,6 +30,7 @@ export default class CodeStatusCard extends React.PureComponent {
     value: 0,
     url: '',
   }
+
   render() {
     const { hasIcon, title, value, resultClass, unit, url } = this.props
     const classContent = CLASSLISTS[parseInt(resultClass, 10) - 1]
diff --git a/src/pages/devops/components/Pipeline/StepModals/kubernetesDeploy.jsx b/src/pages/devops/components/Pipeline/StepModals/kubernetesDeploy.jsx
index 4ad365f44f9..b2fc252647c 100644
--- a/src/pages/devops/components/Pipeline/StepModals/kubernetesDeploy.jsx
+++ b/src/pages/devops/components/Pipeline/StepModals/kubernetesDeploy.jsx
@@ -73,8 +73,10 @@ export default class KubernetesDeploy extends React.Component {
 
   @observable
   dockerCredentials = [{ key: 'default' }]
+
   @observable
   isShowAdvenced = false
+
   @observable
   isShowDetail = false
 
diff --git a/src/pages/devops/components/Pipeline/StepsEditor/index.jsx b/src/pages/devops/components/Pipeline/StepsEditor/index.jsx
index 3ce87ce1019..510f92cdce8 100644
--- a/src/pages/devops/components/Pipeline/StepsEditor/index.jsx
+++ b/src/pages/devops/components/Pipeline/StepsEditor/index.jsx
@@ -57,6 +57,7 @@ export default class StepsEditor extends React.Component {
 
   @observable
   zIndex = ''
+
   @observable
   isEditMode = false
 
diff --git a/src/pages/devops/containers/Pipelines/Detail/PipelineLogDialog/index.jsx b/src/pages/devops/containers/Pipelines/Detail/PipelineLogDialog/index.jsx
index 6a8c5880d9f..ee58f7d7699 100644
--- a/src/pages/devops/containers/Pipelines/Detail/PipelineLogDialog/index.jsx
+++ b/src/pages/devops/containers/Pipelines/Detail/PipelineLogDialog/index.jsx
@@ -67,6 +67,7 @@ export default class PipelineLog extends React.Component {
 
   @observable
   activeNodeIndex = [0, 0] // lineindex, colunmIndex
+
   @observable
   refreshFlag = true
 
diff --git a/src/pages/projects/components/Cards/ImageArtifacts/Item/index.jsx b/src/pages/projects/components/Cards/ImageArtifacts/Item/index.jsx
index 8436bc8804b..34824d04f0b 100644
--- a/src/pages/projects/components/Cards/ImageArtifacts/Item/index.jsx
+++ b/src/pages/projects/components/Cards/ImageArtifacts/Item/index.jsx
@@ -33,6 +33,7 @@ export default class ImageRunRecords extends React.Component {
       content: t('Copy Successfully'),
     })
   }
+
   render() {
     const {
       imageName,
diff --git a/src/pages/projects/components/Modals/RepoApp/AppDetail/Banner/index.jsx b/src/pages/projects/components/Modals/RepoApp/AppDetail/Banner/index.jsx
index 363eafd2270..17bdcdd2b55 100644
--- a/src/pages/projects/components/Modals/RepoApp/AppDetail/Banner/index.jsx
+++ b/src/pages/projects/components/Modals/RepoApp/AppDetail/Banner/index.jsx
@@ -30,6 +30,7 @@ class Banner extends PureComponent {
     icon: PropTypes.string,
     onClickBack: PropTypes.func,
   }
+
   handleClickBack = () => {
     this.props.onClickBack ? this.props.onClickBack() : history.back()
   }