From 475e4ff23d8cccf03f4aeec3deaca53e1b66a89b Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Mon, 9 Oct 2017 13:23:20 +0800
Subject: [PATCH] upgrade eslint-config-airbnb

---
 .eslintrc.js                                  |  7 ++
 components/affix/__tests__/Affix.test.js      | 38 ++++----
 components/alert/demo/closable.md             | 30 +++---
 components/alert/demo/description.md          | 46 +++++-----
 components/alert/demo/icon.md                 | 62 +++++++------
 components/alert/demo/style.md                | 14 +--
 components/calendar/demo/notice-calendar.md   | 10 +-
 components/carousel/__tests__/index.test.js   |  2 +-
 components/cascader/demo/lazy.md              |  4 -
 components/collapse/demo/accordion.md         |  8 +-
 components/collapse/demo/mix.md               |  8 +-
 components/dropdown/demo/trigger.md           |  4 +-
 components/layout/demo/responsive.md          | 74 +++++++--------
 .../locale-provider/__tests__/index.test.js   |  6 +-
 components/menu/__tests__/index.test.js       |  2 +-
 components/modal/__tests__/confirm.test.js    |  2 +-
 .../notification/__tests__/placement.test.js  |  2 +-
 components/popconfirm/demo/dynamic-trigger.md |  6 +-
 components/popconfirm/demo/placement.md       | 92 ++++++++++---------
 components/radio/demo/radiobutton.md          | 50 +++++-----
 components/radio/demo/size.md                 | 50 +++++-----
 components/rate/demo/text.md                  |  1 -
 components/select/demo/label-in-value.md      |  2 +-
 components/switch/demo/text.md                | 16 ++--
 .../table/__tests__/Table.filter.test.js      | 30 +++---
 components/table/__tests__/empty.test.js      |  8 +-
 components/table/demo/nested-table.md         |  2 +-
 .../table/demo/row-selection-and-operation.md |  2 +-
 components/table/demo/row-selection-custom.md |  4 +-
 components/table/demo/row-selection.md        |  2 +-
 components/transfer/__tests__/search.test.js  |  2 +-
 components/transfer/demo/custom-item.md       |  4 +-
 components/upload/demo/defaultFileList.md     |  4 +-
 components/upload/index.en-US.md              |  4 +-
 components/upload/index.zh-CN.md              |  4 +-
 package.json                                  |  6 +-
 site/theme/index.js                           |  4 +-
 .../theme/template/Color/ColorPaletteTool.jsx |  8 +-
 site/theme/template/Content/Article.jsx       |  6 +-
 site/theme/template/Content/ComponentDoc.jsx  |  8 +-
 site/theme/template/Content/Demo.jsx          |  6 +-
 site/theme/template/Content/MainContent.jsx   | 34 +++----
 site/theme/template/Content/index.jsx         |  8 +-
 site/theme/template/Home/Page4.jsx            |  4 +-
 site/theme/template/Layout/Footer.jsx         |  2 +-
 site/theme/template/Layout/Header.jsx         | 56 +++++------
 site/theme/template/Layout/index.jsx          |  2 +-
 47 files changed, 394 insertions(+), 352 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index aa92f6346940..e2f3c0ec5deb 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -30,6 +30,7 @@ const eslintrc = {
     'import/extensions': 0,
     'import/no-unresolved': 0,
     'import/no-extraneous-dependencies': 0,
+    'prefer-destructuring': 0,
     'no-param-reassign': 0,
     'no-return-assign': 0,
     'max-len': 0,
@@ -38,8 +39,13 @@ const eslintrc = {
     'react/require-extension': 0,
     'jsx-a11y/no-static-element-interactions': 0,
     'jsx-a11y/anchor-has-content': 0,
+    'jsx-a11y/click-events-have-key-events': 0,
+    'jsx-a11y/anchor-is-valid': 0,
     'react/no-danger': 0,
     'comma-dangle': ['error', 'always-multiline'],
+    'function-paren-newline': 0,
+    'object-curly-newline': 0,
+    'no-restricted-globals': 0,
   },
 };
 
@@ -51,6 +57,7 @@ if (process.env.RUN_ENV === 'DEMO') {
   };
 
   Object.assign(eslintrc.rules, {
+    indent: 0,
     'no-console': 0,
     'no-plusplus': 0,
     'eol-last': 0,
diff --git a/components/affix/__tests__/Affix.test.js b/components/affix/__tests__/Affix.test.js
index 9e3ce25e1502..ce449fffbf73 100644
--- a/components/affix/__tests__/Affix.test.js
+++ b/components/affix/__tests__/Affix.test.js
@@ -18,30 +18,32 @@ class AffixMounter extends React.Component {
     return this.container;
   }
   render() {
-    return (<div
-      style={{
-        height: 100,
-        overflowY: 'scroll',
-      }}
-      ref={(node) => { this.container = node; }}
-    >
+    return (
       <div
-        className="background"
         style={{
-          paddingTop: 60,
-          height: 300,
+          height: 100,
+          overflowY: 'scroll',
         }}
+        ref={(node) => { this.container = node; }}
       >
-        <Affix
-          target={() => this.container}
-          ref={ele => this.affix = ele}
+        <div
+          className="background"
+          style={{
+            paddingTop: 60,
+            height: 300,
+          }}
         >
-          <Button type="primary" >
-            Fixed at the top of container
-          </Button>
-        </Affix>
+          <Affix
+            target={() => this.container}
+            ref={ele => this.affix = ele}
+          >
+            <Button type="primary" >
+              Fixed at the top of container
+            </Button>
+          </Affix>
+        </div>
       </div>
-    </div>);
+    );
   }
 }
 
diff --git a/components/alert/demo/closable.md b/components/alert/demo/closable.md
index d1f35acb71c7..fffd5390f47f 100644
--- a/components/alert/demo/closable.md
+++ b/components/alert/demo/closable.md
@@ -20,17 +20,21 @@ const onClose = function (e) {
   console.log(e, 'I was closed.');
 };
 
-ReactDOM.render(<div>
-  <Alert message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
-    type="warning"
-    closable
-    onClose={onClose}
-  />
-  <Alert message="Error Text"
-    description="Error Description Error Description Error Description Error Description Error Description Error Description"
-    type="error"
-    closable
-    onClose={onClose}
-  />
-</div>, mountNode);
+ReactDOM.render(
+  <div>
+    <Alert
+      message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
+      type="warning"
+      closable
+      onClose={onClose}
+    />
+    <Alert
+      message="Error Text"
+      description="Error Description Error Description Error Description Error Description Error Description Error Description"
+      type="error"
+      closable
+      onClose={onClose}
+    />
+  </div>
+, mountNode);
 ````
diff --git a/components/alert/demo/description.md b/components/alert/demo/description.md
index 9d8c5fd18933..b7362992a2e0 100644
--- a/components/alert/demo/description.md
+++ b/components/alert/demo/description.md
@@ -16,26 +16,28 @@ Additional description for alert message.
 ````jsx
 import { Alert } from 'antd';
 
-ReactDOM.render(<div>
-  <Alert
-    message="Success Text"
-    description="Success Description Success Description Success Description"
-    type="success"
-  />
-  <Alert
-    message="Info Text"
-    description="Info Description Info Description Info Description Info Description"
-    type="info"
-  />
-  <Alert
-    message="Warning Text"
-    description="Warning Description Warning Description Warning Description Warning Description"
-    type="warning"
-  />
-  <Alert
-    message="Error Text"
-    description="Error Description Error Description Error Description Error Description"
-    type="error"
-  />
-</div>, mountNode);
+ReactDOM.render(
+  <div>
+    <Alert
+      message="Success Text"
+      description="Success Description Success Description Success Description"
+      type="success"
+    />
+    <Alert
+      message="Info Text"
+      description="Info Description Info Description Info Description Info Description"
+      type="info"
+    />
+    <Alert
+      message="Warning Text"
+      description="Warning Description Warning Description Warning Description Warning Description"
+      type="warning"
+    />
+    <Alert
+      message="Error Text"
+      description="Error Description Error Description Error Description Error Description"
+      type="error"
+    />
+  </div>
+, mountNode);
 ````
diff --git a/components/alert/demo/icon.md b/components/alert/demo/icon.md
index 8b94e9b3b3dd..821adba8f38a 100644
--- a/components/alert/demo/icon.md
+++ b/components/alert/demo/icon.md
@@ -16,34 +16,36 @@ Decent icon make information more clear and more friendly.
 ````jsx
 import { Alert } from 'antd';
 
-ReactDOM.render(<div>
-  <Alert message="Success Tips" type="success" showIcon />
-  <Alert message="Informational Notes" type="info" showIcon />
-  <Alert message="Warning" type="warning" showIcon />
-  <Alert message="Error" type="error" showIcon />
-  <Alert
-    message="success tips"
-    description="Detailed description and advices about successful copywriting."
-    type="success"
-    showIcon
-  />
-  <Alert
-    message="Informational Notes"
-    description="Additional description and informations about copywriting."
-    type="info"
-    showIcon
-  />
-  <Alert
-    message="Warning"
-    description="This is a warning notice about copywriting."
-    type="warning"
-    showIcon
-  />
-  <Alert
-    message="Error"
-    description="This is an error message about copywriting."
-    type="error"
-    showIcon
-  />
-</div>, mountNode);
+ReactDOM.render(
+  <div>
+    <Alert message="Success Tips" type="success" showIcon />
+    <Alert message="Informational Notes" type="info" showIcon />
+    <Alert message="Warning" type="warning" showIcon />
+    <Alert message="Error" type="error" showIcon />
+    <Alert
+      message="success tips"
+      description="Detailed description and advices about successful copywriting."
+      type="success"
+      showIcon
+    />
+    <Alert
+      message="Informational Notes"
+      description="Additional description and informations about copywriting."
+      type="info"
+      showIcon
+    />
+    <Alert
+      message="Warning"
+      description="This is a warning notice about copywriting."
+      type="warning"
+      showIcon
+    />
+    <Alert
+      message="Error"
+      description="This is an error message about copywriting."
+      type="error"
+      showIcon
+    />
+  </div>
+, mountNode);
 ````
diff --git a/components/alert/demo/style.md b/components/alert/demo/style.md
index 7fae3b28b690..37f906abea7b 100644
--- a/components/alert/demo/style.md
+++ b/components/alert/demo/style.md
@@ -16,10 +16,12 @@ There are 4 types of Alert: `success`, `info`, `warning`, `error`.
 ````jsx
 import { Alert } from 'antd';
 
-ReactDOM.render(<div>
-  <Alert message="Success Text" type="success" />
-  <Alert message="Info Text" type="info" />
-  <Alert message="Warning Text" type="warning" />
-  <Alert message="Error Text" type="error" />
-</div>, mountNode);
+ReactDOM.render(
+  <div>
+    <Alert message="Success Text" type="success" />
+    <Alert message="Info Text" type="info" />
+    <Alert message="Warning Text" type="warning" />
+    <Alert message="Error Text" type="error" />
+  </div>
+, mountNode);
 ````
diff --git a/components/calendar/demo/notice-calendar.md b/components/calendar/demo/notice-calendar.md
index 2d464329cd45..56afb9ca62ef 100644
--- a/components/calendar/demo/notice-calendar.md
+++ b/components/calendar/demo/notice-calendar.md
@@ -68,10 +68,12 @@ function getMonthData(value) {
 
 function monthCellRender(value) {
   const num = getMonthData(value);
-  return num ? <div className="notes-month">
-    <section>{num}</section>
-    <span>Backlog number</span>
-  </div> : null;
+  return num ? (
+    <div className="notes-month">
+      <section>{num}</section>
+      <span>Backlog number</span>
+    </div>
+  ) : null;
 }
 
 ReactDOM.render(
diff --git a/components/carousel/__tests__/index.test.js b/components/carousel/__tests__/index.test.js
index 356c4412b21f..6226dd2017f0 100644
--- a/components/carousel/__tests__/index.test.js
+++ b/components/carousel/__tests__/index.test.js
@@ -5,7 +5,7 @@ import Carousel from '..';
 describe('Carousel', () => {
   it('should has innerSlider', () => {
     const wrapper = mount(<Carousel><div /></Carousel>);
-    const innerSlider = wrapper.node.innerSlider;
+    const { innerSlider } = wrapper.node;
     const innerSliderFromRefs = wrapper.node.refs.slick.innerSlider;
     expect(innerSlider).toBe(innerSliderFromRefs);
     expect(typeof innerSlider.slickNext).toBe('function');
diff --git a/components/cascader/demo/lazy.md b/components/cascader/demo/lazy.md
index 2852cd0c5d8a..bf97cf747f75 100644
--- a/components/cascader/demo/lazy.md
+++ b/components/cascader/demo/lazy.md
@@ -32,14 +32,10 @@ const options = [{
 
 class LazyOptions extends React.Component {
   state = {
-    inputValue: '',
     options,
   };
   onChange = (value, selectedOptions) => {
     console.log(value, selectedOptions);
-    this.setState({
-      inputValue: selectedOptions.map(o => o.label).join(', '),
-    });
   }
   loadData = (selectedOptions) => {
     const targetOption = selectedOptions[selectedOptions.length - 1];
diff --git a/components/collapse/demo/accordion.md b/components/collapse/demo/accordion.md
index 33a4143c4b67..b2ec93873b06 100644
--- a/components/collapse/demo/accordion.md
+++ b/components/collapse/demo/accordion.md
@@ -1,6 +1,6 @@
 ---
 order: 1
-title: 
+title:
   zh-CN: 手风琴
   en-US: Accordion
 ---
@@ -25,13 +25,13 @@ const text = `
 
 ReactDOM.render(
   <Collapse accordion>
-    <Panel header={'This is panel header 1'} key="1">
+    <Panel header="This is panel header 1" key="1">
       <p>{text}</p>
     </Panel>
-    <Panel header={'This is panel header 2'} key="2">
+    <Panel header="This is panel header 2" key="2">
       <p>{text}</p>
     </Panel>
-    <Panel header={'This is panel header 3'} key="3">
+    <Panel header="This is panel header 3" key="3">
       <p>{text}</p>
     </Panel>
   </Collapse>
diff --git a/components/collapse/demo/mix.md b/components/collapse/demo/mix.md
index b6124e715bd8..ebbd73454dd0 100644
--- a/components/collapse/demo/mix.md
+++ b/components/collapse/demo/mix.md
@@ -29,17 +29,17 @@ const text = `
 
 ReactDOM.render(
   <Collapse onChange={callback}>
-    <Panel header={'This is panel header 1'} key="1">
+    <Panel header="This is panel header 1" key="1">
       <Collapse defaultActiveKey="1">
-        <Panel header={'This is panel nest panel'} key="1">
+        <Panel header="This is panel nest panel" key="1">
           <p>{text}</p>
         </Panel>
       </Collapse>
     </Panel>
-    <Panel header={'This is panel header 2'} key="2">
+    <Panel header="This is panel header 2" key="2">
       <p>{text}</p>
     </Panel>
-    <Panel header={'This is panel header 3'} key="3">
+    <Panel header="This is panel header 3" key="3">
       <p>{text}</p>
     </Panel>
   </Collapse>
diff --git a/components/dropdown/demo/trigger.md b/components/dropdown/demo/trigger.md
index d000480e2676..993737d51e82 100644
--- a/components/dropdown/demo/trigger.md
+++ b/components/dropdown/demo/trigger.md
@@ -29,11 +29,11 @@ const menu = (
   </Menu>
 );
 
-ReactDOM.render(<div>
+ReactDOM.render(
   <Dropdown overlay={menu} trigger={['click']}>
     <a className="ant-dropdown-link" href="#">
       Click me <Icon type="down" />
     </a>
   </Dropdown>
-</div>, mountNode);
+, mountNode);
 ````
diff --git a/components/layout/demo/responsive.md b/components/layout/demo/responsive.md
index b91979aed976..d75d8c9fef18 100644
--- a/components/layout/demo/responsive.md
+++ b/components/layout/demo/responsive.md
@@ -21,44 +21,46 @@ Layout.Sider supports responsive layout.
 import { Layout, Menu, Icon } from 'antd';
 const { Header, Content, Footer, Sider } = Layout;
 
-ReactDOM.render(<Layout>
-  <Sider
-    breakpoint="lg"
-    collapsedWidth="0"
-    onCollapse={(collapsed, type) => { console.log(collapsed, type); }}
-  >
-    <div className="logo" />
-    <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
-      <Menu.Item key="1">
-        <Icon type="user" />
-        <span className="nav-text">nav 1</span>
-      </Menu.Item>
-      <Menu.Item key="2">
-        <Icon type="video-camera" />
-        <span className="nav-text">nav 2</span>
-      </Menu.Item>
-      <Menu.Item key="3">
-        <Icon type="upload" />
-        <span className="nav-text">nav 3</span>
-      </Menu.Item>
-      <Menu.Item key="4">
-        <Icon type="user" />
-        <span className="nav-text">nav 4</span>
-      </Menu.Item>
-    </Menu>
-  </Sider>
+ReactDOM.render(
   <Layout>
-    <Header style={{ background: '#fff', padding: 0 }} />
-    <Content style={{ margin: '24px 16px 0' }}>
-      <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
-        content
-      </div>
-    </Content>
-    <Footer style={{ textAlign: 'center' }}>
-      Ant Design ©2016 Created by Ant UED
-    </Footer>
+    <Sider
+      breakpoint="lg"
+      collapsedWidth="0"
+      onCollapse={(collapsed, type) => { console.log(collapsed, type); }}
+    >
+      <div className="logo" />
+      <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
+        <Menu.Item key="1">
+          <Icon type="user" />
+          <span className="nav-text">nav 1</span>
+        </Menu.Item>
+        <Menu.Item key="2">
+          <Icon type="video-camera" />
+          <span className="nav-text">nav 2</span>
+        </Menu.Item>
+        <Menu.Item key="3">
+          <Icon type="upload" />
+          <span className="nav-text">nav 3</span>
+        </Menu.Item>
+        <Menu.Item key="4">
+          <Icon type="user" />
+          <span className="nav-text">nav 4</span>
+        </Menu.Item>
+      </Menu>
+    </Sider>
+    <Layout>
+      <Header style={{ background: '#fff', padding: 0 }} />
+      <Content style={{ margin: '24px 16px 0' }}>
+        <div style={{ padding: 24, background: '#fff', minHeight: 360 }}>
+          content
+        </div>
+      </Content>
+      <Footer style={{ textAlign: 'center' }}>
+        Ant Design ©2016 Created by Ant UED
+      </Footer>
+    </Layout>
   </Layout>
-</Layout>, mountNode);
+, mountNode);
 ````
 
 ````css
diff --git a/components/locale-provider/__tests__/index.test.js b/components/locale-provider/__tests__/index.test.js
index 69795dd44e1d..76bd48d90239 100644
--- a/components/locale-provider/__tests__/index.test.js
+++ b/components/locale-provider/__tests__/index.test.js
@@ -2,7 +2,7 @@ import React from 'react';
 import { mount } from 'enzyme';
 import moment from 'moment';
 import { LocaleProvider, Pagination, DatePicker, TimePicker, Calendar,
-         Popconfirm, Table, Modal, Select, Transfer } from '../../';
+  Popconfirm, Table, Modal, Select, Transfer } from '../../';
 import enGB from '../en_GB';
 import frFR from '../fr_FR';
 import nlBE from '../nl_BE';
@@ -36,8 +36,8 @@ import srRS from '../sr_RS';
 
 const locales = [enUS, ptPT, ptBR, ruRU, esES, svSE, frBE, deDE, nlNL, caES, csCZ, koKR, etEE, skSK, jaJP, trTR, zhTW, fiFI, plPL, bgBG, enGB, frFR, nlBE, itIT, viVN, thTH, faIR, elGR, nbNO, srRS];
 
-const Option = Select.Option;
-const RangePicker = DatePicker.RangePicker;
+const { Option } = Select;
+const { RangePicker } = DatePicker;
 
 const columns = [{
   title: 'Name',
diff --git a/components/menu/__tests__/index.test.js b/components/menu/__tests__/index.test.js
index 313fb91c083a..f4b42848f529 100644
--- a/components/menu/__tests__/index.test.js
+++ b/components/menu/__tests__/index.test.js
@@ -3,7 +3,7 @@ import { mount } from 'enzyme';
 import Menu from '..';
 import Icon from '../../icon';
 
-const SubMenu = Menu.SubMenu;
+const { SubMenu } = Menu;
 const delay = timeout => new Promise(resolve => setTimeout(resolve, timeout));
 
 describe('Menu', () => {
diff --git a/components/modal/__tests__/confirm.test.js b/components/modal/__tests__/confirm.test.js
index e394348314aa..c1a0b975e9ed 100644
--- a/components/modal/__tests__/confirm.test.js
+++ b/components/modal/__tests__/confirm.test.js
@@ -1,6 +1,6 @@
 import Modal from '..';
 
-const confirm = Modal.confirm;
+const { confirm } = Modal;
 
 describe('Modal.confirm triggers callbacks correctly', () => {
   const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
diff --git a/components/notification/__tests__/placement.test.js b/components/notification/__tests__/placement.test.js
index f533610ee252..f120af007acd 100644
--- a/components/notification/__tests__/placement.test.js
+++ b/components/notification/__tests__/placement.test.js
@@ -8,7 +8,7 @@ describe('Notification.placement', () => {
   }
 
   function getStyle(el, prop, getComputedStyle, style) {
-    getComputedStyle = window.getComputedStyle;
+    getComputedStyle = getComputedStyle || window.getComputedStyle;
     style = getComputedStyle ? getComputedStyle(el) : el.currentStyle;
 
     // If a css property's value is `auto`, it will return an empty string.
diff --git a/components/popconfirm/demo/dynamic-trigger.md b/components/popconfirm/demo/dynamic-trigger.md
index c68f8bc5215a..25930cd3727d 100755
--- a/components/popconfirm/demo/dynamic-trigger.md
+++ b/components/popconfirm/demo/dynamic-trigger.md
@@ -19,7 +19,7 @@ import { Popconfirm, Switch, message } from 'antd';
 class App extends React.Component {
   state = {
     visible: false,
-    condition: true,   // Whether meet the condition, if not show popconfirm.
+    condition: true, // Whether meet the condition, if not show popconfirm.
   }
   changeCondition = (value) => {
     this.setState({ condition: value });
@@ -40,9 +40,9 @@ class App extends React.Component {
     // Determining condition before show the popconfirm.
     console.log(this.state.condition);
     if (this.state.condition) {
-      this.confirm();  // next step
+      this.confirm(); // next step
     } else {
-      this.setState({ visible });  // show the popconfirm
+      this.setState({ visible }); // show the popconfirm
     }
   }
   render() {
diff --git a/components/popconfirm/demo/placement.md b/components/popconfirm/demo/placement.md
index 1f796fde08d4..9487fa26a1d4 100755
--- a/components/popconfirm/demo/placement.md
+++ b/components/popconfirm/demo/placement.md
@@ -22,52 +22,54 @@ function confirm() {
   message.info('Click on Yes.');
 }
 
-ReactDOM.render(<div className="demo">
-  <div style={{ marginLeft: 70, whiteSpace: 'nowrap' }}>
-    <Popconfirm placement="topLeft" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
-      <Button>TL</Button>
-    </Popconfirm>
-    <Popconfirm placement="top" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
-      <Button>Top</Button>
-    </Popconfirm>
-    <Popconfirm placement="topRight" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
-      <Button>TR</Button>
-    </Popconfirm>
+ReactDOM.render(
+  <div className="demo">
+    <div style={{ marginLeft: 70, whiteSpace: 'nowrap' }}>
+      <Popconfirm placement="topLeft" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
+        <Button>TL</Button>
+      </Popconfirm>
+      <Popconfirm placement="top" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
+        <Button>Top</Button>
+      </Popconfirm>
+      <Popconfirm placement="topRight" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
+        <Button>TR</Button>
+      </Popconfirm>
+    </div>
+    <div style={{ width: 70, float: 'left' }}>
+      <Popconfirm placement="leftTop" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
+        <Button>LT</Button>
+      </Popconfirm>
+      <Popconfirm placement="left" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
+        <Button>Left</Button>
+      </Popconfirm>
+      <Popconfirm placement="leftBottom" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
+        <Button>LB</Button>
+      </Popconfirm>
+    </div>
+    <div style={{ width: 70, marginLeft: 304 }}>
+      <Popconfirm placement="rightTop" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
+        <Button>RT</Button>
+      </Popconfirm>
+      <Popconfirm placement="right" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
+        <Button>Right</Button>
+      </Popconfirm>
+      <Popconfirm placement="rightBottom" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
+        <Button>RB</Button>
+      </Popconfirm>
+    </div>
+    <div style={{ marginLeft: 70, clear: 'both', whiteSpace: 'nowrap' }}>
+      <Popconfirm placement="bottomLeft" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
+        <Button>BL</Button>
+      </Popconfirm>
+      <Popconfirm placement="bottom" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
+        <Button>Bottom</Button>
+      </Popconfirm>
+      <Popconfirm placement="bottomRight" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
+        <Button>BR</Button>
+      </Popconfirm>
+    </div>
   </div>
-  <div style={{ width: 70, float: 'left' }}>
-    <Popconfirm placement="leftTop" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
-      <Button>LT</Button>
-    </Popconfirm>
-    <Popconfirm placement="left" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
-      <Button>Left</Button>
-    </Popconfirm>
-    <Popconfirm placement="leftBottom" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
-      <Button>LB</Button>
-    </Popconfirm>
-  </div>
-  <div style={{ width: 70, marginLeft: 304 }}>
-    <Popconfirm placement="rightTop" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
-      <Button>RT</Button>
-    </Popconfirm>
-    <Popconfirm placement="right" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
-      <Button>Right</Button>
-    </Popconfirm>
-    <Popconfirm placement="rightBottom" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
-      <Button>RB</Button>
-    </Popconfirm>
-  </div>
-  <div style={{ marginLeft: 70, clear: 'both', whiteSpace: 'nowrap' }}>
-    <Popconfirm placement="bottomLeft" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
-      <Button>BL</Button>
-    </Popconfirm>
-    <Popconfirm placement="bottom" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
-      <Button>Bottom</Button>
-    </Popconfirm>
-    <Popconfirm placement="bottomRight" title={text} onConfirm={confirm} okText="Yes" cancelText="No">
-      <Button>BR</Button>
-    </Popconfirm>
-  </div>
-</div>, mountNode);
+, mountNode);
 ````
 
 <style>
diff --git a/components/radio/demo/radiobutton.md b/components/radio/demo/radiobutton.md
index 819c8d8ae6b1..a2cddcdb4cc8 100644
--- a/components/radio/demo/radiobutton.md
+++ b/components/radio/demo/radiobutton.md
@@ -22,30 +22,32 @@ function onChange(e) {
   console.log(`radio checked:${e.target.value}`);
 }
 
-ReactDOM.render(<div>
+ReactDOM.render(
   <div>
-    <RadioGroup onChange={onChange} defaultValue="a">
-      <RadioButton value="a">Hangzhou</RadioButton>
-      <RadioButton value="b">Shanghai</RadioButton>
-      <RadioButton value="c">Beijing</RadioButton>
-      <RadioButton value="d">Chengdu</RadioButton>
-    </RadioGroup>
+    <div>
+      <RadioGroup onChange={onChange} defaultValue="a">
+        <RadioButton value="a">Hangzhou</RadioButton>
+        <RadioButton value="b">Shanghai</RadioButton>
+        <RadioButton value="c">Beijing</RadioButton>
+        <RadioButton value="d">Chengdu</RadioButton>
+      </RadioGroup>
+    </div>
+    <div style={{ marginTop: 16 }}>
+      <RadioGroup onChange={onChange} defaultValue="a">
+        <RadioButton value="a">Hangzhou</RadioButton>
+        <RadioButton value="b" disabled>Shanghai</RadioButton>
+        <RadioButton value="c">Beijing</RadioButton>
+        <RadioButton value="d">Chengdu</RadioButton>
+      </RadioGroup>
+    </div>
+    <div style={{ marginTop: 16 }}>
+      <RadioGroup disabled onChange={onChange} defaultValue="a">
+        <RadioButton value="a">Hangzhou</RadioButton>
+        <RadioButton value="b">Shanghai</RadioButton>
+        <RadioButton value="c">Beijing</RadioButton>
+        <RadioButton value="d">Chengdu</RadioButton>
+      </RadioGroup>
+    </div>
   </div>
-  <div style={{ marginTop: 16 }}>
-    <RadioGroup onChange={onChange} defaultValue="a">
-      <RadioButton value="a">Hangzhou</RadioButton>
-      <RadioButton value="b" disabled>Shanghai</RadioButton>
-      <RadioButton value="c">Beijing</RadioButton>
-      <RadioButton value="d">Chengdu</RadioButton>
-    </RadioGroup>
-  </div>
-  <div style={{ marginTop: 16 }}>
-    <RadioGroup disabled onChange={onChange} defaultValue="a">
-      <RadioButton value="a">Hangzhou</RadioButton>
-      <RadioButton value="b">Shanghai</RadioButton>
-      <RadioButton value="c">Beijing</RadioButton>
-      <RadioButton value="d">Chengdu</RadioButton>
-    </RadioGroup>
-  </div>
-</div>, mountNode);
+, mountNode);
 ```
diff --git a/components/radio/demo/size.md b/components/radio/demo/size.md
index b8942b871fc0..5b88d4a7a1f9 100644
--- a/components/radio/demo/size.md
+++ b/components/radio/demo/size.md
@@ -18,30 +18,32 @@ import { Radio } from 'antd';
 const RadioButton = Radio.Button;
 const RadioGroup = Radio.Group;
 
-ReactDOM.render(<div>
+ReactDOM.render(
   <div>
-    <RadioGroup defaultValue="a" size="large">
-      <RadioButton value="a">Hangzhou</RadioButton>
-      <RadioButton value="b">Shanghai</RadioButton>
-      <RadioButton value="c">Beijing</RadioButton>
-      <RadioButton value="d">Chengdu</RadioButton>
-    </RadioGroup>
+    <div>
+      <RadioGroup defaultValue="a" size="large">
+        <RadioButton value="a">Hangzhou</RadioButton>
+        <RadioButton value="b">Shanghai</RadioButton>
+        <RadioButton value="c">Beijing</RadioButton>
+        <RadioButton value="d">Chengdu</RadioButton>
+      </RadioGroup>
+    </div>
+    <div style={{ marginTop: 16 }}>
+      <RadioGroup defaultValue="a">
+        <RadioButton value="a">Hangzhou</RadioButton>
+        <RadioButton value="b">Shanghai</RadioButton>
+        <RadioButton value="c">Beijing</RadioButton>
+        <RadioButton value="d">Chengdu</RadioButton>
+      </RadioGroup>
+    </div>
+    <div style={{ marginTop: 16 }}>
+      <RadioGroup defaultValue="a" size="small">
+        <RadioButton value="a">Hangzhou</RadioButton>
+        <RadioButton value="b">Shanghai</RadioButton>
+        <RadioButton value="c">Beijing</RadioButton>
+        <RadioButton value="d">Chengdu</RadioButton>
+      </RadioGroup>
+    </div>
   </div>
-  <div style={{ marginTop: 16 }}>
-    <RadioGroup defaultValue="a">
-      <RadioButton value="a">Hangzhou</RadioButton>
-      <RadioButton value="b">Shanghai</RadioButton>
-      <RadioButton value="c">Beijing</RadioButton>
-      <RadioButton value="d">Chengdu</RadioButton>
-    </RadioGroup>
-  </div>
-  <div style={{ marginTop: 16 }}>
-    <RadioGroup defaultValue="a" size="small">
-      <RadioButton value="a">Hangzhou</RadioButton>
-      <RadioButton value="b">Shanghai</RadioButton>
-      <RadioButton value="c">Beijing</RadioButton>
-      <RadioButton value="d">Chengdu</RadioButton>
-    </RadioGroup>
-  </div>
-</div>, mountNode);
+, mountNode);
 ```
diff --git a/components/rate/demo/text.md b/components/rate/demo/text.md
index e6bb906da5b3..a1ba246bea46 100644
--- a/components/rate/demo/text.md
+++ b/components/rate/demo/text.md
@@ -19,7 +19,6 @@ import { Rate } from 'antd';
 class Rater extends React.Component {
   state = {
     value: 3,
-    count: null,
   }
   handleChange = (value) => {
     this.setState({ value });
diff --git a/components/select/demo/label-in-value.md b/components/select/demo/label-in-value.md
index 8abd9ef54021..b28b92d488b1 100644
--- a/components/select/demo/label-in-value.md
+++ b/components/select/demo/label-in-value.md
@@ -22,7 +22,7 @@ import { Select } from 'antd';
 const Option = Select.Option;
 
 function handleChange(value) {
-  console.log(value);  // { key: "lucy", label: "Lucy (101)" }
+  console.log(value); // { key: "lucy", label: "Lucy (101)" }
 }
 
 ReactDOM.render(
diff --git a/components/switch/demo/text.md b/components/switch/demo/text.md
index 1ed727daf14d..d269530f0d57 100644
--- a/components/switch/demo/text.md
+++ b/components/switch/demo/text.md
@@ -16,11 +16,13 @@ With text and icon.
 ````jsx
 import { Switch, Icon } from 'antd';
 
-ReactDOM.render(<div>
-  <Switch checkedChildren="开" unCheckedChildren="关" />
-  <br />
-  <Switch checkedChildren="1" unCheckedChildren="0" />
-  <br />
-  <Switch checkedChildren={<Icon type="check" />} unCheckedChildren={<Icon type="cross" />} />
-</div>, mountNode);
+ReactDOM.render(
+  <div>
+    <Switch checkedChildren="开" unCheckedChildren="关" />
+    <br />
+    <Switch checkedChildren="1" unCheckedChildren="0" />
+    <br />
+    <Switch checkedChildren={<Icon type="check" />} unCheckedChildren={<Icon type="cross" />} />
+  </div>
+, mountNode);
 ````
diff --git a/components/table/__tests__/Table.filter.test.js b/components/table/__tests__/Table.filter.test.js
index d642e47fe54c..6676e3d6d5ba 100644
--- a/components/table/__tests__/Table.filter.test.js
+++ b/components/table/__tests__/Table.filter.test.js
@@ -94,10 +94,12 @@ describe('Table.filter', () => {
     const dropdown = wrapper.find('Dropdown').first();
 
     expect(dropdown.props().visible).toBe(true);
-    wrapper.setProps({ columns: [{
-      ...column,
-      filterDropdownVisible: false,
-    }] });
+    wrapper.setProps({
+      columns: [{
+        ...column,
+        filterDropdownVisible: false,
+      }],
+    });
     expect(dropdown.props().visible).toBe(false);
   });
 
@@ -124,10 +126,12 @@ describe('Table.filter', () => {
     }));
 
     expect(wrapper.find('tbody tr').length).toBe(1);
-    wrapper.setProps({ columns: [{
-      ...column,
-      filteredValue: [],
-    }] });
+    wrapper.setProps({
+      columns: [{
+        ...column,
+        filteredValue: [],
+      }],
+    });
     expect(wrapper.find('tbody tr').length).toBe(4);
   });
 
@@ -140,10 +144,12 @@ describe('Table.filter', () => {
     }));
 
     expect(wrapper.find('tbody tr').length).toBe(1);
-    wrapper.setProps({ columns: [{
-      ...column,
-      filteredValue: null,
-    }] });
+    wrapper.setProps({
+      columns: [{
+        ...column,
+        filteredValue: null,
+      }],
+    });
     expect(wrapper.find('tbody tr').length).toBe(4);
   });
 
diff --git a/components/table/__tests__/empty.test.js b/components/table/__tests__/empty.test.js
index 54ec88b0ed8a..46c5591134d5 100644
--- a/components/table/__tests__/empty.test.js
+++ b/components/table/__tests__/empty.test.js
@@ -14,8 +14,12 @@ const columns = [
 ];
 
 const columnsFixed = [
-  { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },
-  { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },
+  {
+    title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left',
+  },
+  {
+    title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left',
+  },
   { title: 'Column 1', dataIndex: 'address', key: '1' },
   { title: 'Column 2', dataIndex: 'address', key: '2' },
   { title: 'Column 3', dataIndex: 'address', key: '3' },
diff --git a/components/table/demo/nested-table.md b/components/table/demo/nested-table.md
index db39b73fc012..a28a563290ef 100644
--- a/components/table/demo/nested-table.md
+++ b/components/table/demo/nested-table.md
@@ -40,7 +40,7 @@ function NestedTable() {
         dataIndex: 'operation',
         key: 'operation',
         render: () => (
-          <span className={'table-operation'}>
+          <span className="table-operation">
             <a href="#">Pause</a>
             <a href="#">Stop</a>
             <Dropdown overlay={menu}>
diff --git a/components/table/demo/row-selection-and-operation.md b/components/table/demo/row-selection-and-operation.md
index 54213681d519..3dfaef7da8b8 100644
--- a/components/table/demo/row-selection-and-operation.md
+++ b/components/table/demo/row-selection-and-operation.md
@@ -40,7 +40,7 @@ for (let i = 0; i < 46; i++) {
 
 class App extends React.Component {
   state = {
-    selectedRowKeys: [],  // Check here to configure the default column
+    selectedRowKeys: [], // Check here to configure the default column
     loading: false,
   };
   start = () => {
diff --git a/components/table/demo/row-selection-custom.md b/components/table/demo/row-selection-custom.md
index ddda856d3316..b4e3cea9c974 100644
--- a/components/table/demo/row-selection-custom.md
+++ b/components/table/demo/row-selection-custom.md
@@ -40,7 +40,7 @@ for (let i = 0; i < 46; i++) {
 
 class App extends React.Component {
   state = {
-    selectedRowKeys: [],  // Check here to configure the default column
+    selectedRowKeys: [], // Check here to configure the default column
   };
   onSelectChange = (selectedRowKeys) => {
     console.log('selectedRowKeys changed: ', selectedRowKeys);
@@ -57,7 +57,7 @@ class App extends React.Component {
         text: 'Select All Data',
         onSelect: () => {
           this.setState({
-            selectedRowKeys: [...Array(46).keys()],  // 0...45
+            selectedRowKeys: [...Array(46).keys()], // 0...45
           });
         },
       }, {
diff --git a/components/table/demo/row-selection.md b/components/table/demo/row-selection.md
index 7bae50ccad55..9be28245d81c 100644
--- a/components/table/demo/row-selection.md
+++ b/components/table/demo/row-selection.md
@@ -55,7 +55,7 @@ const rowSelection = {
     console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
   },
   getCheckboxProps: record => ({
-    disabled: record.name === 'Disabled User',    // Column configuration not to be checked
+    disabled: record.name === 'Disabled User', // Column configuration not to be checked
   }),
 };
 
diff --git a/components/transfer/__tests__/search.test.js b/components/transfer/__tests__/search.test.js
index d515b670f1be..8be1cf308cb8 100644
--- a/components/transfer/__tests__/search.test.js
+++ b/components/transfer/__tests__/search.test.js
@@ -4,7 +4,7 @@ import Search from '../search';
 
 describe('Search', () => {
   it('should show cross icon when input value exists', () => {
-    const wrapper = mount(<Search value={''} />);
+    const wrapper = mount(<Search value="" />);
 
     expect(wrapper).toMatchSnapshot();
 
diff --git a/components/transfer/demo/custom-item.md b/components/transfer/demo/custom-item.md
index 144fa0227dff..ab702bde1700 100644
--- a/components/transfer/demo/custom-item.md
+++ b/components/transfer/demo/custom-item.md
@@ -53,8 +53,8 @@ class App extends React.Component {
     );
 
     return {
-      label: customLabel,  // for displayed item
-      value: item.title,   // for title and filter matching
+      label: customLabel, // for displayed item
+      value: item.title, // for title and filter matching
     };
   }
   render() {
diff --git a/components/upload/demo/defaultFileList.md b/components/upload/demo/defaultFileList.md
index 020de905ac84..4629fa05e5d2 100644
--- a/components/upload/demo/defaultFileList.md
+++ b/components/upload/demo/defaultFileList.md
@@ -27,7 +27,7 @@ const props = {
     uid: 1,
     name: 'xxx.png',
     status: 'done',
-    reponse: 'Server Error 500',  // custom error message to show
+    reponse: 'Server Error 500', // custom error message to show
     url: 'http://www.baidu.com/xxx.png',
   }, {
     uid: 2,
@@ -38,7 +38,7 @@ const props = {
     uid: 3,
     name: 'zzz.png',
     status: 'error',
-    reponse: 'Server Error 500',  // custom error message to show
+    reponse: 'Server Error 500', // custom error message to show
     url: 'http://www.baidu.com/zzz.png',
   }],
 };
diff --git a/components/upload/index.en-US.md b/components/upload/index.en-US.md
index 6c1bd9d7995c..2438f43fbb2d 100644
--- a/components/upload/index.en-US.md
+++ b/components/upload/index.en-US.md
@@ -59,8 +59,8 @@ When uploading state change, it returns:
    {
       uid: 'uid',      // unique identifier，negative is recommend，to prevent interference with internal generated id
       name: 'xx.png'   // file name
-      status: 'done',  // options：uploading, done, error, removed
-      response: '{"status": "success"}',  // response from server
+      status: 'done', // options：uploading, done, error, removed
+      response: '{"status": "success"}', // response from server
    }
    ```
 
diff --git a/components/upload/index.zh-CN.md b/components/upload/index.zh-CN.md
index 7fc35c4ca436..2093a1db71bd 100644
--- a/components/upload/index.zh-CN.md
+++ b/components/upload/index.zh-CN.md
@@ -60,8 +60,8 @@ title: Upload
    {
       uid: 'uid',      // 文件唯一标识，建议设置为负数，防止和内部产生的 id 冲突
       name: 'xx.png'   // 文件名
-      status: 'done',  // 状态有：uploading done error removed
-      response: '{"status": "success"}',  // 服务端响应内容
+      status: 'done', // 状态有：uploading done error removed
+      response: '{"status": "success"}', // 服务端响应内容
    }
    ```
    > `antd@1.9.0` 之前，multiple 模式下，此参数为一个对象数组 `[file, ...]`，`antd@1.9.0` 开始无论是否多选，均为一个对象。
diff --git a/package.json b/package.json
index 26dd9ed1b53d..1118760fa814 100644
--- a/package.json
+++ b/package.json
@@ -107,17 +107,17 @@
     "enquire.js": "^2.1.1",
     "enzyme": "^2.6.0",
     "enzyme-to-json": "^1.3.0",
-    "eslint": "^3.0.1",
+    "eslint": "^4.8.0",
     "eslint-config-airbnb": "latest",
     "eslint-plugin-babel": "^4.0.0",
     "eslint-plugin-import": "^2.2.0",
-    "eslint-plugin-jsx-a11y": "^5.1.1",
+    "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-markdown": "~1.0.0-beta.4",
     "eslint-plugin-react": "^7.0.1",
     "eslint-tinker": "^0.4.0",
     "fetch-jsonp": "^1.0.3",
     "glob": "^7.1.1",
-    "jest": "^20.0.4",
+    "jest": "^21.1.0",
     "jsonml.js": "^0.1.0",
     "lint-staged": "^4.0.2",
     "mockdate": "^2.0.1",
diff --git a/site/theme/index.js b/site/theme/index.js
index d22d00531321..65540abb6b71 100644
--- a/site/theme/index.js
+++ b/site/theme/index.js
@@ -6,7 +6,7 @@ const contentTmpl = './template/Content/index';
 function pickerGenerator(module) {
   const tester = new RegExp(`^docs/${module}`);
   return (markdownData) => {
-    const filename = markdownData.meta.filename;
+    const { filename } = markdownData.meta;
     if (tester.test(filename) &&
         !/\/demo$/.test(path.dirname(filename))) {
       return {
@@ -25,7 +25,7 @@ module.exports = {
   },
   pick: {
     components(markdownData) {
-      const filename = markdownData.meta.filename;
+      const { filename } = markdownData.meta;
       if (!/^components/.test(filename) ||
           /[/\\]demo$/.test(path.dirname(filename))) return;
 
diff --git a/site/theme/template/Color/ColorPaletteTool.jsx b/site/theme/template/Color/ColorPaletteTool.jsx
index d3e059823a15..a1296f9e08d5 100644
--- a/site/theme/template/Color/ColorPaletteTool.jsx
+++ b/site/theme/template/Color/ColorPaletteTool.jsx
@@ -5,10 +5,10 @@ import ColorBlock from './ColorBlock';
 import ColorPicker from './ColorPicker';
 
 const easing = BezierEasing.apply(null, [0.26, 0.09, 0.37, 0.18]); // 色彩分布曲线
-const warmDark = 0.5;    // 暖色深度
-const warmRotate = -26;  // 暖色角度
-const coldDark = 0.55;   // 冷色深度
-const coldRotate = 10;   // 冷色角度
+const warmDark = 0.5; // 暖色深度
+const warmRotate = -26; // 暖色角度
+const coldDark = 0.55; // 冷色深度
+const coldRotate = 10; // 冷色角度
 
 // eslint-disable-next-line
 export default class ColorPaletteTool extends Component {
diff --git a/site/theme/template/Content/Article.jsx b/site/theme/template/Content/Article.jsx
index 78eac02ce4b2..b9975f1ecad9 100644
--- a/site/theme/template/Content/Article.jsx
+++ b/site/theme/template/Content/Article.jsx
@@ -65,12 +65,12 @@ export default class Article extends React.Component {
     });
   }
   render() {
-    const props = this.props;
-    const content = props.content;
+    const { props } = this;
+    const { content } = props;
 
     const { meta, description } = content;
     const { title, subtitle, filename } = meta;
-    const locale = this.context.intl.locale;
+    const { locale } = this.context.intl;
     const isNotTranslated = locale === 'en-US' && typeof title === 'object';
     return (
       <DocumentTitle title={`${title[locale] || title} - Ant Design`}>
diff --git a/site/theme/template/Content/ComponentDoc.jsx b/site/theme/template/Content/ComponentDoc.jsx
index 7cf3e48c2d56..a6368bc0d1a0 100644
--- a/site/theme/template/Content/ComponentDoc.jsx
+++ b/site/theme/template/Content/ComponentDoc.jsx
@@ -28,10 +28,10 @@ export default class ComponentDoc extends React.Component {
   }
 
   render() {
-    const props = this.props;
+    const { props } = this;
     const { doc, location } = props;
     const { content, meta } = doc;
-    const locale = this.context.intl.locale;
+    const { locale } = this.context.intl;
     const demos = Object.keys(props.demos).map(key => props.demos[key]);
     const expand = this.state.expandAll;
 
@@ -39,7 +39,7 @@ export default class ComponentDoc extends React.Component {
     const leftChildren = [];
     const rightChildren = [];
     const showedDemo = demos.some(demo => demo.meta.only) ?
-            demos.filter(demo => demo.meta.only) : demos.filter(demo => demo.preview);
+      demos.filter(demo => demo.meta.only) : demos.filter(demo => demo.preview);
     showedDemo.sort((a, b) => a.meta.order - b.meta.order)
       .forEach((demoData, index) => {
         const demoElem = (
@@ -63,7 +63,7 @@ export default class ComponentDoc extends React.Component {
     });
 
     const jumper = showedDemo.map((demo) => {
-      const title = demo.meta.title;
+      const { title } = demo.meta;
       const localizeTitle = title[locale] || title;
       return (
         <li key={demo.meta.id} title={localizeTitle}>
diff --git a/site/theme/template/Content/Demo.jsx b/site/theme/template/Content/Demo.jsx
index 4796aca8fbcc..bd77306390b4 100644
--- a/site/theme/template/Content/Demo.jsx
+++ b/site/theme/template/Content/Demo.jsx
@@ -82,8 +82,8 @@ export default class Demo extends React.Component {
   }
 
   render() {
-    const state = this.state;
-    const props = this.props;
+    const { state } = this;
+    const { props } = this;
     const {
       meta,
       src,
@@ -105,7 +105,7 @@ export default class Demo extends React.Component {
       expand: codeExpand,
     });
 
-    const locale = this.context.intl.locale;
+    const { locale } = this.context.intl;
     const localizedTitle = meta.title[locale] || meta.title;
     const localizeIntro = content[locale] || content;
     const introChildren = props.utils
diff --git a/site/theme/template/Content/MainContent.jsx b/site/theme/template/Content/MainContent.jsx
index 8de14cf40ddb..8706797b1e82 100644
--- a/site/theme/template/Content/MainContent.jsx
+++ b/site/theme/template/Content/MainContent.jsx
@@ -7,22 +7,22 @@ import Article from './Article';
 import ComponentDoc from './ComponentDoc';
 import * as utils from '../utils';
 
-const SubMenu = Menu.SubMenu;
+const { SubMenu } = Menu;
 
 function getActiveMenuItem(props) {
-  const children = props.params.children;
+  const { children } = props.params;
   return (children && children.replace('-cn', '')) ||
     props.location.pathname.replace(/(^\/|-cn$)/g, '');
 }
 
 function getModuleData(props) {
-  const pathname = props.location.pathname;
+  const { pathname } = props.location;
   const moduleName = /^\/?components/.test(pathname) ?
-          'components' : pathname.split('/').filter(item => item).slice(0, 2).join('/');
+    'components' : pathname.split('/').filter(item => item).slice(0, 2).join('/');
   const moduleData = moduleName === 'components' || moduleName === 'docs/react' ||
           moduleName === 'changelog' || moduleName === 'changelog-cn' ?
-          [...props.picked.components, ...props.picked['docs/react'], ...props.picked.changelog] :
-          props.picked[moduleName];
+    [...props.picked.components, ...props.picked['docs/react'], ...props.picked.changelog] :
+    props.picked[moduleName];
   const excludedSuffix = utils.isZhCN(props.location.pathname) ? 'en-US.md' : 'zh-CN.md';
   return moduleData.filter(({ meta }) => !meta.filename.endsWith(excludedSuffix));
 }
@@ -58,7 +58,7 @@ export default class MainContent extends React.Component {
   }
 
   componentDidUpdate() {
-    if (!location.hash) {
+    if (!window.location.hash) {
       document.body.scrollTop = 0;
       document.documentElement.scrollTop = 0;
       return;
@@ -67,7 +67,7 @@ export default class MainContent extends React.Component {
       clearTimeout(this.timer);
     }
     this.timer = setTimeout(() => {
-      location.hash = location.hash;
+      window.location.hash = window.location.hash;
     }, 10);
   }
 
@@ -80,7 +80,7 @@ export default class MainContent extends React.Component {
   }
 
   getSideBarOpenKeys(nextProps) {
-    const pathname = nextProps.location.pathname;
+    const { pathname } = nextProps.location;
     const prevModule = this.currentModule;
     this.currentModule = pathname.replace(/^\//).split('/')[1] || 'components';
     if (this.currentModule === 'react') {
@@ -95,14 +95,14 @@ export default class MainContent extends React.Component {
   }
 
   generateMenuItem(isTop, item) {
-    const locale = this.context.intl.locale;
+    const { locale } = this.context.intl;
     const key = fileNameToPath(item.filename);
     const text = isTop ?
-            item.title[locale] || item.title : [
-              <span key="english">{item.title}</span>,
-              <span className="chinese" key="chinese">{item.subtitle}</span>,
-            ];
-    const disabled = item.disabled;
+      item.title[locale] || item.title : [
+        <span key="english">{item.title}</span>,
+        <span className="chinese" key="chinese">{item.subtitle}</span>,
+      ];
+    const { disabled } = item;
     const url = item.filename.replace(/(\/index)?((\.zh-CN)|(\.en-US))?\.md$/i, '').toLowerCase();
     const child = !item.link ? (
       <Link
@@ -193,11 +193,11 @@ export default class MainContent extends React.Component {
   }
 
   render() {
-    const props = this.props;
+    const { props } = this;
     const activeMenuItem = getActiveMenuItem(props);
     const menuItems = this.getMenuItems();
     const { prev, next } = this.getFooterNav(menuItems, activeMenuItem);
-    const localizedPageData = props.localizedPageData;
+    const { localizedPageData } = props;
     const mainContainerClass = classNames('main-container', {
       'main-container-component': !!props.demos,
     });
diff --git a/site/theme/template/Content/index.jsx b/site/theme/template/Content/index.jsx
index f32dacb9107a..ed94563868d4 100644
--- a/site/theme/template/Content/index.jsx
+++ b/site/theme/template/Content/index.jsx
@@ -7,18 +7,18 @@ function isChangelog(pathname) {
 }
 
 export default collect(async (nextProps) => {
-  const pathname = nextProps.location.pathname;
+  const { pathname } = nextProps.location;
   const pageDataPath = pathname.replace('-cn', '').split('/');
   const pageData = isChangelog(pathname) ?
-          nextProps.data.changelog.CHANGELOG :
-          nextProps.utils.get(nextProps.data, pageDataPath);
+    nextProps.data.changelog.CHANGELOG :
+    nextProps.utils.get(nextProps.data, pageDataPath);
   if (!pageData) {
     throw 404; // eslint-disable-line no-throw-literal
   }
 
   const locale = utils.isZhCN(pathname) ? 'zh-CN' : 'en-US';
   const pageDataPromise = typeof pageData === 'function' ?
-          pageData() : (pageData[locale] || pageData.index[locale] || pageData.index)();
+    pageData() : (pageData[locale] || pageData.index[locale] || pageData.index)();
   const demosFetcher = nextProps.utils.get(nextProps.data, [...pageDataPath, 'demo']);
   if (demosFetcher) {
     const [localizedPageData, demos] = await Promise.all([pageDataPromise, demosFetcher()]);
diff --git a/site/theme/template/Home/Page4.jsx b/site/theme/template/Home/Page4.jsx
index 11f51b09f156..b5a8027db01d 100644
--- a/site/theme/template/Home/Page4.jsx
+++ b/site/theme/template/Home/Page4.jsx
@@ -19,7 +19,9 @@ export default function Page4() {
       <TweenOne
         key="image"
         className="image4 bottom-wrapper"
-        animation={{ y: 0, opacity: 1, duration: 550, delay: 150, ease: 'easeOutQuad' }}
+        animation={{
+          y: 0, opacity: 1, duration: 550, delay: 150, ease: 'easeOutQuad',
+        }}
         style={{ transform: 'translateY(50px)', opacity: 0 }}
       />
     </ScrollOverPack>
diff --git a/site/theme/template/Layout/Footer.jsx b/site/theme/template/Layout/Footer.jsx
index 655e46c779d7..48ae57a29b19 100644
--- a/site/theme/template/Layout/Footer.jsx
+++ b/site/theme/template/Layout/Footer.jsx
@@ -59,7 +59,7 @@ class Footer extends React.Component {
   }
 
   infoNewVersion() {
-    const messages = this.props.intl.messages;
+    const { messages } = this.props.intl;
     Modal.info({
       title: messages['app.publish.title'],
       content: (
diff --git a/site/theme/template/Layout/Header.jsx b/site/theme/template/Layout/Header.jsx
index d7025453bef1..04f1c614f41c 100644
--- a/site/theme/template/Layout/Header.jsx
+++ b/site/theme/template/Layout/Header.jsx
@@ -7,7 +7,7 @@ import { Select, Menu, Row, Col, Icon, Button, Popover, AutoComplete, Input } fr
 import * as utils from '../utils';
 import { version as antdVersion } from '../../../../package.json';
 
-const Option = AutoComplete.Option;
+const { Option } = AutoComplete;
 const searchEngine = 'Google';
 const searchLink = 'https://www.google.com/#q=site:ant.design+';
 
@@ -25,7 +25,7 @@ export default class Header extends React.Component {
 
   componentDidMount() {
     this.context.router.listen(this.handleHideMenu);
-    const searchInput = this.searchInput;
+    const { searchInput } = this;
     /* eslint-disable global-require */
     require('enquire.js')
       .register('only screen and (min-width: 0) and (max-width: 992px)', {
@@ -90,16 +90,16 @@ export default class Header extends React.Component {
   }
 
   handleLangChange = () => {
-    const pathname = this.props.location.pathname;
-    const currentProtocol = `${location.protocol}//`;
-    const currentHref = location.href.substr(currentProtocol.length);
+    const { pathname } = this.props.location;
+    const currentProtocol = `${window.location.protocol}//`;
+    const currentHref = window.location.href.substr(currentProtocol.length);
 
     if (utils.isLocalStorageNameSupported()) {
       localStorage.setItem('locale', utils.isZhCN(pathname) ? 'en-US' : 'zh-CN');
     }
 
-    location.href = currentProtocol + currentHref.replace(
-      location.pathname,
+    window.location.href = currentProtocol + currentHref.replace(
+      window.location.pathname,
       utils.getLocalizedPathname(pathname, !utils.isZhCN(pathname)),
     );
   }
@@ -113,18 +113,20 @@ export default class Header extends React.Component {
 
   render() {
     const { inputValue, menuMode, menuVisible } = this.state;
-    const { location, picked, isFirstScreen, themeConfig } = this.props;
+    const {
+      location, picked, isFirstScreen, themeConfig,
+    } = this.props;
     const docVersions = { ...themeConfig.docVersions, [antdVersion]: antdVersion };
     const versionOptions = Object.keys(docVersions)
       .map(version => <Option value={docVersions[version]} key={version}>{version}</Option>);
-    const components = picked.components;
+    const { components } = picked;
     const module = location.pathname.replace(/(^\/|\/$)/g, '').split('/').slice(0, -1).join('/');
     let activeMenuItem = module || 'home';
     if (activeMenuItem === 'components' || location.pathname === 'changelog') {
       activeMenuItem = 'docs/react';
     }
 
-    const locale = this.context.intl.locale;
+    const { locale } = this.context.intl;
     const isZhCN = locale === 'zh-CN';
     const excludedSuffix = isZhCN ? 'en-US.md' : 'zh-CN.md';
     const options = components
@@ -132,7 +134,7 @@ export default class Header extends React.Component {
       .map(({ meta }) => {
         const pathSnippet = meta.filename.split('/')[1];
         const url = `/components/${pathSnippet}`;
-        const subtitle = meta.subtitle;
+        const { subtitle } = meta;
         return (
           <Option value={url} key={url} data-label={`${meta.title.toLowerCase()} ${subtitle || ''}`}>
             <strong>{meta.title}</strong>
@@ -204,21 +206,23 @@ export default class Header extends React.Component {
     const searchPlaceholder = locale === 'zh-CN' ? '搜索组件...' : 'Search Components...';
     return (
       <header id="header" className={headerClassName}>
-        {menuMode === 'inline' ? <Popover
-          overlayClassName="popover-menu"
-          placement="bottomRight"
-          content={menu}
-          trigger="click"
-          visible={menuVisible}
-          arrowPointAtCenter
-          onVisibleChange={this.onMenuVisibleChange}
-        >
-          <Icon
-            className="nav-phone-icon"
-            type="menu"
-            onClick={this.handleShowMenu}
-          />
-        </Popover> : null}
+        {menuMode === 'inline' ? (
+          <Popover
+            overlayClassName="popover-menu"
+            placement="bottomRight"
+            content={menu}
+            trigger="click"
+            visible={menuVisible}
+            arrowPointAtCenter
+            onVisibleChange={this.onMenuVisibleChange}
+          >
+            <Icon
+              className="nav-phone-icon"
+              type="menu"
+              onClick={this.handleShowMenu}
+            />
+          </Popover>
+        ) : null}
         <Row>
           <Col lg={4} md={5} sm={24} xs={24}>
             <Link to={utils.getLocalizedPathname('/', isZhCN)} id="logo">
diff --git a/site/theme/template/Layout/index.jsx b/site/theme/template/Layout/index.jsx
index 3f8edbcfa934..4dd8b7e94113 100644
--- a/site/theme/template/Layout/index.jsx
+++ b/site/theme/template/Layout/index.jsx
@@ -28,7 +28,7 @@ export default class Layout extends React.Component {
 
   constructor(props) {
     super(props);
-    const pathname = props.location.pathname;
+    const { pathname } = props.location;
     const appLocale = utils.isZhCN(pathname) ? cnLocale : enLocale;
     addLocaleData(appLocale.data);
     this.state = {