From 009ed0858009f3b5f8602f2306749fb01409bf2d Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 27 Jun 2018 15:55:04 +0800
Subject: [PATCH] upgrade eslint-config-airbnb

---
 .eslintrc.js                                  |  9 ++-----
 components/affix/demo/basic.md                |  6 ++---
 components/alert/demo/banner.md               |  4 ++--
 components/alert/demo/basic.md                |  4 ++--
 components/alert/demo/closable.md             |  4 ++--
 components/alert/demo/close-text.md           |  4 ++--
 components/alert/demo/description.md          |  4 ++--
 components/alert/demo/icon.md                 |  4 ++--
 components/alert/demo/smooth-closed.md        |  6 +++--
 components/alert/demo/style.md                |  4 ++--
 components/anchor/demo/basic.md               |  5 ++--
 components/anchor/demo/static.md              |  5 ++--
 .../auto-complete/demo/certain-category.md    |  1 +
 components/auto-complete/demo/custom.md       |  1 +
 .../auto-complete/demo/uncertain-category.md  |  1 +
 components/avatar/demo/badge.md               |  4 ++--
 components/avatar/demo/basic.md               |  4 ++--
 components/avatar/demo/dynamic.md             |  6 +++--
 components/avatar/demo/type.md                |  4 ++--
 components/badge/demo/basic.md                |  4 ++--
 components/badge/demo/change.md               |  1 +
 components/badge/demo/dot.md                  |  4 ++--
 components/badge/demo/link.md                 |  4 ++--
 components/badge/demo/no-wrapper.md           |  4 ++--
 components/badge/demo/overflow.md             |  4 ++--
 components/badge/demo/status.md               |  4 ++--
 components/badge/demo/title.md                |  4 ++--
 components/breadcrumb/demo/basic.md           |  4 ++--
 components/breadcrumb/demo/router-4.md        |  4 ++--
 components/breadcrumb/demo/router.md          |  4 ++--
 components/breadcrumb/demo/separator.md       |  4 ++--
 components/breadcrumb/demo/withIcon.md        |  4 ++--
 components/button/demo/basic.md               |  4 ++--
 components/button/demo/button-group.md        |  1 +
 components/button/demo/ghost.md               |  4 ++--
 components/calendar/demo/basic.md             |  4 ++--
 components/calendar/demo/card.md              |  4 ++--
 components/calendar/demo/notice-calendar.md   |  4 ++--
 components/calendar/demo/select.md            |  3 +++
 components/card/demo/basic.md                 |  4 ++--
 components/card/demo/border-less.md           |  4 ++--
 components/card/demo/flexible-content.md      |  5 ++--
 components/card/demo/grid-card.md             |  4 ++--
 components/card/demo/in-column.md             |  4 ++--
 components/card/demo/inner.md                 |  4 ++--
 components/card/demo/loading.md               |  4 ++--
 components/card/demo/meta.md                  |  5 ++--
 components/card/demo/simple.md                |  4 ++--
 components/card/demo/tabs.md                  |  6 +++--
 components/carousel/demo/autoplay.md          |  4 ++--
 components/carousel/demo/basic.md             |  4 ++--
 components/carousel/demo/fade.md              |  4 ++--
 components/carousel/demo/vertical.md          |  4 ++--
 components/cascader/demo/basic.md             |  4 ++--
 components/cascader/demo/change-on-select.md  |  4 ++--
 components/cascader/demo/custom-render.md     |  4 ++--
 components/cascader/demo/custom-trigger.md    |  1 +
 components/cascader/demo/default-value.md     |  4 ++--
 components/cascader/demo/disabled-option.md   |  4 ++--
 components/cascader/demo/fileds-name.md       |  4 ++--
 components/cascader/demo/hover.md             |  4 ++--
 components/cascader/demo/lazy.md              |  3 +++
 components/cascader/demo/size.md              |  4 ++--
 components/checkbox/demo/basic.md             |  4 ++--
 components/checkbox/demo/check-all.md         |  4 ++++
 components/checkbox/demo/controller.md        |  4 ++++
 components/checkbox/demo/disabled.md          |  4 ++--
 components/checkbox/demo/group.md             |  5 ++--
 components/collapse/demo/accordion.md         |  5 ++--
 components/collapse/demo/basic.md             |  5 ++--
 components/collapse/demo/borderless.md        |  5 ++--
 components/collapse/demo/custom.md            |  5 ++--
 components/collapse/demo/mix.md               |  5 ++--
 components/collapse/demo/noarrow.md           |  5 ++--
 components/date-picker/demo/basic.md          |  5 ++--
 components/date-picker/demo/date-render.md    |  5 ++--
 components/date-picker/demo/disabled-date.md  |  1 +
 components/date-picker/demo/disabled.md       |  5 ++--
 components/date-picker/demo/extra-footer.md   |  5 ++--
 components/date-picker/demo/format.md         |  5 ++--
 components/date-picker/demo/mode.md           |  5 ++--
 .../date-picker/demo/presetted-ranges.md      |  1 +
 components/date-picker/demo/size.md           |  1 +
 components/date-picker/demo/time.md           |  5 ++--
 components/divider/demo/horizontal.md         |  4 ++--
 components/divider/demo/orientation.md        |  4 ++--
 components/divider/demo/vertical.md           |  4 ++--
 components/dropdown/demo/basic.md             |  4 ++--
 components/dropdown/demo/context-menu.md      |  4 ++--
 components/dropdown/demo/dropdown-button.md   |  4 ++--
 components/dropdown/demo/event.md             |  5 ++--
 components/dropdown/demo/item.md              |  4 ++--
 components/dropdown/demo/overlay-visible.md   |  3 +++
 components/dropdown/demo/placement.md         |  4 ++--
 components/dropdown/demo/sub-menu.md          |  5 ++--
 components/dropdown/demo/trigger.md           |  4 ++--
 components/form/demo/advanced-search.md       |  1 +
 components/form/demo/coordinated.md           |  3 +++
 .../form/demo/customized-form-controls.md     |  8 +++++++
 components/form/demo/dynamic-form-item.md     |  1 +
 components/form/demo/dynamic-rule.md          |  4 ++++
 components/form/demo/form-in-modal.md         |  6 +++++
 components/form/demo/global-state.md          |  3 +++
 components/form/demo/horizontal-login.md      |  3 +++
 components/form/demo/layout.md                |  3 +++
 components/form/demo/normal-login.md          |  2 ++
 components/form/demo/register.md              |  7 ++++++
 components/form/demo/time-related-controls.md |  2 ++
 components/form/demo/validate-other.md        |  3 +++
 components/form/demo/validate-static.md       |  5 ++--
 components/form/demo/without-form-create.md   |  3 +++
 components/grid/demo/gutter.md                |  4 ++--
 components/grid/demo/playground.md            |  5 ++++
 components/grid/demo/responsive-more.md       |  4 ++--
 components/grid/demo/responsive.md            |  4 ++--
 components/input-number/demo/basic.md         |  4 ++--
 components/input-number/demo/digit.md         |  4 ++--
 components/input-number/demo/disabled.md      |  2 ++
 components/input-number/demo/formatter.md     |  4 ++--
 components/input-number/demo/size.md          |  4 ++--
 components/input/demo/addon.md                |  5 ++--
 components/input/demo/autosize-textarea.md    |  5 ++--
 components/input/demo/group.md                |  3 +++
 components/input/demo/presuffix.md            |  3 +++
 components/input/demo/search-input.md         |  5 ++--
 components/input/demo/size.md                 |  4 ++--
 components/input/demo/textarea.md             |  1 +
 components/input/demo/tooltip.md              |  4 ++++
 components/layout/demo/basic.md               |  5 ++--
 components/layout/demo/custom-trigger.md      |  3 +++
 components/layout/demo/fixed-sider.md         |  5 ++--
 components/layout/demo/fixed.md               |  5 ++--
 components/layout/demo/responsive.md          |  5 ++--
 components/layout/demo/side.md                |  3 +++
 components/layout/demo/top-side-2.md          |  5 ++--
 components/layout/demo/top-side.md            |  5 ++--
 components/layout/demo/top.md                 |  5 ++--
 components/list/demo/basic.md                 |  4 ++--
 components/list/demo/grid.md                  |  4 ++--
 components/list/demo/infinite-load.md         |  4 ++++
 .../list/demo/infinite-virtualized-load.md    |  7 ++++++
 components/list/demo/loadmore.md              |  4 ++++
 components/list/demo/resposive.md             |  4 ++--
 components/list/demo/simple.md                |  4 ++--
 components/list/demo/vertical.md              |  4 ++--
 components/locale-provider/demo/all.md        |  8 ++++++-
 components/locale-provider/demo/basic.md      |  4 ++--
 components/mention/demo/async.md              |  3 +++
 components/mention/demo/avatar.md             |  6 +++--
 components/mention/demo/basic.md              |  5 ++--
 components/mention/demo/controllder-simple.md |  4 ++++
 components/mention/demo/controlled.md         |  5 ++++
 components/mention/demo/custom-tag.md         |  6 +++--
 components/mention/demo/multilines.md         |  5 ++--
 components/mention/demo/multiple-trigger.md   |  7 ++++--
 components/mention/demo/placement.md          |  5 ++--
 components/mention/demo/popupContainer.md     |  3 +++
 components/mention/demo/readonly.md           |  5 ++--
 components/menu/demo/horizontal.md            |  3 +++
 components/menu/demo/inline-collapsed.md      |  3 +++
 components/menu/demo/inline.md                |  2 ++
 components/menu/demo/sider-current.md         |  4 ++++
 components/menu/demo/switch-mode.md           |  4 ++++
 components/menu/demo/theme.md                 |  4 ++++
 components/menu/demo/vertical.md              |  5 ++--
 components/message/demo/duration.md           |  4 ++--
 components/message/demo/info.md               |  4 ++--
 components/message/demo/loading.md            |  4 ++--
 components/message/demo/other.md              |  4 ++--
 components/message/demo/thenable.md           |  4 ++--
 components/modal/demo/async.md                |  4 ++++
 components/modal/demo/basic.md                |  4 ++++
 components/modal/demo/confirm-promise.md      |  5 ++--
 components/modal/demo/confirm.md              |  5 ++--
 components/modal/demo/footer.md               |  4 ++++
 components/modal/demo/locale.md               |  3 +++
 components/modal/demo/position.md             |  3 +++
 components/notification/demo/basic.md         |  4 ++--
 components/notification/demo/custom-icon.md   |  4 ++--
 components/notification/demo/custom-style.md  |  4 ++--
 components/notification/demo/duration.md      |  4 ++--
 components/notification/demo/placement.md     |  4 ++--
 components/notification/demo/update.md        |  4 ++--
 components/notification/demo/with-btn.md      |  4 ++--
 components/notification/demo/with-icon.md     |  4 ++--
 components/pagination/demo/changer.md         |  4 ++--
 components/pagination/demo/controlled.md      |  2 ++
 components/pagination/demo/itemRender.md      |  6 ++---
 components/pagination/demo/mini.md            |  4 ++--
 components/pagination/demo/more.md            |  4 ++--
 components/pagination/demo/simple.md          |  4 ++--
 components/pagination/demo/total.md           |  4 ++--
 components/popconfirm/demo/basic.md           |  4 ++--
 components/popconfirm/demo/dynamic-trigger.md |  5 ++++
 components/popconfirm/demo/locale.md          |  4 ++--
 components/popconfirm/demo/placement.md       |  4 ++--
 .../popover/demo/arrow-point-at-center.md     |  4 ++--
 components/popover/demo/basic.md              |  4 ++--
 components/popover/demo/control.md            |  3 +++
 components/popover/demo/placement.md          |  4 ++--
 components/popover/demo/triggerType.md        |  4 ++--
 components/progress/demo/circle-dynamic.md    |  4 ++++
 components/progress/demo/circle-mini.md       |  4 ++--
 components/progress/demo/circle.md            |  4 ++--
 components/progress/demo/dynamic.md           |  4 ++++
 components/progress/demo/format.md            |  4 ++--
 components/progress/demo/line-mini.md         |  4 ++--
 components/progress/demo/line.md              |  4 ++--
 components/progress/demo/segment.md           |  4 ++--
 components/radio/demo/disable.md              |  2 ++
 components/radio/demo/radiobutton.md          |  5 ++--
 components/radio/demo/radiogroup-more.md      |  3 +++
 components/radio/demo/radiogroup-options.md   |  5 ++++
 components/radio/demo/radiogroup-with-name.md |  1 +
 components/radio/demo/radiogroup.md           |  3 +++
 components/radio/demo/size.md                 |  5 ++--
 components/rate/demo/character.md             |  4 ++--
 components/rate/demo/clear.md                 |  4 ++--
 components/rate/demo/text.md                  |  2 ++
 .../select/demo/automatic-tokenization.md     |  5 ++--
 components/select/demo/basic.md               |  5 ++--
 components/select/demo/combobox.md            |  3 +++
 components/select/demo/coordinate.md          |  4 ++++
 components/select/demo/label-in-value.md      |  5 ++--
 components/select/demo/multiple.md            |  5 ++--
 components/select/demo/optgroup.md            |  5 ++--
 components/select/demo/search-box.md          |  7 ++++--
 components/select/demo/search.md              |  5 ++--
 components/select/demo/select-users.md        |  5 ++++
 components/select/demo/size.md                |  1 +
 components/select/demo/tags.md                |  5 ++--
 components/slider/demo/basic.md               |  2 ++
 components/slider/demo/icon-slider.md         |  2 ++
 components/slider/demo/input-number.md        |  8 +++++--
 components/slider/demo/mark.md                |  4 ++--
 components/spin/demo/delayAndDebounce.md      |  4 +++-
 components/spin/demo/inside.md                |  4 ++--
 components/spin/demo/nested.md                |  2 ++
 components/spin/demo/size.md                  |  4 ++--
 components/spin/demo/tip.md                   |  4 ++--
 .../steps/demo/customized-progress-dot.md     |  5 ++--
 components/steps/demo/error.md                |  5 ++--
 components/steps/demo/icon.md                 |  5 ++--
 components/steps/demo/progress-dot.md         |  5 ++--
 components/steps/demo/simple.md               |  5 ++--
 components/steps/demo/small-size.md           |  5 ++--
 components/steps/demo/step-next.md            | 13 ++++++----
 components/steps/demo/vertical-small.md       |  5 ++--
 components/steps/demo/vertical.md             |  5 ++--
 components/switch/demo/disabled.md            |  2 ++
 components/switch/demo/loading.md             |  4 ++--
 components/switch/demo/size.md                |  4 ++--
 components/switch/demo/text.md                |  4 ++--
 components/table/demo/ajax.md                 |  4 ++++
 components/table/demo/bordered.md             |  4 ++--
 components/table/demo/colspan-rowspan.md      |  4 ++--
 components/table/demo/custom-filter-panel.md  |  7 ++++--
 components/table/demo/dynamic-settings.md     |  1 +
 components/table/demo/edit-cell.md            | 24 ++++++++++++-------
 components/table/demo/edit-row.md             |  6 +++++
 components/table/demo/expand-children.md      |  4 ++--
 components/table/demo/expand.md               |  4 ++--
 components/table/demo/fixed-header.md         |  4 ++--
 components/table/demo/grouping-columns.md     |  4 ++--
 components/table/demo/head.md                 |  4 ++--
 components/table/demo/jsx.md                  |  4 ++--
 components/table/demo/reset-filter.md         |  5 ++++
 .../table/demo/row-selection-and-operation.md |  3 +++
 components/table/demo/row-selection-custom.md |  2 ++
 components/table/demo/row-selection.md        |  4 ++--
 components/table/demo/size.md                 |  4 ++--
 components/tabs/demo/basic.md                 |  5 ++--
 components/tabs/demo/card-top.md              |  5 ++--
 components/tabs/demo/card.md                  |  5 ++--
 components/tabs/demo/custom-add-trigger.md    |  5 ++++
 components/tabs/demo/disabled.md              |  5 ++--
 components/tabs/demo/editable-card.md         |  5 ++++
 components/tabs/demo/extra.md                 |  5 ++--
 components/tabs/demo/icon.md                  |  5 ++--
 components/tabs/demo/position.md              |  3 +++
 components/tabs/demo/size.md                  |  3 +++
 components/tabs/demo/slide.md                 |  3 +++
 components/tag/demo/checkable.md              |  7 ++++--
 components/tag/demo/colorful.md               |  4 ++--
 components/tag/demo/hot-tags.md               |  7 +++---
 components/time-picker/demo/12hours.md        |  4 ++--
 components/time-picker/demo/disabled.md       |  4 ++--
 components/time-picker/demo/hide-column.md    |  4 ++--
 .../time-picker/demo/interval-options.md      |  4 ++--
 components/time-picker/demo/size.md           |  4 ++--
 components/timeline/demo/basic.md             |  4 ++--
 components/timeline/demo/color.md             |  4 ++--
 components/timeline/demo/custom.md            |  4 ++--
 .../tooltip/demo/arrow-point-at-center.md     |  4 ++--
 .../tooltip/demo/auto-adjust-overflow.md      |  4 ++--
 components/tooltip/demo/basic.md              |  4 ++--
 components/tooltip/demo/placement.md          |  4 ++--
 components/transfer/demo/advanced.md          |  5 ++++
 components/transfer/demo/basic.md             |  4 ++--
 components/transfer/demo/custom-item.md       |  5 ++++
 components/transfer/demo/large-data.md        |  4 ++++
 components/transfer/demo/search.md            |  5 ++++
 components/tree-select/demo/basic.md          |  3 +++
 components/tree-select/demo/checkable.md      |  3 +++
 components/tree-select/demo/multiple.md       |  3 +++
 components/tree-select/demo/treeData.md       |  2 ++
 components/tree/demo/basic-controlled.md      |  6 +++++
 components/tree/demo/basic.md                 |  3 +++
 components/tree/demo/customized-icon.md       |  1 +
 components/tree/demo/draggable.md             |  4 ++++
 components/tree/demo/dynamic.md               |  4 ++++
 components/tree/demo/line.md                  |  2 ++
 components/tree/demo/search.md                |  3 +++
 components/upload/demo/avatar.md              |  2 ++
 components/upload/demo/basic.md               |  4 ++--
 components/upload/demo/defaultFileList.md     |  4 ++--
 components/upload/demo/drag.md                |  5 ++--
 components/upload/demo/fileList.md            |  2 ++
 components/upload/demo/picture-style.md       |  4 ++--
 package.json                                  |  8 +++----
 320 files changed, 876 insertions(+), 456 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 928981c50d..b104d2adb6 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -8,13 +8,6 @@ const eslintrc = {
     es6: true,
   },
   parser: 'babel-eslint',
-  parserOptions: {
-    ecmaVersion: 6,
-    ecmaFeatures: {
-      jsx: true,
-      experimentalObjectRestSpread: true,
-    },
-  },
   plugins: [
     'markdown',
     'react',
@@ -65,6 +58,8 @@ if (process.env.RUN_ENV === 'DEMO') {
     'eol-last': 0,
     'no-script-url': 0,
     'prefer-rest-params': 0,
+    'react/no-access-state-in-setstate': 0,
+    'react/destructuring-assignment': 0,
     'react/no-multi-comp': 0,
     'react/prefer-stateless-function': 0,
     'jsx-a11y/href-no-hash': 0,
diff --git a/components/affix/demo/basic.md b/components/affix/demo/basic.md
index c1c45ce5fa..0d6e96d3e0 100644
--- a/components/affix/demo/basic.md
+++ b/components/affix/demo/basic.md
@@ -21,6 +21,7 @@ class Demo extends React.Component {
     top: 10,
     bottom: 10,
   }
+
   render() {
     return (
       <div>
@@ -54,8 +55,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(
-  <Demo />,
-  mountNode
-);
+ReactDOM.render(<Demo />, mountNode);
 ````
diff --git a/components/alert/demo/banner.md b/components/alert/demo/banner.md
index 7e3a30b573..0eb3feed1c 100644
--- a/components/alert/demo/banner.md
+++ b/components/alert/demo/banner.md
@@ -26,6 +26,6 @@ ReactDOM.render(
     <Alert showIcon={false} message="Warning text without icon" banner />
     <br />
     <Alert type="error" message="Error text" banner />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/alert/demo/basic.md b/components/alert/demo/basic.md
index cf4d174a25..75f4a6818d 100644
--- a/components/alert/demo/basic.md
+++ b/components/alert/demo/basic.md
@@ -17,8 +17,8 @@ The simplest usage for short messages.
 import { Alert } from 'antd';
 
 ReactDOM.render(
-  <Alert message="Success Text" type="success" />
-, mountNode);
+  <Alert message="Success Text" type="success" />,
+  mountNode);
 ````
 
 <style>
diff --git a/components/alert/demo/closable.md b/components/alert/demo/closable.md
index fffd5390f4..277febb053 100644
--- a/components/alert/demo/closable.md
+++ b/components/alert/demo/closable.md
@@ -35,6 +35,6 @@ ReactDOM.render(
       closable
       onClose={onClose}
     />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/alert/demo/close-text.md b/components/alert/demo/close-text.md
index 4959b2034d..56a87a2f87 100644
--- a/components/alert/demo/close-text.md
+++ b/components/alert/demo/close-text.md
@@ -17,6 +17,6 @@ Replace the default icon with customized text.
 import { Alert } from 'antd';
 
 ReactDOM.render(
-  <Alert message="Info Text" type="info" closeText="Close Now" />
-, mountNode);
+  <Alert message="Info Text" type="info" closeText="Close Now" />,
+  mountNode);
 ````
diff --git a/components/alert/demo/description.md b/components/alert/demo/description.md
index b7362992a2..70c44c6312 100644
--- a/components/alert/demo/description.md
+++ b/components/alert/demo/description.md
@@ -38,6 +38,6 @@ ReactDOM.render(
       description="Error Description Error Description Error Description Error Description"
       type="error"
     />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/alert/demo/icon.md b/components/alert/demo/icon.md
index e1914bff51..61a9ccfeea 100644
--- a/components/alert/demo/icon.md
+++ b/components/alert/demo/icon.md
@@ -46,6 +46,6 @@ ReactDOM.render(
       type="error"
       showIcon
     />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/alert/demo/smooth-closed.md b/components/alert/demo/smooth-closed.md
index e28446f0e9..7199f9c3a7 100644
--- a/components/alert/demo/smooth-closed.md
+++ b/components/alert/demo/smooth-closed.md
@@ -20,9 +20,11 @@ class App extends React.Component {
   state = {
     visible: true,
   }
+
   handleClose = () => {
     this.setState({ visible: false });
   }
+
   render() {
     return (
       <div>
@@ -43,6 +45,6 @@ class App extends React.Component {
 }
 
 ReactDOM.render(
-  <App />
-, mountNode);
+  <App />,
+  mountNode);
 ````
diff --git a/components/alert/demo/style.md b/components/alert/demo/style.md
index 37f906abea..156b93f435 100644
--- a/components/alert/demo/style.md
+++ b/components/alert/demo/style.md
@@ -22,6 +22,6 @@ ReactDOM.render(
     <Alert message="Info Text" type="info" />
     <Alert message="Warning Text" type="warning" />
     <Alert message="Error Text" type="error" />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/anchor/demo/basic.md b/components/anchor/demo/basic.md
index d193e0c818..6d69155b10 100644
--- a/components/anchor/demo/basic.md
+++ b/components/anchor/demo/basic.md
@@ -15,6 +15,7 @@ The simplest usage.
 
 ```jsx
 import { Anchor } from 'antd';
+
 const { Link } = Anchor;
 
 ReactDOM.render(
@@ -25,8 +26,8 @@ ReactDOM.render(
       <Link href="#Anchor-Props" title="Anchor Props" />
       <Link href="#Link-Props" title="Link Props" />
     </Link>
-  </Anchor>
-, mountNode);
+  </Anchor>,
+  mountNode);
 ```
 
 <style>
diff --git a/components/anchor/demo/static.md b/components/anchor/demo/static.md
index fd635fdd1b..1191673de8 100644
--- a/components/anchor/demo/static.md
+++ b/components/anchor/demo/static.md
@@ -15,6 +15,7 @@ Do not change state when page is scrolling.
 
 ```jsx
 import { Anchor } from 'antd';
+
 const { Link } = Anchor;
 
 ReactDOM.render(
@@ -25,6 +26,6 @@ ReactDOM.render(
       <Link href="#Anchor-Props" title="Anchor Props" />
       <Link href="#Link-Props" title="Link Props" />
     </Link>
-  </Anchor>
-, mountNode);
+  </Anchor>,
+  mountNode);
 ```
diff --git a/components/auto-complete/demo/certain-category.md b/components/auto-complete/demo/certain-category.md
index 85d4638f64..2d2b08d9b2 100644
--- a/components/auto-complete/demo/certain-category.md
+++ b/components/auto-complete/demo/certain-category.md
@@ -16,6 +16,7 @@ Basic Usage, set datasource of autocomplete with `dataSource` property.
 
 ````jsx
 import { Icon, Input, AutoComplete } from 'antd';
+
 const Option = AutoComplete.Option;
 const OptGroup = AutoComplete.OptGroup;
 
diff --git a/components/auto-complete/demo/custom.md b/components/auto-complete/demo/custom.md
index 2cb0d917fb..fbfa2ee1cb 100644
--- a/components/auto-complete/demo/custom.md
+++ b/components/auto-complete/demo/custom.md
@@ -15,6 +15,7 @@ Customize Input Component
 
 ````jsx
 import { AutoComplete, Input } from 'antd';
+
 const { TextArea } = Input;
 
 function onSelect(value) {
diff --git a/components/auto-complete/demo/uncertain-category.md b/components/auto-complete/demo/uncertain-category.md
index c405280cc4..62ee6ce0b3 100644
--- a/components/auto-complete/demo/uncertain-category.md
+++ b/components/auto-complete/demo/uncertain-category.md
@@ -16,6 +16,7 @@ Basic Usage, set datasource of autocomplete with `dataSource` property.
 
 ````jsx
 import { Icon, Button, Input, AutoComplete } from 'antd';
+
 const Option = AutoComplete.Option;
 
 function onSelect(value) {
diff --git a/components/avatar/demo/badge.md b/components/avatar/demo/badge.md
index 11d7b1074d..db54b5ef4b 100644
--- a/components/avatar/demo/badge.md
+++ b/components/avatar/demo/badge.md
@@ -24,6 +24,6 @@ ReactDOM.render(
     <span>
       <Badge dot><Avatar shape="square" icon="user" /></Badge>
     </span>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/avatar/demo/basic.md b/components/avatar/demo/basic.md
index c061babca3..1c3894422e 100644
--- a/components/avatar/demo/basic.md
+++ b/components/avatar/demo/basic.md
@@ -28,8 +28,8 @@ ReactDOM.render(
       <Avatar shape="square" icon="user" />
       <Avatar shape="square" size="small" icon="user" />
     </div>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 <style>
diff --git a/components/avatar/demo/dynamic.md b/components/avatar/demo/dynamic.md
index c0aa09f972..5a97b614d0 100644
--- a/components/avatar/demo/dynamic.md
+++ b/components/avatar/demo/dynamic.md
@@ -27,6 +27,7 @@ class Autoset extends React.Component {
       color: colorList[0],
     };
   }
+
   changeUser = () => {
     const index = UserList.indexOf(this.state.user);
     this.setState({
@@ -34,6 +35,7 @@ class Autoset extends React.Component {
       color: index < colorList.length - 1 ? colorList[index + 1] : colorList[0],
     });
   }
+
   render() {
     return (
       <div>
@@ -48,6 +50,6 @@ class Autoset extends React.Component {
   }
 }
 
-ReactDOM.render(<Autoset />
-, mountNode);
+ReactDOM.render(<Autoset />,
+  mountNode);
 ````
diff --git a/components/avatar/demo/type.md b/components/avatar/demo/type.md
index bd08432c20..ec16dbc79f 100644
--- a/components/avatar/demo/type.md
+++ b/components/avatar/demo/type.md
@@ -24,8 +24,8 @@ ReactDOM.render(
     <Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />
     <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
     <Avatar style={{ backgroundColor: '#87d068' }} icon="user" />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 <style>
diff --git a/components/badge/demo/basic.md b/components/badge/demo/basic.md
index e26119fc66..2e8c3e95a8 100644
--- a/components/badge/demo/basic.md
+++ b/components/badge/demo/basic.md
@@ -24,8 +24,8 @@ ReactDOM.render(
     <Badge count={0} showZero>
       <a href="#" className="head-example" />
     </Badge>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 <style>
diff --git a/components/badge/demo/change.md b/components/badge/demo/change.md
index ada549ab7e..11e9df689e 100644
--- a/components/badge/demo/change.md
+++ b/components/badge/demo/change.md
@@ -15,6 +15,7 @@ The count will be animated as it changes.
 
 ````jsx
 import { Badge, Button, Icon, Switch } from 'antd';
+
 const ButtonGroup = Button.Group;
 
 class Demo extends React.Component {
diff --git a/components/badge/demo/dot.md b/components/badge/demo/dot.md
index fa096deee7..ce8520e91c 100644
--- a/components/badge/demo/dot.md
+++ b/components/badge/demo/dot.md
@@ -28,8 +28,8 @@ ReactDOM.render(
     <Badge dot>
       <a href="#">Link something</a>
     </Badge>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 <style>
diff --git a/components/badge/demo/link.md b/components/badge/demo/link.md
index 426b89061a..7ad0e6d06b 100644
--- a/components/badge/demo/link.md
+++ b/components/badge/demo/link.md
@@ -21,6 +21,6 @@ ReactDOM.render(
     <Badge count={5}>
       <span className="head-example" />
     </Badge>
-  </a>
-, mountNode);
+  </a>,
+  mountNode);
 ````
diff --git a/components/badge/demo/no-wrapper.md b/components/badge/demo/no-wrapper.md
index fd0aecca59..8542798325 100644
--- a/components/badge/demo/no-wrapper.md
+++ b/components/badge/demo/no-wrapper.md
@@ -23,6 +23,6 @@ ReactDOM.render(
     <Badge count={25} />
     <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', boxShadow: '0 0 0 1px #d9d9d9 inset' }} />
     <Badge count={109} style={{ backgroundColor: '#52c41a' }} />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/badge/demo/overflow.md b/components/badge/demo/overflow.md
index 84f7d37531..0fe56eeec0 100644
--- a/components/badge/demo/overflow.md
+++ b/components/badge/demo/overflow.md
@@ -30,6 +30,6 @@ ReactDOM.render(
     <Badge count={1000} overflowCount={999}>
       <a href="#" className="head-example" />
     </Badge>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/badge/demo/status.md b/components/badge/demo/status.md
index 29ccd868a2..2a5b333d99 100644
--- a/components/badge/demo/status.md
+++ b/components/badge/demo/status.md
@@ -33,6 +33,6 @@ ReactDOM.render(
     <Badge status="processing" text="Processing" />
     <br />
     <Badge status="warning" text="Warning" />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/badge/demo/title.md b/components/badge/demo/title.md
index 36714ca047..8e08d66882 100644
--- a/components/badge/demo/title.md
+++ b/components/badge/demo/title.md
@@ -21,8 +21,8 @@ ReactDOM.render(
     <Badge count={5} title="Custom hover text">
       <a href="#" className="head-example" />
     </Badge>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 <style>
diff --git a/components/breadcrumb/demo/basic.md b/components/breadcrumb/demo/basic.md
index e3995d0acc..6776f935d8 100644
--- a/components/breadcrumb/demo/basic.md
+++ b/components/breadcrumb/demo/basic.md
@@ -22,6 +22,6 @@ ReactDOM.render(
     <Breadcrumb.Item><a href="">Application Center</a></Breadcrumb.Item>
     <Breadcrumb.Item><a href="">Application List</a></Breadcrumb.Item>
     <Breadcrumb.Item>An Application</Breadcrumb.Item>
-  </Breadcrumb>
-, mountNode);
+  </Breadcrumb>,
+  mountNode);
 ````
diff --git a/components/breadcrumb/demo/router-4.md b/components/breadcrumb/demo/router-4.md
index b0bc886d62..9d094997bf 100644
--- a/components/breadcrumb/demo/router-4.md
+++ b/components/breadcrumb/demo/router-4.md
@@ -76,8 +76,8 @@ const Home = withRouter((props) => {
 ReactDOM.render(
   <Router>
     <Home />
-  </Router>
-, mountNode);
+  </Router>,
+  mountNode);
 ````
 
 ````css
diff --git a/components/breadcrumb/demo/router.md b/components/breadcrumb/demo/router.md
index 60f19d9306..ccc8afa667 100644
--- a/components/breadcrumb/demo/router.md
+++ b/components/breadcrumb/demo/router.md
@@ -51,8 +51,8 @@ ReactDOM.render(
         </Route>
       </Route>
     </Route>
-  </Router>
-, mountNode);
+  </Router>,
+  mountNode);
 ````
 
 ````css
diff --git a/components/breadcrumb/demo/separator.md b/components/breadcrumb/demo/separator.md
index a02836b116..1bbe39a6a3 100644
--- a/components/breadcrumb/demo/separator.md
+++ b/components/breadcrumb/demo/separator.md
@@ -22,6 +22,6 @@ ReactDOM.render(
     <Breadcrumb.Item href="">Application Center</Breadcrumb.Item>
     <Breadcrumb.Item href="">Application List</Breadcrumb.Item>
     <Breadcrumb.Item>An Application</Breadcrumb.Item>
-  </Breadcrumb>
-, mountNode);
+  </Breadcrumb>,
+  mountNode);
 ````
diff --git a/components/breadcrumb/demo/withIcon.md b/components/breadcrumb/demo/withIcon.md
index 559f2195c0..2fe5e2d2b7 100644
--- a/components/breadcrumb/demo/withIcon.md
+++ b/components/breadcrumb/demo/withIcon.md
@@ -28,6 +28,6 @@ ReactDOM.render(
     <Breadcrumb.Item>
       Application
     </Breadcrumb.Item>
-  </Breadcrumb>
-, mountNode);
+  </Breadcrumb>,
+  mountNode);
 ````
diff --git a/components/button/demo/basic.md b/components/button/demo/basic.md
index f6a74509cb..8806be2571 100644
--- a/components/button/demo/basic.md
+++ b/components/button/demo/basic.md
@@ -26,6 +26,6 @@ ReactDOM.render(
     <Button>Default</Button>
     <Button type="dashed">Dashed</Button>
     <Button type="danger">Danger</Button>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/button/demo/button-group.md b/components/button/demo/button-group.md
index bcdcb1b048..a7c7fd8910 100644
--- a/components/button/demo/button-group.md
+++ b/components/button/demo/button-group.md
@@ -19,6 +19,7 @@ The `size` can be set to `large`, `small` or left unset resulting in a default s
 
 ````jsx
 import { Button, Icon } from 'antd';
+
 const ButtonGroup = Button.Group;
 
 ReactDOM.render(
diff --git a/components/button/demo/ghost.md b/components/button/demo/ghost.md
index 5c19ec56e2..9cff4953e9 100644
--- a/components/button/demo/ghost.md
+++ b/components/button/demo/ghost.md
@@ -22,6 +22,6 @@ ReactDOM.render(
     <Button ghost>Default</Button>
     <Button type="dashed" ghost>Dashed</Button>
     <Button type="danger" ghost>danger</Button>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/calendar/demo/basic.md b/components/calendar/demo/basic.md
index 956bc2621c..7fe8bfe543 100644
--- a/components/calendar/demo/basic.md
+++ b/components/calendar/demo/basic.md
@@ -21,6 +21,6 @@ function onPanelChange(value, mode) {
 }
 
 ReactDOM.render(
-  <Calendar onPanelChange={onPanelChange} />
-, mountNode);
+  <Calendar onPanelChange={onPanelChange} />,
+  mountNode);
 ````
diff --git a/components/calendar/demo/card.md b/components/calendar/demo/card.md
index c355f20322..fcbdd59726 100644
--- a/components/calendar/demo/card.md
+++ b/components/calendar/demo/card.md
@@ -23,6 +23,6 @@ function onPanelChange(value, mode) {
 ReactDOM.render(
   <div style={{ width: 300, border: '1px solid #d9d9d9', borderRadius: 4 }}>
     <Calendar fullscreen={false} onPanelChange={onPanelChange} />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/calendar/demo/notice-calendar.md b/components/calendar/demo/notice-calendar.md
index 508b513f68..d9c5730460 100644
--- a/components/calendar/demo/notice-calendar.md
+++ b/components/calendar/demo/notice-calendar.md
@@ -76,8 +76,8 @@ function monthCellRender(value) {
 }
 
 ReactDOM.render(
-  <Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />
-, mountNode);
+  <Calendar dateCellRender={dateCellRender} monthCellRender={monthCellRender} />,
+  mountNode);
 ````
 
 ````css
diff --git a/components/calendar/demo/select.md b/components/calendar/demo/select.md
index e4c18a1838..7e1b050e3d 100644
--- a/components/calendar/demo/select.md
+++ b/components/calendar/demo/select.md
@@ -22,15 +22,18 @@ class App extends React.Component {
     value: moment('2017-01-25'),
     selectedValue: moment('2017-01-25'),
   }
+
   onSelect = (value) => {
     this.setState({
       value,
       selectedValue: value,
     });
   }
+
   onPanelChange = (value) => {
     this.setState({ value });
   }
+
   render() {
     const { value, selectedValue } = this.state;
     return (
diff --git a/components/card/demo/basic.md b/components/card/demo/basic.md
index 4a6fd37295..f1978e6524 100644
--- a/components/card/demo/basic.md
+++ b/components/card/demo/basic.md
@@ -21,8 +21,8 @@ ReactDOM.render(
     <p>Card content</p>
     <p>Card content</p>
     <p>Card content</p>
-  </Card>
-, mountNode);
+  </Card>,
+  mountNode);
 ````
 
 <style>
diff --git a/components/card/demo/border-less.md b/components/card/demo/border-less.md
index c83805c1dc..81456e59a8 100644
--- a/components/card/demo/border-less.md
+++ b/components/card/demo/border-less.md
@@ -23,6 +23,6 @@ ReactDOM.render(
       <p>Card content</p>
       <p>Card content</p>
     </Card>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/card/demo/flexible-content.md b/components/card/demo/flexible-content.md
index 3293d685e4..2bdc27f6e4 100644
--- a/components/card/demo/flexible-content.md
+++ b/components/card/demo/flexible-content.md
@@ -16,6 +16,7 @@ You can use `Card.Meta` to support more flexible content.
 
 ````jsx
 import { Card } from 'antd';
+
 const { Meta } = Card;
 
 ReactDOM.render(
@@ -28,6 +29,6 @@ ReactDOM.render(
       title="Europe Street beat"
       description="www.instagram.com"
     />
-  </Card>
-, mountNode);
+  </Card>,
+  mountNode);
 ````
diff --git a/components/card/demo/grid-card.md b/components/card/demo/grid-card.md
index b79d89cc59..4bec22fb2c 100644
--- a/components/card/demo/grid-card.md
+++ b/components/card/demo/grid-card.md
@@ -30,6 +30,6 @@ ReactDOM.render(
     <Card.Grid style={gridStyle}>Content</Card.Grid>
     <Card.Grid style={gridStyle}>Content</Card.Grid>
     <Card.Grid style={gridStyle}>Content</Card.Grid>
-  </Card>
-, mountNode);
+  </Card>,
+  mountNode);
 ````
diff --git a/components/card/demo/in-column.md b/components/card/demo/in-column.md
index 8283aa72d2..c722e2d350 100644
--- a/components/card/demo/in-column.md
+++ b/components/card/demo/in-column.md
@@ -29,6 +29,6 @@ ReactDOM.render(
         <Card title="Card title" bordered={false}>Card content</Card>
       </Col>
     </Row>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/card/demo/inner.md b/components/card/demo/inner.md
index d4be084af0..e28a5e258a 100644
--- a/components/card/demo/inner.md
+++ b/components/card/demo/inner.md
@@ -43,6 +43,6 @@ ReactDOM.render(
     >
       Inner Card content
     </Card>
-  </Card>
-, mountNode);
+  </Card>,
+  mountNode);
 ````
diff --git a/components/card/demo/loading.md b/components/card/demo/loading.md
index 96d96e133f..408d44d240 100644
--- a/components/card/demo/loading.md
+++ b/components/card/demo/loading.md
@@ -38,6 +38,6 @@ class LoadingCard extends React.Component {
 }
 
 ReactDOM.render(
-  <LoadingCard />
-, mountNode);
+  <LoadingCard />,
+  mountNode);
 ````
diff --git a/components/card/demo/meta.md b/components/card/demo/meta.md
index e02ada74b5..82712b9e51 100644
--- a/components/card/demo/meta.md
+++ b/components/card/demo/meta.md
@@ -15,6 +15,7 @@ A Card that supports `cover`, `avatar`, `title` and `description`.
 
 ````jsx
 import { Card, Icon, Avatar } from 'antd';
+
 const { Meta } = Card;
 
 ReactDOM.render(
@@ -28,6 +29,6 @@ ReactDOM.render(
       title="Card title"
       description="This is the description"
     />
-  </Card>
-, mountNode);
+  </Card>,
+  mountNode);
 ````
diff --git a/components/card/demo/simple.md b/components/card/demo/simple.md
index 054179848b..adea5418e5 100644
--- a/components/card/demo/simple.md
+++ b/components/card/demo/simple.md
@@ -21,6 +21,6 @@ ReactDOM.render(
     <p>Card content</p>
     <p>Card content</p>
     <p>Card content</p>
-  </Card>
-, mountNode);
+  </Card>,
+  mountNode);
 ````
diff --git a/components/card/demo/tabs.md b/components/card/demo/tabs.md
index b5f2b30fc1..5e52b5d51e 100644
--- a/components/card/demo/tabs.md
+++ b/components/card/demo/tabs.md
@@ -51,10 +51,12 @@ class TabsCard extends React.Component {
     key: 'tab1',
     noTitleKey: 'app',
   }
+
   onTabChange = (key, type) => {
     console.log(key, type);
     this.setState({ [type]: key });
   }
+
   render() {
     return (
       <div>
@@ -82,6 +84,6 @@ class TabsCard extends React.Component {
 }
 
 ReactDOM.render(
-  <TabsCard />
-, mountNode);
+  <TabsCard />,
+  mountNode);
 ````
diff --git a/components/carousel/demo/autoplay.md b/components/carousel/demo/autoplay.md
index 398fdf970a..14fbaa982f 100644
--- a/components/carousel/demo/autoplay.md
+++ b/components/carousel/demo/autoplay.md
@@ -22,8 +22,8 @@ ReactDOM.render(
     <div><h3>2</h3></div>
     <div><h3>3</h3></div>
     <div><h3>4</h3></div>
-  </Carousel>
-, mountNode);
+  </Carousel>,
+  mountNode);
 ````
 
 ````css
diff --git a/components/carousel/demo/basic.md b/components/carousel/demo/basic.md
index 3e1f57d5b9..24f02e80a4 100644
--- a/components/carousel/demo/basic.md
+++ b/components/carousel/demo/basic.md
@@ -26,8 +26,8 @@ ReactDOM.render(
     <div><h3>2</h3></div>
     <div><h3>3</h3></div>
     <div><h3>4</h3></div>
-  </Carousel>
-, mountNode);
+  </Carousel>,
+  mountNode);
 ````
 
 ````css
diff --git a/components/carousel/demo/fade.md b/components/carousel/demo/fade.md
index 5b47154f4a..7216e802a9 100644
--- a/components/carousel/demo/fade.md
+++ b/components/carousel/demo/fade.md
@@ -22,8 +22,8 @@ ReactDOM.render(
     <div><h3>2</h3></div>
     <div><h3>3</h3></div>
     <div><h3>4</h3></div>
-  </Carousel>
-, mountNode);
+  </Carousel>,
+  mountNode);
 ````
 
 ````css
diff --git a/components/carousel/demo/vertical.md b/components/carousel/demo/vertical.md
index 548d8c77b7..7bc5130673 100644
--- a/components/carousel/demo/vertical.md
+++ b/components/carousel/demo/vertical.md
@@ -22,8 +22,8 @@ ReactDOM.render(
     <div><h3>2</h3></div>
     <div><h3>3</h3></div>
     <div><h3>4</h3></div>
-  </Carousel>
-, mountNode);
+  </Carousel>,
+  mountNode);
 ````
 
 ````css
diff --git a/components/cascader/demo/basic.md b/components/cascader/demo/basic.md
index d99ed25930..6d0aa76b47 100644
--- a/components/cascader/demo/basic.md
+++ b/components/cascader/demo/basic.md
@@ -45,6 +45,6 @@ function onChange(value) {
 }
 
 ReactDOM.render(
-  <Cascader options={options} onChange={onChange} placeholder="Please select" />
-, mountNode);
+  <Cascader options={options} onChange={onChange} placeholder="Please select" />,
+  mountNode);
 ````
diff --git a/components/cascader/demo/change-on-select.md b/components/cascader/demo/change-on-select.md
index 1a25b4f583..82d12f2420 100644
--- a/components/cascader/demo/change-on-select.md
+++ b/components/cascader/demo/change-on-select.md
@@ -45,6 +45,6 @@ function onChange(value) {
 }
 
 ReactDOM.render(
-  <Cascader options={options} onChange={onChange} changeOnSelect />
-, mountNode);
+  <Cascader options={options} onChange={onChange} changeOnSelect />,
+  mountNode);
 ````
diff --git a/components/cascader/demo/custom-render.md b/components/cascader/demo/custom-render.md
index a60b808821..393f683313 100644
--- a/components/cascader/demo/custom-render.md
+++ b/components/cascader/demo/custom-render.md
@@ -65,6 +65,6 @@ ReactDOM.render(
     defaultValue={['zhejiang', 'hangzhou', 'xihu']}
     displayRender={displayRender}
     style={{ width: '100%' }}
-  />
-, mountNode);
+  />,
+  mountNode);
 ````
diff --git a/components/cascader/demo/custom-trigger.md b/components/cascader/demo/custom-trigger.md
index 1c0e40befc..fc96f55cc7 100644
--- a/components/cascader/demo/custom-trigger.md
+++ b/components/cascader/demo/custom-trigger.md
@@ -42,6 +42,7 @@ class CitySwitcher extends React.Component {
       text: selectedOptions.map(o => o.label).join(', '),
     });
   }
+
   render() {
     return (
       <span>
diff --git a/components/cascader/demo/default-value.md b/components/cascader/demo/default-value.md
index f77df5d1f2..760311afb4 100644
--- a/components/cascader/demo/default-value.md
+++ b/components/cascader/demo/default-value.md
@@ -45,6 +45,6 @@ function onChange(value) {
 }
 
 ReactDOM.render(
-  <Cascader defaultValue={['zhejiang', 'hangzhou', 'xihu']} options={options} onChange={onChange} />
-, mountNode);
+  <Cascader defaultValue={['zhejiang', 'hangzhou', 'xihu']} options={options} onChange={onChange} />,
+  mountNode);
 ````
diff --git a/components/cascader/demo/disabled-option.md b/components/cascader/demo/disabled-option.md
index 7fd0664b06..144478ecd9 100644
--- a/components/cascader/demo/disabled-option.md
+++ b/components/cascader/demo/disabled-option.md
@@ -46,6 +46,6 @@ function onChange(value) {
 }
 
 ReactDOM.render(
-  <Cascader options={options} onChange={onChange} />
-, mountNode);
+  <Cascader options={options} onChange={onChange} />,
+  mountNode);
 ````
diff --git a/components/cascader/demo/fileds-name.md b/components/cascader/demo/fileds-name.md
index cacc813d92..1066daf22f 100644
--- a/components/cascader/demo/fileds-name.md
+++ b/components/cascader/demo/fileds-name.md
@@ -45,6 +45,6 @@ function onChange(value) {
 }
 
 ReactDOM.render(
-  <Cascader filedNames={{ label: 'name', value: 'code', children: 'items' }} options={options} onChange={onChange} placeholder="Please select" />
-, mountNode);
+  <Cascader filedNames={{ label: 'name', value: 'code', children: 'items' }} options={options} onChange={onChange} placeholder="Please select" />,
+  mountNode);
 ````
diff --git a/components/cascader/demo/hover.md b/components/cascader/demo/hover.md
index 5f7be37666..489798c86a 100644
--- a/components/cascader/demo/hover.md
+++ b/components/cascader/demo/hover.md
@@ -55,6 +55,6 @@ ReactDOM.render(
     expandTrigger="hover"
     displayRender={displayRender}
     onChange={onChange}
-  />
-, mountNode);
+  />,
+  mountNode);
 ````
diff --git a/components/cascader/demo/lazy.md b/components/cascader/demo/lazy.md
index bf97cf747f..6737f625aa 100644
--- a/components/cascader/demo/lazy.md
+++ b/components/cascader/demo/lazy.md
@@ -34,9 +34,11 @@ class LazyOptions extends React.Component {
   state = {
     options,
   };
+
   onChange = (value, selectedOptions) => {
     console.log(value, selectedOptions);
   }
+
   loadData = (selectedOptions) => {
     const targetOption = selectedOptions[selectedOptions.length - 1];
     targetOption.loading = true;
@@ -56,6 +58,7 @@ class LazyOptions extends React.Component {
       });
     }, 1000);
   }
+
   render() {
     return (
       <Cascader
diff --git a/components/cascader/demo/size.md b/components/cascader/demo/size.md
index daf3b640a8..195876792c 100644
--- a/components/cascader/demo/size.md
+++ b/components/cascader/demo/size.md
@@ -49,6 +49,6 @@ ReactDOM.render(
     <Cascader size="large" options={options} onChange={onChange} /><br /><br />
     <Cascader options={options} onChange={onChange} /><br /><br />
     <Cascader size="small" options={options} onChange={onChange} /><br /><br />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/checkbox/demo/basic.md b/components/checkbox/demo/basic.md
index 6db6141b01..5ab6e77e0b 100644
--- a/components/checkbox/demo/basic.md
+++ b/components/checkbox/demo/basic.md
@@ -21,6 +21,6 @@ function onChange(e) {
 }
 
 ReactDOM.render(
-  <Checkbox onChange={onChange}>Checkbox</Checkbox>
-, mountNode);
+  <Checkbox onChange={onChange}>Checkbox</Checkbox>,
+  mountNode);
 ````
diff --git a/components/checkbox/demo/check-all.md b/components/checkbox/demo/check-all.md
index 479632d28e..2ad2193cb5 100644
--- a/components/checkbox/demo/check-all.md
+++ b/components/checkbox/demo/check-all.md
@@ -15,6 +15,7 @@ The `indeterminate` property can help you to achieve a 'check all' effect.
 
 ````jsx
 import { Checkbox } from 'antd';
+
 const CheckboxGroup = Checkbox.Group;
 
 const plainOptions = ['Apple', 'Pear', 'Orange'];
@@ -26,6 +27,7 @@ class App extends React.Component {
     indeterminate: true,
     checkAll: false,
   };
+
   render() {
     return (
       <div>
@@ -43,6 +45,7 @@ class App extends React.Component {
       </div>
     );
   }
+
   onChange = (checkedList) => {
     this.setState({
       checkedList,
@@ -50,6 +53,7 @@ class App extends React.Component {
       checkAll: checkedList.length === plainOptions.length,
     });
   }
+
   onCheckAllChange = (e) => {
     this.setState({
       checkedList: e.target.checked ? plainOptions : [],
diff --git a/components/checkbox/demo/controller.md b/components/checkbox/demo/controller.md
index adca51d73d..3b7a4fc226 100644
--- a/components/checkbox/demo/controller.md
+++ b/components/checkbox/demo/controller.md
@@ -21,6 +21,7 @@ class App extends React.Component {
     checked: true,
     disabled: false,
   };
+
   render() {
     const label = `${this.state.checked ? 'Checked' : 'Unchecked'}-${this.state.disabled ? 'Disabled' : 'Enabled'}`;
     return (
@@ -54,12 +55,15 @@ class App extends React.Component {
       </div>
     );
   }
+
   toggleChecked = () => {
     this.setState({ checked: !this.state.checked });
   }
+
   toggleDisable = () => {
     this.setState({ disabled: !this.state.disabled });
   }
+
   onChange = (e) => {
     console.log('checked = ', e.target.checked);
     this.setState({
diff --git a/components/checkbox/demo/disabled.md b/components/checkbox/demo/disabled.md
index 1f5a6b56e3..9433bd4445 100644
--- a/components/checkbox/demo/disabled.md
+++ b/components/checkbox/demo/disabled.md
@@ -21,6 +21,6 @@ ReactDOM.render(
     <Checkbox defaultChecked={false} disabled />
     <br />
     <Checkbox defaultChecked disabled />
-  </div>
-  , mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/checkbox/demo/group.md b/components/checkbox/demo/group.md
index b5fd62c3b7..1ba4816b6f 100644
--- a/components/checkbox/demo/group.md
+++ b/components/checkbox/demo/group.md
@@ -15,6 +15,7 @@ Generate a group of checkboxes from an array.
 
 ````jsx
 import { Checkbox } from 'antd';
+
 const CheckboxGroup = Checkbox.Group;
 
 function onChange(checkedValues) {
@@ -40,6 +41,6 @@ ReactDOM.render(
     <CheckboxGroup options={options} defaultValue={['Pear']} onChange={onChange} />
     <br /><br />
     <CheckboxGroup options={optionsWithDisabled} disabled defaultValue={['Apple']} onChange={onChange} />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/collapse/demo/accordion.md b/components/collapse/demo/accordion.md
index b2ec93873b..064474d665 100644
--- a/components/collapse/demo/accordion.md
+++ b/components/collapse/demo/accordion.md
@@ -15,6 +15,7 @@ Accordion mode, only one panel can be expanded at a time. The first panel will b
 
 ````jsx
 import { Collapse } from 'antd';
+
 const Panel = Collapse.Panel;
 
 const text = `
@@ -34,6 +35,6 @@ ReactDOM.render(
     <Panel header="This is panel header 3" key="3">
       <p>{text}</p>
     </Panel>
-  </Collapse>
-, mountNode);
+  </Collapse>,
+  mountNode);
 ````
diff --git a/components/collapse/demo/basic.md b/components/collapse/demo/basic.md
index f38171e7d8..9457f2acc1 100644
--- a/components/collapse/demo/basic.md
+++ b/components/collapse/demo/basic.md
@@ -15,6 +15,7 @@ More than one panel can be expanded at a time, the first panel is initialized to
 
 ````jsx
 import { Collapse } from 'antd';
+
 const Panel = Collapse.Panel;
 
 function callback(key) {
@@ -38,8 +39,8 @@ ReactDOM.render(
     <Panel header="This is panel header 3" key="3" disabled>
       <p>{text}</p>
     </Panel>
-  </Collapse>
-, mountNode);
+  </Collapse>,
+  mountNode);
 ````
 
 <style>
diff --git a/components/collapse/demo/borderless.md b/components/collapse/demo/borderless.md
index 55b56b7fc4..8560136c18 100644
--- a/components/collapse/demo/borderless.md
+++ b/components/collapse/demo/borderless.md
@@ -15,6 +15,7 @@ A borderless style of Collapse.
 
 ````jsx
 import { Collapse } from 'antd';
+
 const Panel = Collapse.Panel;
 
 const text = (
@@ -36,6 +37,6 @@ ReactDOM.render(
     <Panel header="This is panel header 3" key="3">
       {text}
     </Panel>
-  </Collapse>
-, mountNode);
+  </Collapse>,
+  mountNode);
 ````
diff --git a/components/collapse/demo/custom.md b/components/collapse/demo/custom.md
index 1bc37d6f2b..9c5f73eb86 100644
--- a/components/collapse/demo/custom.md
+++ b/components/collapse/demo/custom.md
@@ -15,6 +15,7 @@ Customize the background, border and margin styles for each panel.
 
 ````jsx
 import { Collapse } from 'antd';
+
 const Panel = Collapse.Panel;
 
 const text = `
@@ -42,6 +43,6 @@ ReactDOM.render(
     <Panel header="This is panel header 3" key="3" style={customPanelStyle}>
       <p>{text}</p>
     </Panel>
-  </Collapse>
-, mountNode);
+  </Collapse>,
+  mountNode);
 ````
diff --git a/components/collapse/demo/mix.md b/components/collapse/demo/mix.md
index ebbd73454d..1936909c4d 100644
--- a/components/collapse/demo/mix.md
+++ b/components/collapse/demo/mix.md
@@ -15,6 +15,7 @@ title:
 
 ````jsx
 import { Collapse } from 'antd';
+
 const Panel = Collapse.Panel;
 
 function callback(key) {
@@ -42,6 +43,6 @@ ReactDOM.render(
     <Panel header="This is panel header 3" key="3">
       <p>{text}</p>
     </Panel>
-  </Collapse>
-, mountNode);
+  </Collapse>,
+  mountNode);
 ````
diff --git a/components/collapse/demo/noarrow.md b/components/collapse/demo/noarrow.md
index 8d572d60c1..7d2e2e13c7 100644
--- a/components/collapse/demo/noarrow.md
+++ b/components/collapse/demo/noarrow.md
@@ -15,6 +15,7 @@ You can disable showing arrow icon by passing `showArrow={false}` to `CollapsePa
 
 ````jsx
 import { Collapse } from 'antd';
+
 const Panel = Collapse.Panel;
 
 function callback(key) {
@@ -35,6 +36,6 @@ ReactDOM.render(
     <Panel showArrow={false} header="This is panel header with no arrow icon" key="2">
       <p>{text}</p>
     </Panel>
-  </Collapse>
-, mountNode);
+  </Collapse>,
+  mountNode);
 ````
diff --git a/components/date-picker/demo/basic.md b/components/date-picker/demo/basic.md
index 6053cbb8ae..20df8a60a7 100644
--- a/components/date-picker/demo/basic.md
+++ b/components/date-picker/demo/basic.md
@@ -15,6 +15,7 @@ Basic use case. Users can select or input a date in panel.
 
 ````jsx
 import { DatePicker } from 'antd';
+
 const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
 
 function onChange(date, dateString) {
@@ -30,6 +31,6 @@ ReactDOM.render(
     <RangePicker onChange={onChange} />
     <br />
     <WeekPicker onChange={onChange} placeholder="Select week" />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/date-picker/demo/date-render.md b/components/date-picker/demo/date-render.md
index 278f76f418..9c0fd50fef 100644
--- a/components/date-picker/demo/date-render.md
+++ b/components/date-picker/demo/date-render.md
@@ -15,6 +15,7 @@ We can customize the rendering of date cells in the calendar by providing a `dat
 
 ````jsx
 import { DatePicker } from 'antd';
+
 const { RangePicker } = DatePicker;
 
 ReactDOM.render(
@@ -47,6 +48,6 @@ ReactDOM.render(
         );
       }}
     />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/date-picker/demo/disabled-date.md b/components/date-picker/demo/disabled-date.md
index d74e7d4373..717d51f96a 100644
--- a/components/date-picker/demo/disabled-date.md
+++ b/components/date-picker/demo/disabled-date.md
@@ -16,6 +16,7 @@ Disabled part of dates and time by `disabledDate` and `disabledTime` respectivel
 ````jsx
 import moment from 'moment';
 import { DatePicker } from 'antd';
+
 const { MonthPicker, RangePicker } = DatePicker;
 
 function range(start, end) {
diff --git a/components/date-picker/demo/disabled.md b/components/date-picker/demo/disabled.md
index 7fbe5347cf..5e453b8b68 100644
--- a/components/date-picker/demo/disabled.md
+++ b/components/date-picker/demo/disabled.md
@@ -16,6 +16,7 @@ A disabled state of the `DatePicker`.
 ````jsx
 import { DatePicker } from 'antd';
 import moment from 'moment';
+
 const { MonthPicker, RangePicker } = DatePicker;
 
 const dateFormat = 'YYYY-MM-DD';
@@ -29,6 +30,6 @@ ReactDOM.render(
       defaultValue={[moment('2015-06-06', dateFormat), moment('2015-06-06', dateFormat)]}
       disabled
     />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/date-picker/demo/extra-footer.md b/components/date-picker/demo/extra-footer.md
index a313edd6aa..9e5b552434 100644
--- a/components/date-picker/demo/extra-footer.md
+++ b/components/date-picker/demo/extra-footer.md
@@ -15,6 +15,7 @@ Render extra footer in panel for customized requirements.
 
 ````jsx
 import { DatePicker } from 'antd';
+
 const { RangePicker, MonthPicker } = DatePicker;
 
 ReactDOM.render(
@@ -24,6 +25,6 @@ ReactDOM.render(
     <RangePicker renderExtraFooter={() => 'extra footer'} />
     <RangePicker renderExtraFooter={() => 'extra footer'} showTime />
     <MonthPicker renderExtraFooter={() => 'extra footer'} placeholder="Select month" />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/date-picker/demo/format.md b/components/date-picker/demo/format.md
index 60cb0a5847..ebf2cdeede 100644
--- a/components/date-picker/demo/format.md
+++ b/components/date-picker/demo/format.md
@@ -16,6 +16,7 @@ We can set the date format by `format`.
 ````jsx
 import { DatePicker } from 'antd';
 import moment from 'moment';
+
 const { MonthPicker, RangePicker } = DatePicker;
 
 const dateFormat = 'YYYY/MM/DD';
@@ -30,6 +31,6 @@ ReactDOM.render(
       defaultValue={[moment('2015/01/01', dateFormat), moment('2015/01/01', dateFormat)]}
       format={dateFormat}
     />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/date-picker/demo/mode.md b/components/date-picker/demo/mode.md
index 4bd78df8c4..f676ff823d 100644
--- a/components/date-picker/demo/mode.md
+++ b/components/date-picker/demo/mode.md
@@ -15,6 +15,7 @@ Determing which panel to show with `mode` and `onPanelChange`.
 
 ````jsx
 import { DatePicker } from 'antd';
+
 const { RangePicker } = DatePicker;
 
 class ControlledDatePicker extends React.Component {
@@ -77,6 +78,6 @@ ReactDOM.render(
     <ControlledDatePicker />
     <br />
     <ControlledRangePicker />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/date-picker/demo/presetted-ranges.md b/components/date-picker/demo/presetted-ranges.md
index 245c794f9f..19820fdbd0 100644
--- a/components/date-picker/demo/presetted-ranges.md
+++ b/components/date-picker/demo/presetted-ranges.md
@@ -16,6 +16,7 @@ We can set presetted ranges to RangePicker to improve user experience.
 ````jsx
 import { DatePicker } from 'antd';
 import moment from 'moment';
+
 const RangePicker = DatePicker.RangePicker;
 
 function onChange(dates, dateStrings) {
diff --git a/components/date-picker/demo/size.md b/components/date-picker/demo/size.md
index df87b27e7e..2d7f675620 100644
--- a/components/date-picker/demo/size.md
+++ b/components/date-picker/demo/size.md
@@ -16,6 +16,7 @@ The input box comes in three sizes. `default` will be used if `size` is omitted.
 
 ````jsx
 import { DatePicker, Radio } from 'antd';
+
 const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
 
 class PickerSizesDemo extends React.Component {
diff --git a/components/date-picker/demo/time.md b/components/date-picker/demo/time.md
index 1e02d1db6e..e48f1ccff6 100644
--- a/components/date-picker/demo/time.md
+++ b/components/date-picker/demo/time.md
@@ -15,6 +15,7 @@ This property provide an additional time selection. When `showTime` is an Object
 
 ````jsx
 import { DatePicker } from 'antd';
+
 const { RangePicker } = DatePicker;
 
 function onChange(value, dateString) {
@@ -43,6 +44,6 @@ ReactDOM.render(
       onChange={onChange}
       onOk={onOk}
     />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/divider/demo/horizontal.md b/components/divider/demo/horizontal.md
index 035e94011f..f368756970 100644
--- a/components/divider/demo/horizontal.md
+++ b/components/divider/demo/horizontal.md
@@ -25,6 +25,6 @@ ReactDOM.render(
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
     <Divider dashed />
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/divider/demo/orientation.md b/components/divider/demo/orientation.md
index b69c624832..d2a847764b 100644
--- a/components/divider/demo/orientation.md
+++ b/components/divider/demo/orientation.md
@@ -22,6 +22,6 @@ ReactDOM.render(
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
     <Divider orientation="right">Right Text</Divider>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.</p>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/divider/demo/vertical.md b/components/divider/demo/vertical.md
index 2b808e43ee..0d54ec0403 100644
--- a/components/divider/demo/vertical.md
+++ b/components/divider/demo/vertical.md
@@ -23,6 +23,6 @@ ReactDOM.render(
     <a href="#">Link</a>
     <Divider type="vertical" />
     <a href="#">Link</a>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/dropdown/demo/basic.md b/components/dropdown/demo/basic.md
index 6776b676a6..ccf6991ee2 100644
--- a/components/dropdown/demo/basic.md
+++ b/components/dropdown/demo/basic.md
@@ -35,6 +35,6 @@ ReactDOM.render(
     <a className="ant-dropdown-link" href="#">
       Hover me <Icon type="down" />
     </a>
-  </Dropdown>
-, mountNode);
+  </Dropdown>,
+  mountNode);
 ````
diff --git a/components/dropdown/demo/context-menu.md b/components/dropdown/demo/context-menu.md
index c32ddc6fe1..bf4ef7cd63 100644
--- a/components/dropdown/demo/context-menu.md
+++ b/components/dropdown/demo/context-menu.md
@@ -27,6 +27,6 @@ const menu = (
 ReactDOM.render(
   <Dropdown overlay={menu} trigger={['contextMenu']}>
     <span style={{ userSelect: 'none' }}>Right Click on Me</span>
-  </Dropdown>
-, mountNode);
+  </Dropdown>,
+  mountNode);
 ````
diff --git a/components/dropdown/demo/dropdown-button.md b/components/dropdown/demo/dropdown-button.md
index ed825edc99..f309f6a93b 100644
--- a/components/dropdown/demo/dropdown-button.md
+++ b/components/dropdown/demo/dropdown-button.md
@@ -52,6 +52,6 @@ ReactDOM.render(
         Button <Icon type="down" />
       </Button>
     </Dropdown>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/dropdown/demo/event.md b/components/dropdown/demo/event.md
index f3bf876460..0c212c4162 100644
--- a/components/dropdown/demo/event.md
+++ b/components/dropdown/demo/event.md
@@ -15,6 +15,7 @@ An event will be triggered when you click menu items, in which you can make diff
 
 ````jsx
 import { Menu, Dropdown, Icon, message } from 'antd';
+
 const onClick = function ({ key }) {
   message.info(`Click on item ${key}`);
 };
@@ -32,6 +33,6 @@ ReactDOM.render(
     <a className="ant-dropdown-link" href="#">
       Hover me, Click menu item <Icon type="down" />
     </a>
-  </Dropdown>
-, mountNode);
+  </Dropdown>,
+  mountNode);
 ````
diff --git a/components/dropdown/demo/item.md b/components/dropdown/demo/item.md
index 7fdfaf5180..4823cd77b1 100644
--- a/components/dropdown/demo/item.md
+++ b/components/dropdown/demo/item.md
@@ -34,6 +34,6 @@ ReactDOM.render(
     <a className="ant-dropdown-link" href="#">
       Hover me <Icon type="down" />
     </a>
-  </Dropdown>
-, mountNode);
+  </Dropdown>,
+  mountNode);
 ````
diff --git a/components/dropdown/demo/overlay-visible.md b/components/dropdown/demo/overlay-visible.md
index 9094e0e8b8..aa2bf1fff9 100644
--- a/components/dropdown/demo/overlay-visible.md
+++ b/components/dropdown/demo/overlay-visible.md
@@ -20,14 +20,17 @@ class OverlayVisible extends React.Component {
   state = {
     visible: false,
   };
+
   handleMenuClick = (e) => {
     if (e.key === '3') {
       this.setState({ visible: false });
     }
   }
+
   handleVisibleChange = (flag) => {
     this.setState({ visible: flag });
   }
+
   render() {
     const menu = (
       <Menu onClick={this.handleMenuClick}>
diff --git a/components/dropdown/demo/placement.md b/components/dropdown/demo/placement.md
index 74932c9463..46805502f2 100644
--- a/components/dropdown/demo/placement.md
+++ b/components/dropdown/demo/placement.md
@@ -51,8 +51,8 @@ ReactDOM.render(
     <Dropdown overlay={menu} placement="topRight">
       <Button>topRight</Button>
     </Dropdown>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 ````css
diff --git a/components/dropdown/demo/sub-menu.md b/components/dropdown/demo/sub-menu.md
index cee60db844..8dba518472 100644
--- a/components/dropdown/demo/sub-menu.md
+++ b/components/dropdown/demo/sub-menu.md
@@ -15,6 +15,7 @@ The menu has multiple levels.
 
 ````jsx
 import { Menu, Dropdown, Icon } from 'antd';
+
 const SubMenu = Menu.SubMenu;
 
 const menu = (
@@ -37,6 +38,6 @@ ReactDOM.render(
     <a className="ant-dropdown-link" href="#">
       Cascading menu <Icon type="down" />
     </a>
-  </Dropdown>
-, mountNode);
+  </Dropdown>,
+  mountNode);
 ````
diff --git a/components/dropdown/demo/trigger.md b/components/dropdown/demo/trigger.md
index aadc6e378d..03cb7cc1fb 100644
--- a/components/dropdown/demo/trigger.md
+++ b/components/dropdown/demo/trigger.md
@@ -34,6 +34,6 @@ ReactDOM.render(
     <a className="ant-dropdown-link" href="#">
       Click me <Icon type="down" />
     </a>
-  </Dropdown>
-, mountNode);
+  </Dropdown>,
+  mountNode);
 ````
diff --git a/components/form/demo/advanced-search.md b/components/form/demo/advanced-search.md
index d8185bc55f..accabf7e2b 100644
--- a/components/form/demo/advanced-search.md
+++ b/components/form/demo/advanced-search.md
@@ -20,6 +20,7 @@ Because the width of label is not fixed, you may need to adjust it by customizin
 
 ````jsx
 import { Form, Row, Col, Input, Button, Icon } from 'antd';
+
 const FormItem = Form.Item;
 
 class AdvancedSearchForm extends React.Component {
diff --git a/components/form/demo/coordinated.md b/components/form/demo/coordinated.md
index a05fca6a7f..0e5bb4b0d7 100644
--- a/components/form/demo/coordinated.md
+++ b/components/form/demo/coordinated.md
@@ -15,6 +15,7 @@ Use `setFieldsValue` to set other control's value programmaticly.
 
 ````jsx
 import { Form, Select, Input, Button } from 'antd';
+
 const FormItem = Form.Item;
 const Option = Select.Option;
 
@@ -27,12 +28,14 @@ class App extends React.Component {
       }
     });
   }
+
   handleSelectChange = (value) => {
     console.log(value);
     this.props.form.setFieldsValue({
       note: `Hi, ${value === 'male' ? 'man' : 'lady'}!`,
     });
   }
+
   render() {
     const { getFieldDecorator } = this.props.form;
     return (
diff --git a/components/form/demo/customized-form-controls.md b/components/form/demo/customized-form-controls.md
index 1ac919b345..005c6c27b7 100644
--- a/components/form/demo/customized-form-controls.md
+++ b/components/form/demo/customized-form-controls.md
@@ -21,6 +21,7 @@ Customized or third-party form controls can be used in Form, too. Controls must
 
 ````jsx
 import { Form, Input, Select, Button } from 'antd';
+
 const FormItem = Form.Item;
 const Option = Select.Option;
 
@@ -34,6 +35,7 @@ class PriceInput extends React.Component {
       currency: value.currency || 'rmb',
     };
   }
+
   componentWillReceiveProps(nextProps) {
     // Should be a controlled component.
     if ('value' in nextProps) {
@@ -41,6 +43,7 @@ class PriceInput extends React.Component {
       this.setState(value);
     }
   }
+
   handleNumberChange = (e) => {
     const number = parseInt(e.target.value || 0, 10);
     if (isNaN(number)) {
@@ -51,12 +54,14 @@ class PriceInput extends React.Component {
     }
     this.triggerChange({ number });
   }
+
   handleCurrencyChange = (currency) => {
     if (!('value' in this.props)) {
       this.setState({ currency });
     }
     this.triggerChange({ currency });
   }
+
   triggerChange = (changedValue) => {
     // Should provide an event to pass value to Form.
     const onChange = this.props.onChange;
@@ -64,6 +69,7 @@ class PriceInput extends React.Component {
       onChange(Object.assign({}, this.state, changedValue));
     }
   }
+
   render() {
     const { size } = this.props;
     const state = this.state;
@@ -99,6 +105,7 @@ class Demo extends React.Component {
       }
     });
   }
+
   checkPrice = (rule, value, callback) => {
     if (value.number > 0) {
       callback();
@@ -106,6 +113,7 @@ class Demo extends React.Component {
     }
     callback('Price must greater than zero!');
   }
+
   render() {
     const { getFieldDecorator } = this.props.form;
     return (
diff --git a/components/form/demo/dynamic-form-item.md b/components/form/demo/dynamic-form-item.md
index e17748e92e..7d379aad83 100644
--- a/components/form/demo/dynamic-form-item.md
+++ b/components/form/demo/dynamic-form-item.md
@@ -15,6 +15,7 @@ Add or remove form items dynamically.
 
 ````jsx
 import { Form, Input, Icon, Button } from 'antd';
+
 const FormItem = Form.Item;
 
 let uuid = 0;
diff --git a/components/form/demo/dynamic-rule.md b/components/form/demo/dynamic-rule.md
index f59b844b84..45d339f7bd 100644
--- a/components/form/demo/dynamic-rule.md
+++ b/components/form/demo/dynamic-rule.md
@@ -15,6 +15,7 @@ Perform different check rules according to different situations.
 
 ````jsx
 import { Form, Input, Button, Checkbox } from 'antd';
+
 const FormItem = Form.Item;
 
 const formItemLayout = {
@@ -29,6 +30,7 @@ class DynamicRule extends React.Component {
   state = {
     checkNick: false,
   };
+
   check = () => {
     this.props.form.validateFields(
       (err) => {
@@ -38,6 +40,7 @@ class DynamicRule extends React.Component {
       },
     );
   }
+
   handleChange = (e) => {
     this.setState({
       checkNick: e.target.checked,
@@ -45,6 +48,7 @@ class DynamicRule extends React.Component {
       this.props.form.validateFields(['nickname'], { force: true });
     });
   }
+
   render() {
     const { getFieldDecorator } = this.props.form;
     return (
diff --git a/components/form/demo/form-in-modal.md b/components/form/demo/form-in-modal.md
index 3772a4b74e..1611a8c832 100644
--- a/components/form/demo/form-in-modal.md
+++ b/components/form/demo/form-in-modal.md
@@ -15,6 +15,7 @@ When user visit a page with a list of items, and want to create a new item. The
 
 ````jsx
 import { Button, Modal, Form, Input, Radio } from 'antd';
+
 const FormItem = Form.Item;
 
 const CollectionCreateForm = Form.create()(
@@ -62,12 +63,15 @@ class CollectionsPage extends React.Component {
   state = {
     visible: false,
   };
+
   showModal = () => {
     this.setState({ visible: true });
   }
+
   handleCancel = () => {
     this.setState({ visible: false });
   }
+
   handleCreate = () => {
     const form = this.formRef.props.form;
     form.validateFields((err, values) => {
@@ -80,9 +84,11 @@ class CollectionsPage extends React.Component {
       this.setState({ visible: false });
     });
   }
+
   saveFormRef = (formRef) => {
     this.formRef = formRef;
   }
+
   render() {
     return (
       <div>
diff --git a/components/form/demo/global-state.md b/components/form/demo/global-state.md
index b9b6a8bf01..8b63d59cf3 100644
--- a/components/form/demo/global-state.md
+++ b/components/form/demo/global-state.md
@@ -19,6 +19,7 @@ We can store form data into upper component or [Redux](https://github.com/reactj
 
 ````jsx
 import { Form, Input } from 'antd';
+
 const FormItem = Form.Item;
 
 const CustomizedForm = Form.create({
@@ -57,11 +58,13 @@ class Demo extends React.Component {
       },
     },
   };
+
   handleFormChange = (changedFields) => {
     this.setState(({ fields }) => ({
       fields: { ...fields, ...changedFields },
     }));
   }
+
   render() {
     const fields = this.state.fields;
     return (
diff --git a/components/form/demo/horizontal-login.md b/components/form/demo/horizontal-login.md
index caebbbc0bf..d2ebd88e21 100644
--- a/components/form/demo/horizontal-login.md
+++ b/components/form/demo/horizontal-login.md
@@ -15,6 +15,7 @@ Horizontal login form is often used in navigation bar.
 
 ````jsx
 import { Form, Icon, Input, Button } from 'antd';
+
 const FormItem = Form.Item;
 
 function hasErrors(fieldsError) {
@@ -26,6 +27,7 @@ class HorizontalLoginForm extends React.Component {
     // To disabled submit button at the beginning.
     this.props.form.validateFields();
   }
+
   handleSubmit = (e) => {
     e.preventDefault();
     this.props.form.validateFields((err, values) => {
@@ -34,6 +36,7 @@ class HorizontalLoginForm extends React.Component {
       }
     });
   }
+
   render() {
     const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched } = this.props.form;
 
diff --git a/components/form/demo/layout.md b/components/form/demo/layout.md
index 40800d80b1..1800789e57 100644
--- a/components/form/demo/layout.md
+++ b/components/form/demo/layout.md
@@ -15,6 +15,7 @@ There are three layout for form: `horizontal`, `vertical`, `inline`.
 
 ````jsx
 import { Form, Input, Button, Radio } from 'antd';
+
 const FormItem = Form.Item;
 
 class FormLayoutDemo extends React.Component {
@@ -24,9 +25,11 @@ class FormLayoutDemo extends React.Component {
       formLayout: 'horizontal',
     };
   }
+
   handleFormLayoutChange = (e) => {
     this.setState({ formLayout: e.target.value });
   }
+
   render() {
     const { formLayout } = this.state;
     const formItemLayout = formLayout === 'horizontal' ? {
diff --git a/components/form/demo/normal-login.md b/components/form/demo/normal-login.md
index 35ed663098..645d3a09c5 100644
--- a/components/form/demo/normal-login.md
+++ b/components/form/demo/normal-login.md
@@ -15,6 +15,7 @@ Normal login form which can contain more elements.
 
 ````jsx
 import { Form, Icon, Input, Button, Checkbox } from 'antd';
+
 const FormItem = Form.Item;
 
 class NormalLoginForm extends React.Component {
@@ -26,6 +27,7 @@ class NormalLoginForm extends React.Component {
       }
     });
   }
+
   render() {
     const { getFieldDecorator } = this.props.form;
     return (
diff --git a/components/form/demo/register.md b/components/form/demo/register.md
index 16f7633d91..16712980c1 100644
--- a/components/form/demo/register.md
+++ b/components/form/demo/register.md
@@ -15,6 +15,7 @@ Fill in this form to create a new account for you.
 
 ````jsx
 import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, AutoComplete } from 'antd';
+
 const FormItem = Form.Item;
 const Option = Select.Option;
 const AutoCompleteOption = AutoComplete.Option;
@@ -48,6 +49,7 @@ class RegistrationForm extends React.Component {
     confirmDirty: false,
     autoCompleteResult: [],
   };
+
   handleSubmit = (e) => {
     e.preventDefault();
     this.props.form.validateFieldsAndScroll((err, values) => {
@@ -56,10 +58,12 @@ class RegistrationForm extends React.Component {
       }
     });
   }
+
   handleConfirmBlur = (e) => {
     const value = e.target.value;
     this.setState({ confirmDirty: this.state.confirmDirty || !!value });
   }
+
   compareToFirstPassword = (rule, value, callback) => {
     const form = this.props.form;
     if (value && value !== form.getFieldValue('password')) {
@@ -68,6 +72,7 @@ class RegistrationForm extends React.Component {
       callback();
     }
   }
+
   validateToNextPassword = (rule, value, callback) => {
     const form = this.props.form;
     if (value && this.state.confirmDirty) {
@@ -75,6 +80,7 @@ class RegistrationForm extends React.Component {
     }
     callback();
   }
+
   handleWebsiteChange = (value) => {
     let autoCompleteResult;
     if (!value) {
@@ -84,6 +90,7 @@ class RegistrationForm extends React.Component {
     }
     this.setState({ autoCompleteResult });
   }
+
   render() {
     const { getFieldDecorator } = this.props.form;
     const { autoCompleteResult } = this.state;
diff --git a/components/form/demo/time-related-controls.md b/components/form/demo/time-related-controls.md
index f258a76f4d..f897448147 100644
--- a/components/form/demo/time-related-controls.md
+++ b/components/form/demo/time-related-controls.md
@@ -15,6 +15,7 @@ After `antd@2.0`, the `value` of time-related components had been changed to `mo
 
 ````jsx
 import { Form, DatePicker, TimePicker, Button } from 'antd';
+
 const FormItem = Form.Item;
 const MonthPicker = DatePicker.MonthPicker;
 const RangePicker = DatePicker.RangePicker;
@@ -46,6 +47,7 @@ class TimeRelatedForm extends React.Component {
       console.log('Received values of form: ', values);
     });
   }
+
   render() {
     const { getFieldDecorator } = this.props.form;
     const formItemLayout = {
diff --git a/components/form/demo/validate-other.md b/components/form/demo/validate-other.md
index 1f0addc939..97a039eaea 100644
--- a/components/form/demo/validate-other.md
+++ b/components/form/demo/validate-other.md
@@ -18,6 +18,7 @@ import {
   Form, Select, InputNumber, Switch, Radio,
   Slider, Button, Upload, Icon, Rate,
 } from 'antd';
+
 const FormItem = Form.Item;
 const Option = Select.Option;
 const RadioButton = Radio.Button;
@@ -32,6 +33,7 @@ class Demo extends React.Component {
       }
     });
   }
+
   normFile = (e) => {
     console.log('Upload event:', e);
     if (Array.isArray(e)) {
@@ -39,6 +41,7 @@ class Demo extends React.Component {
     }
     return e && e.fileList;
   }
+
   render() {
     const { getFieldDecorator } = this.props.form;
     const formItemLayout = {
diff --git a/components/form/demo/validate-static.md b/components/form/demo/validate-static.md
index 90765f62d6..4b9b119b67 100644
--- a/components/form/demo/validate-static.md
+++ b/components/form/demo/validate-static.md
@@ -23,6 +23,7 @@ We provide properties like `validateStatus` `help` `hasFeedback` to customize yo
 
 ````jsx
 import { Form, Input, DatePicker, Col, TimePicker, Select, Cascader, InputNumber } from 'antd';
+
 const FormItem = Form.Item;
 const Option = Select.Option;
 
@@ -164,6 +165,6 @@ ReactDOM.render(
     >
       <InputNumber style={{ width: '100%' }} />
     </FormItem>
-  </Form>
-, mountNode);
+  </Form>,
+  mountNode);
 ````
diff --git a/components/form/demo/without-form-create.md b/components/form/demo/without-form-create.md
index 487dc32c69..b4fbc701c5 100644
--- a/components/form/demo/without-form-create.md
+++ b/components/form/demo/without-form-create.md
@@ -15,6 +15,7 @@ title:
 
 ````jsx
 import { Form, InputNumber } from 'antd';
+
 const FormItem = Form.Item;
 
 function validatePrimeNumber(number) {
@@ -36,6 +37,7 @@ class RawForm extends React.Component {
       value: 11,
     },
   };
+
   handleNumberChange = (value) => {
     this.setState({
       number: {
@@ -44,6 +46,7 @@ class RawForm extends React.Component {
       },
     });
   }
+
   render() {
     const formItemLayout = {
       labelCol: { span: 7 },
diff --git a/components/grid/demo/gutter.md b/components/grid/demo/gutter.md
index 0d7e4ac2e7..6601001437 100644
--- a/components/grid/demo/gutter.md
+++ b/components/grid/demo/gutter.md
@@ -36,8 +36,8 @@ ReactDOM.render(
         <div className="gutter-box">col-6</div>
       </Col>
     </Row>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 ````css
diff --git a/components/grid/demo/playground.md b/components/grid/demo/playground.md
index d6a3dd7786..6714d75165 100644
--- a/components/grid/demo/playground.md
+++ b/components/grid/demo/playground.md
@@ -18,7 +18,9 @@ import { Row, Col, Slider } from 'antd';
 
 class App extends React.Component {
   gutters = {};
+
   colCounts = {};
+
   constructor() {
     super();
     this.state = {
@@ -28,12 +30,15 @@ class App extends React.Component {
     [8, 16, 24, 32, 40, 48].forEach((value, i) => { this.gutters[i] = value; });
     [2, 3, 4, 6, 8, 12].forEach((value, i) => { this.colCounts[i] = value; });
   }
+
   onGutterChange = (gutterKey) => {
     this.setState({ gutterKey });
   }
+
   onColCountChange = (colCountKey) => {
     this.setState({ colCountKey });
   }
+
   render() {
     const { gutterKey, colCountKey } = this.state;
     const cols = [];
diff --git a/components/grid/demo/responsive-more.md b/components/grid/demo/responsive-more.md
index 5a976420e2..91c91a21ac 100644
--- a/components/grid/demo/responsive-more.md
+++ b/components/grid/demo/responsive-more.md
@@ -24,6 +24,6 @@ ReactDOM.render(
     <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>Col</Col>
     <Col xs={{ span: 11, offset: 1 }} lg={{ span: 6, offset: 2 }}>Col</Col>
     <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>Col</Col>
-  </Row>
-, mountNode);
+  </Row>,
+  mountNode);
 ````
diff --git a/components/grid/demo/responsive.md b/components/grid/demo/responsive.md
index cf84be7443..89a3d3fd23 100644
--- a/components/grid/demo/responsive.md
+++ b/components/grid/demo/responsive.md
@@ -21,6 +21,6 @@ ReactDOM.render(
     <Col xs={2} sm={4} md={6} lg={8} xl={10}>Col</Col>
     <Col xs={20} sm={16} md={12} lg={8} xl={4}>Col</Col>
     <Col xs={2} sm={4} md={6} lg={8} xl={10}>Col</Col>
-  </Row>
-, mountNode);
+  </Row>,
+  mountNode);
 ````
diff --git a/components/input-number/demo/basic.md b/components/input-number/demo/basic.md
index bafc92bcd1..b4c1184292 100644
--- a/components/input-number/demo/basic.md
+++ b/components/input-number/demo/basic.md
@@ -21,6 +21,6 @@ function onChange(value) {
 }
 
 ReactDOM.render(
-  <InputNumber min={1} max={10} defaultValue={3} onChange={onChange} />
-, mountNode);
+  <InputNumber min={1} max={10} defaultValue={3} onChange={onChange} />,
+  mountNode);
 ````
diff --git a/components/input-number/demo/digit.md b/components/input-number/demo/digit.md
index fd2ea32eb0..e343315a0a 100644
--- a/components/input-number/demo/digit.md
+++ b/components/input-number/demo/digit.md
@@ -21,6 +21,6 @@ function onChange(value) {
 }
 
 ReactDOM.render(
-  <InputNumber min={0} max={10} step={0.1} onChange={onChange} />
-, mountNode);
+  <InputNumber min={0} max={10} step={0.1} onChange={onChange} />,
+  mountNode);
 ````
diff --git a/components/input-number/demo/disabled.md b/components/input-number/demo/disabled.md
index 86205f74c4..22cc9698ca 100644
--- a/components/input-number/demo/disabled.md
+++ b/components/input-number/demo/disabled.md
@@ -20,11 +20,13 @@ class App extends React.Component {
   state = {
     disabled: true,
   };
+
   toggle = () => {
     this.setState({
       disabled: !this.state.disabled,
     });
   }
+
   render() {
     return (
       <div>
diff --git a/components/input-number/demo/formatter.md b/components/input-number/demo/formatter.md
index ecf25cf0b0..a81eaaedca 100644
--- a/components/input-number/demo/formatter.md
+++ b/components/input-number/demo/formatter.md
@@ -36,6 +36,6 @@ ReactDOM.render(
       parser={value => value.replace('%', '')}
       onChange={onChange}
     />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/input-number/demo/size.md b/components/input-number/demo/size.md
index 49f92bfa1a..00d6f19245 100644
--- a/components/input-number/demo/size.md
+++ b/components/input-number/demo/size.md
@@ -25,8 +25,8 @@ ReactDOM.render(
     <InputNumber size="large" min={1} max={100000} defaultValue={3} onChange={onChange} />
     <InputNumber min={1} max={100000} defaultValue={3} onChange={onChange} />
     <InputNumber size="small" min={1} max={100000} defaultValue={3} onChange={onChange} />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 ````css
diff --git a/components/input/demo/addon.md b/components/input/demo/addon.md
index 15987ebe4e..797a625f63 100644
--- a/components/input/demo/addon.md
+++ b/components/input/demo/addon.md
@@ -15,6 +15,7 @@ Using pre & post tabs example.
 
 ````jsx
 import { Input, Select, Icon } from 'antd';
+
 const Option = Select.Option;
 
 const selectBefore = (
@@ -43,6 +44,6 @@ ReactDOM.render(
     <div style={{ marginBottom: 16 }}>
       <Input addonAfter={<Icon type="setting" />} defaultValue="mysite" />
     </div>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/input/demo/autosize-textarea.md b/components/input/demo/autosize-textarea.md
index 7974c326fa..a61544c6c1 100644
--- a/components/input/demo/autosize-textarea.md
+++ b/components/input/demo/autosize-textarea.md
@@ -17,6 +17,7 @@ An options object can be provided to `autosize` to specify the minimum and maxim
 
 ````jsx
 import { Input } from 'antd';
+
 const { TextArea } = Input;
 
 ReactDOM.render(
@@ -24,6 +25,6 @@ ReactDOM.render(
     <TextArea placeholder="Autosize height based on content lines" autosize />
     <div style={{ margin: '24px 0' }} />
     <TextArea placeholder="Autosize height with minimum and maximum number of lines" autosize={{ minRows: 2, maxRows: 6 }} />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/input/demo/group.md b/components/input/demo/group.md
index 8da84397c9..c4fced647a 100644
--- a/components/input/demo/group.md
+++ b/components/input/demo/group.md
@@ -19,6 +19,7 @@ Note: You don't need `Col` to control the width in the `compact` mode.
 
 ````jsx
 import { Input, Col, Select, InputNumber, DatePicker, AutoComplete, Cascader } from 'antd';
+
 const InputGroup = Input.Group;
 const Option = Select.Option;
 
@@ -50,6 +51,7 @@ class CompactDemo extends React.Component {
   state = {
     dataSource: [],
   }
+
   handleChange = (value) => {
     this.setState({
       dataSource: !value || value.indexOf('@') >= 0 ? [] : [
@@ -59,6 +61,7 @@ class CompactDemo extends React.Component {
       ],
     });
   }
+
   render() {
     return (
       <div>
diff --git a/components/input/demo/presuffix.md b/components/input/demo/presuffix.md
index fdda1f5199..4db00e7bfa 100644
--- a/components/input/demo/presuffix.md
+++ b/components/input/demo/presuffix.md
@@ -23,13 +23,16 @@ class App extends React.Component {
       userName: '',
     };
   }
+
   emitEmpty = () => {
     this.userNameInput.focus();
     this.setState({ userName: '' });
   }
+
   onChangeUserName = (e) => {
     this.setState({ userName: e.target.value });
   }
+
   render() {
     const { userName } = this.state;
     const suffix = userName ? <Icon type="close-circle" onClick={this.emitEmpty} /> : null;
diff --git a/components/input/demo/search-input.md b/components/input/demo/search-input.md
index 3857e91e9f..fcecdd3e0e 100644
--- a/components/input/demo/search-input.md
+++ b/components/input/demo/search-input.md
@@ -15,6 +15,7 @@ Example of creating a search box by grouping a standard input with a search butt
 
 ````jsx
 import { Input } from 'antd';
+
 const Search = Input.Search;
 
 ReactDOM.render(
@@ -37,6 +38,6 @@ ReactDOM.render(
       size="large"
       onSearch={value => console.log(value)}
     />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/input/demo/size.md b/components/input/demo/size.md
index 6841c77b44..3787810d50 100644
--- a/components/input/demo/size.md
+++ b/components/input/demo/size.md
@@ -23,8 +23,8 @@ ReactDOM.render(
     <Input size="large" placeholder="large size" />
     <Input placeholder="default size" />
     <Input size="small" placeholder="small size" />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 ````css
diff --git a/components/input/demo/textarea.md b/components/input/demo/textarea.md
index 9b124c9b38..e065c980af 100644
--- a/components/input/demo/textarea.md
+++ b/components/input/demo/textarea.md
@@ -15,6 +15,7 @@ For multi-line input.
 
 ````jsx
 import { Input } from 'antd';
+
 const { TextArea } = Input;
 
 ReactDOM.render(<TextArea rows={4} />, mountNode);
diff --git a/components/input/demo/tooltip.md b/components/input/demo/tooltip.md
index 93217e8648..18ca55183b 100644
--- a/components/input/demo/tooltip.md
+++ b/components/input/demo/tooltip.md
@@ -40,6 +40,7 @@ class NumericInput extends React.Component {
       this.props.onChange(value);
     }
   }
+
   // '.' at the end or only '-' in the input box.
   onBlur = () => {
     const { value, onBlur, onChange } = this.props;
@@ -50,6 +51,7 @@ class NumericInput extends React.Component {
       onBlur();
     }
   }
+
   render() {
     const { value } = this.props;
     const title = value ? (
@@ -81,9 +83,11 @@ class NumericInputDemo extends React.Component {
     super(props);
     this.state = { value: '' };
   }
+
   onChange = (value) => {
     this.setState({ value });
   }
+
   render() {
     return <NumericInput style={{ width: 120 }} value={this.state.value} onChange={this.onChange} />;
   }
diff --git a/components/layout/demo/basic.md b/components/layout/demo/basic.md
index 395088a351..43de30f2f4 100644
--- a/components/layout/demo/basic.md
+++ b/components/layout/demo/basic.md
@@ -15,6 +15,7 @@ Classic page layouts.
 
 ````jsx
 import { Layout } from 'antd';
+
 const { Header, Footer, Sider, Content } = Layout;
 
 ReactDOM.render(
@@ -51,8 +52,8 @@ ReactDOM.render(
         <Footer>Footer</Footer>
       </Layout>
     </Layout>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 <style>
diff --git a/components/layout/demo/custom-trigger.md b/components/layout/demo/custom-trigger.md
index 73681e60e7..8eb1e482f2 100644
--- a/components/layout/demo/custom-trigger.md
+++ b/components/layout/demo/custom-trigger.md
@@ -15,17 +15,20 @@ If you want to use a customized trigger, you can hide the default one by setting
 
 ````jsx
 import { Layout, Menu, Icon } from 'antd';
+
 const { Header, Sider, Content } = Layout;
 
 class SiderDemo extends React.Component {
   state = {
     collapsed: false,
   };
+
   toggle = () => {
     this.setState({
       collapsed: !this.state.collapsed,
     });
   }
+
   render() {
     return (
       <Layout>
diff --git a/components/layout/demo/fixed-sider.md b/components/layout/demo/fixed-sider.md
index 0ed794a49e..187f0ffbb8 100644
--- a/components/layout/demo/fixed-sider.md
+++ b/components/layout/demo/fixed-sider.md
@@ -16,6 +16,7 @@ When dealing with long content, a fixed sider can provide a better user experien
 
 ````jsx
 import { Layout, Menu, Icon } from 'antd';
+
 const { Header, Content, Footer, Sider } = Layout;
 
 ReactDOM.render(
@@ -80,8 +81,8 @@ ReactDOM.render(
         Ant Design ©2016 Created by Ant UED
       </Footer>
     </Layout>
-  </Layout>
-, mountNode);
+  </Layout>,
+  mountNode);
 ````
 
 ````css
diff --git a/components/layout/demo/fixed.md b/components/layout/demo/fixed.md
index 3fc3c12b3c..45b78be8e7 100644
--- a/components/layout/demo/fixed.md
+++ b/components/layout/demo/fixed.md
@@ -16,6 +16,7 @@ Fixed Header is generally used to fix the top navigation to facilitate page swit
 
 ````jsx
 import { Layout, Menu, Breadcrumb } from 'antd';
+
 const { Header, Content, Footer } = Layout;
 
 ReactDOM.render(
@@ -44,8 +45,8 @@ ReactDOM.render(
     <Footer style={{ textAlign: 'center' }}>
       Ant Design ©2016 Created by Ant UED
     </Footer>
-  </Layout>
-, mountNode);
+  </Layout>,
+  mountNode);
 ````
 
 ````css
diff --git a/components/layout/demo/responsive.md b/components/layout/demo/responsive.md
index 3da189df88..a42ae568c5 100644
--- a/components/layout/demo/responsive.md
+++ b/components/layout/demo/responsive.md
@@ -19,6 +19,7 @@ Layout.Sider supports responsive layout.
 
 ````jsx
 import { Layout, Menu, Icon } from 'antd';
+
 const { Header, Content, Footer, Sider } = Layout;
 
 ReactDOM.render(
@@ -59,8 +60,8 @@ ReactDOM.render(
         Ant Design ©2016 Created by Ant UED
       </Footer>
     </Layout>
-  </Layout>
-, mountNode);
+  </Layout>,
+  mountNode);
 ````
 
 ````css
diff --git a/components/layout/demo/side.md b/components/layout/demo/side.md
index 70213160b2..1c35f6a8d8 100644
--- a/components/layout/demo/side.md
+++ b/components/layout/demo/side.md
@@ -22,6 +22,7 @@ The level of the aisde navigation is scalable. The first, second, and third leve
 
 ````jsx
 import { Layout, Menu, Breadcrumb, Icon } from 'antd';
+
 const { Header, Content, Footer, Sider } = Layout;
 const SubMenu = Menu.SubMenu;
 
@@ -29,10 +30,12 @@ class SiderDemo extends React.Component {
   state = {
     collapsed: false,
   };
+
   onCollapse = (collapsed) => {
     console.log(collapsed);
     this.setState({ collapsed });
   }
+
   render() {
     return (
       <Layout style={{ minHeight: '100vh' }}>
diff --git a/components/layout/demo/top-side-2.md b/components/layout/demo/top-side-2.md
index be6cb8d246..4e2b3192cc 100644
--- a/components/layout/demo/top-side-2.md
+++ b/components/layout/demo/top-side-2.md
@@ -15,6 +15,7 @@ Both the top navigation and the sidebar, commonly used in application site.
 
 ````jsx
 import { Layout, Menu, Breadcrumb, Icon } from 'antd';
+
 const { SubMenu } = Menu;
 const { Header, Content, Sider } = Layout;
 
@@ -72,8 +73,8 @@ ReactDOM.render(
         </Content>
       </Layout>
     </Layout>
-  </Layout>
-, mountNode);
+  </Layout>,
+  mountNode);
 ````
 
 ````css
diff --git a/components/layout/demo/top-side.md b/components/layout/demo/top-side.md
index 1fcbad9a7b..38e69a58b3 100644
--- a/components/layout/demo/top-side.md
+++ b/components/layout/demo/top-side.md
@@ -15,6 +15,7 @@ Both the top navigation and the sidebar, commonly used in documentation site.
 
 ````jsx
 import { Layout, Menu, Breadcrumb, Icon } from 'antd';
+
 const { SubMenu } = Menu;
 const { Header, Content, Footer, Sider } = Layout;
 
@@ -75,8 +76,8 @@ ReactDOM.render(
     <Footer style={{ textAlign: 'center' }}>
       Ant Design ©2016 Created by Ant UED
     </Footer>
-  </Layout>
-, mountNode);
+  </Layout>,
+  mountNode);
 ````
 
 ````css
diff --git a/components/layout/demo/top.md b/components/layout/demo/top.md
index eb9b0ed0b3..14c3ee89e8 100644
--- a/components/layout/demo/top.md
+++ b/components/layout/demo/top.md
@@ -22,6 +22,7 @@ Top-bottom structure is conform with the top-bottom viewing habit, it's a classi
 
 ````jsx
 import { Layout, Menu, Breadcrumb } from 'antd';
+
 const { Header, Content, Footer } = Layout;
 
 ReactDOM.render(
@@ -50,8 +51,8 @@ ReactDOM.render(
     <Footer style={{ textAlign: 'center' }}>
       Ant Design ©2016 Created by Ant UED
     </Footer>
-  </Layout>
-, mountNode);
+  </Layout>,
+  mountNode);
 ````
 
 ````css
diff --git a/components/list/demo/basic.md b/components/list/demo/basic.md
index e947709666..288abdedba 100644
--- a/components/list/demo/basic.md
+++ b/components/list/demo/basic.md
@@ -44,6 +44,6 @@ ReactDOM.render(
         />
       </List.Item>
     )}
-  />
-, mountNode);
+  />,
+  mountNode);
 ````
diff --git a/components/list/demo/grid.md b/components/list/demo/grid.md
index 7dd01e7561..94691cd05c 100644
--- a/components/list/demo/grid.md
+++ b/components/list/demo/grid.md
@@ -40,6 +40,6 @@ ReactDOM.render(
         <Card title={item.title}>Card content</Card>
       </List.Item>
     )}
-  />
-, mountNode);
+  />,
+  mountNode);
 ````
diff --git a/components/list/demo/infinite-load.md b/components/list/demo/infinite-load.md
index ce3aef4e2a..bcb69b18d2 100644
--- a/components/list/demo/infinite-load.md
+++ b/components/list/demo/infinite-load.md
@@ -27,6 +27,7 @@ class InfiniteListExample extends React.Component {
     loading: false,
     hasMore: true,
   }
+
   getData = (callback) => {
     reqwest({
       url: fakeDataUrl,
@@ -38,6 +39,7 @@ class InfiniteListExample extends React.Component {
       },
     });
   }
+
   componentDidMount() {
     this.getData((res) => {
       this.setState({
@@ -45,6 +47,7 @@ class InfiniteListExample extends React.Component {
       });
     });
   }
+
   handleInfiniteOnLoad = () => {
     let data = this.state.data;
     this.setState({
@@ -66,6 +69,7 @@ class InfiniteListExample extends React.Component {
       });
     });
   }
+
   render() {
     return (
       <div className="demo-infinite-container">
diff --git a/components/list/demo/infinite-virtualized-load.md b/components/list/demo/infinite-virtualized-load.md
index 03c0945ce5..c976d0c03e 100644
--- a/components/list/demo/infinite-virtualized-load.md
+++ b/components/list/demo/infinite-virtualized-load.md
@@ -34,7 +34,9 @@ class VirtualizedExample extends React.Component {
     data: [],
     loading: false,
   }
+
   loadedRowsMap = {}
+
   getData = (callback) => {
     reqwest({
       url: fakeDataUrl,
@@ -46,6 +48,7 @@ class VirtualizedExample extends React.Component {
       },
     });
   }
+
   componentDidMount() {
     this.getData((res) => {
       this.setState({
@@ -53,6 +56,7 @@ class VirtualizedExample extends React.Component {
       });
     });
   }
+
   handleInfiniteOnLoad = ({ startIndex, stopIndex }) => {
     let data = this.state.data;
     this.setState({
@@ -77,9 +81,11 @@ class VirtualizedExample extends React.Component {
       });
     });
   }
+
   isRowLoaded = ({ index }) => {
     return !!this.loadedRowsMap[index];
   }
+
   renderItem = ({ index, key, style }) => {
     const { data } = this.state;
     const item = data[index];
@@ -94,6 +100,7 @@ class VirtualizedExample extends React.Component {
       </List.Item>
     );
   }
+
   render() {
     const { data } = this.state;
     const vlist = ({ height, isScrolling, onChildScroll, scrollTop, onRowsRendered, width }) => (
diff --git a/components/list/demo/loadmore.md b/components/list/demo/loadmore.md
index 5368f725c0..3bea685955 100644
--- a/components/list/demo/loadmore.md
+++ b/components/list/demo/loadmore.md
@@ -27,6 +27,7 @@ class LoadMoreList extends React.Component {
     showLoadingMore: true,
     data: [],
   }
+
   componentDidMount() {
     this.getData((res) => {
       this.setState({
@@ -35,6 +36,7 @@ class LoadMoreList extends React.Component {
       });
     });
   }
+
   getData = (callback) => {
     reqwest({
       url: fakeDataUrl,
@@ -46,6 +48,7 @@ class LoadMoreList extends React.Component {
       },
     });
   }
+
   onLoadMore = () => {
     this.setState({
       loadingMore: true,
@@ -63,6 +66,7 @@ class LoadMoreList extends React.Component {
       });
     });
   }
+
   render() {
     const { loading, loadingMore, showLoadingMore, data } = this.state;
     const loadMore = showLoadingMore ? (
diff --git a/components/list/demo/resposive.md b/components/list/demo/resposive.md
index 045f2e0703..f537198dde 100644
--- a/components/list/demo/resposive.md
+++ b/components/list/demo/resposive.md
@@ -46,6 +46,6 @@ ReactDOM.render(
         <Card title={item.title}>Card content</Card>
       </List.Item>
     )}
-  />
-, mountNode);
+  />,
+  mountNode);
 ````
diff --git a/components/list/demo/simple.md b/components/list/demo/simple.md
index 93c1a7c3d0..a6e6948ef8 100644
--- a/components/list/demo/simple.md
+++ b/components/list/demo/simple.md
@@ -60,6 +60,6 @@ ReactDOM.render(
       dataSource={data}
       renderItem={item => (<List.Item>{item}</List.Item>)}
     />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/list/demo/vertical.md b/components/list/demo/vertical.md
index 42b70da3be..ed3613abc0 100644
--- a/components/list/demo/vertical.md
+++ b/components/list/demo/vertical.md
@@ -60,6 +60,6 @@ ReactDOM.render(
         {item.content}
       </List.Item>
     )}
-  />
-, mountNode);
+  />,
+  mountNode);
 ````
diff --git a/components/locale-provider/demo/all.md b/components/locale-provider/demo/all.md
index 4ae36923a7..cdf0cb3c6e 100644
--- a/components/locale-provider/demo/all.md
+++ b/components/locale-provider/demo/all.md
@@ -15,10 +15,11 @@ Components which need localization support are listed here, you can toggle the l
 
 ````jsx
 import { LocaleProvider, Pagination, DatePicker, TimePicker, Calendar,
-         Popconfirm, Table, Modal, Button, Select, Transfer, Radio } from 'antd';
+  Popconfirm, Table, Modal, Button, Select, Transfer, Radio } from 'antd';
 import zhCN from 'antd/lib/locale-provider/zh_CN';
 import moment from 'moment';
 import 'moment/locale/zh-cn';
+
 moment.locale('en');
 
 const Option = Select.Option;
@@ -40,12 +41,15 @@ class Page extends React.Component {
   state = {
     visible: false,
   }
+
   showModal = () => {
     this.setState({ visible: true });
   }
+
   hideModal = () => {
     this.setState({ visible: false });
   }
+
   render() {
     const info = () => {
       Modal.info({
@@ -111,6 +115,7 @@ class App extends React.Component {
       locale: null,
     };
   }
+
   changeLocale = (e) => {
     const localeValue = e.target.value;
     this.setState({ locale: localeValue });
@@ -120,6 +125,7 @@ class App extends React.Component {
       moment.locale('zh-cn');
     }
   }
+
   render() {
     return (
       <div>
diff --git a/components/locale-provider/demo/basic.md b/components/locale-provider/demo/basic.md
index 522f50ba30..02506f031c 100644
--- a/components/locale-provider/demo/basic.md
+++ b/components/locale-provider/demo/basic.md
@@ -26,6 +26,6 @@ const App = () => (
 ReactDOM.render(
   <LocaleProvider locale={zhCN}>
     <App />
-  </LocaleProvider>
-, mountNode);
+  </LocaleProvider>,
+  mountNode);
 ````
diff --git a/components/mention/demo/async.md b/components/mention/demo/async.md
index f15f79be69..a8e0a8f529 100644
--- a/components/mention/demo/async.md
+++ b/components/mention/demo/async.md
@@ -23,11 +23,13 @@ class AsyncMention extends React.Component {
     suggestions: [],
     loading: false,
   }
+
   fetchSuggestions = (value, callback) => {
     setTimeout(() => {
       callback(users.filter(item => item.indexOf(value) !== -1));
     }, 500);
   }
+
   onSearchChange = (value) => {
     this.fetchSuggestions(value, (suggestions) => {
       this.setState({
@@ -39,6 +41,7 @@ class AsyncMention extends React.Component {
       loading: true,
     });
   }
+
   render() {
     const { suggestions, loading } = this.state;
     return (
diff --git a/components/mention/demo/avatar.md b/components/mention/demo/avatar.md
index 61ac57a951..ff61e524ea 100644
--- a/components/mention/demo/avatar.md
+++ b/components/mention/demo/avatar.md
@@ -17,6 +17,7 @@ Customize suggestions.
 
 ````jsx
 import { Mention, Avatar } from 'antd';
+
 const Nav = Mention.Nav;
 
 const webFrameworks = [
@@ -30,10 +31,10 @@ class CustomNavMention extends React.Component {
   state = {
     suggestions: [],
   }
+
   onSearchChange = (value) => {
     const searchValue = value.toLowerCase();
-    const filtered = webFrameworks.filter(item =>
-      item.name.toLowerCase().indexOf(searchValue) !== -1
+    const filtered = webFrameworks.filter(item => item.name.toLowerCase().indexOf(searchValue) !== -1
     );
     const suggestions = filtered.map(suggestion => (
       <Nav
@@ -51,6 +52,7 @@ class CustomNavMention extends React.Component {
     ));
     this.setState({ suggestions });
   }
+
   render() {
     const { suggestions } = this.state;
     return (
diff --git a/components/mention/demo/basic.md b/components/mention/demo/basic.md
index e1c2777988..352e239dba 100644
--- a/components/mention/demo/basic.md
+++ b/components/mention/demo/basic.md
@@ -15,6 +15,7 @@ Basic usage.
 
 ````jsx
 import { Mention } from 'antd';
+
 const { toString, toContentState } = Mention;
 
 function onChange(contentState) {
@@ -32,6 +33,6 @@ ReactDOM.render(
     defaultValue={toContentState('@afc163')}
     suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
     onSelect={onSelect}
-  />
-, mountNode);
+  />,
+  mountNode);
 ````
diff --git a/components/mention/demo/controllder-simple.md b/components/mention/demo/controllder-simple.md
index 3d27563ba0..b311ff994f 100644
--- a/components/mention/demo/controllder-simple.md
+++ b/components/mention/demo/controllder-simple.md
@@ -15,20 +15,24 @@ Controlled mode.
 
 ````jsx
 import { Mention } from 'antd';
+
 const { toContentState } = Mention;
 
 class App extends React.Component {
   state = {
     value: toContentState('@afc163'),
   }
+
   componentDidMount() {
     this.mention.focus();
   }
+
   handleChange = (editorState) => {
     this.setState({
       value: editorState,
     });
   }
+
   render() {
     return (
       <Mention
diff --git a/components/mention/demo/controlled.md b/components/mention/demo/controlled.md
index 9ef437fbf8..c71240c919 100644
--- a/components/mention/demo/controlled.md
+++ b/components/mention/demo/controlled.md
@@ -15,6 +15,7 @@ Controlled mode, for example, to work with `Form`.
 
 ````jsx
 import { Mention, Form, Button } from 'antd';
+
 const { toContentState, getMentions } = Mention;
 const FormItem = Form.Item;
 
@@ -22,10 +23,12 @@ class App extends React.Component {
   state = {
     initValue: toContentState('@afc163'),
   }
+
   handleReset = (e) => {
     e.preventDefault();
     this.props.form.resetFields();
   }
+
   handleSubmit = (e) => {
     e.preventDefault();
     this.props.form.validateFields((errors, values) => {
@@ -37,6 +40,7 @@ class App extends React.Component {
       console.log(values);
     });
   }
+
   checkMention = (rule, value, callback) => {
     const { getFieldValue } = this.props.form;
     const mentions = getMentions(getFieldValue('mention'));
@@ -46,6 +50,7 @@ class App extends React.Component {
       callback();
     }
   }
+
   render() {
     const { getFieldDecorator, getFieldValue } = this.props.form;
     console.log('>> render', getFieldValue('mention') === this.state.initValue);
diff --git a/components/mention/demo/custom-tag.md b/components/mention/demo/custom-tag.md
index 9cf8b50124..5d562a594e 100644
--- a/components/mention/demo/custom-tag.md
+++ b/components/mention/demo/custom-tag.md
@@ -17,6 +17,7 @@ Customize suggestions.
 
 ````jsx
 import { Mention } from 'antd';
+
 const Nav = Mention.Nav;
 
 const webFrameworks = [
@@ -35,10 +36,10 @@ class CustomNavMention extends React.Component {
   state = {
     suggestions: [],
   }
+
   onSearchChange = (value) => {
     const searchValue = value.toLowerCase();
-    const filtered = webFrameworks.filter(item =>
-      item.name.toLowerCase().indexOf(searchValue) !== -1
+    const filtered = webFrameworks.filter(item => item.name.toLowerCase().indexOf(searchValue) !== -1
     );
     const suggestions = filtered.map(suggestion => (
       <Nav
@@ -50,6 +51,7 @@ class CustomNavMention extends React.Component {
     ));
     this.setState({ suggestions });
   }
+
   render() {
     const { suggestions } = this.state;
     return (
diff --git a/components/mention/demo/multilines.md b/components/mention/demo/multilines.md
index 81342ec9cd..83ab5d6086 100644
--- a/components/mention/demo/multilines.md
+++ b/components/mention/demo/multilines.md
@@ -15,6 +15,7 @@ Multi lines mode.
 
 ````jsx
 import { Mention } from 'antd';
+
 const { toString } = Mention;
 
 function onChange(editorState) {
@@ -27,6 +28,6 @@ ReactDOM.render(
     onChange={onChange}
     suggestions={['afc163', 'benjycui', 'yiminghe', 'jljsj33', 'dqaria', 'RaoHai']}
     multiLines
-  />
-, mountNode);
+  />,
+  mountNode);
 ````
diff --git a/components/mention/demo/multiple-trigger.md b/components/mention/demo/multiple-trigger.md
index 7af913a613..23df66c7dc 100644
--- a/components/mention/demo/multiple-trigger.md
+++ b/components/mention/demo/multiple-trigger.md
@@ -15,6 +15,7 @@ Customize Trigger Token by `prefix` props. Default to `@`, `Array<string>` also
 
 ````jsx
 import { Mention } from 'antd';
+
 const { toString } = Mention;
 
 function onChange(editorState) {
@@ -35,6 +36,7 @@ class App extends React.Component {
       suggestions: [],
     };
   }
+
   onSearchChange = (value, trigger) => {
     console.log('onSearchChange', value, trigger);
     const dataSource = trigger === '@' ? users : tags;
@@ -42,6 +44,7 @@ class App extends React.Component {
       suggestions: dataSource.filter(item => item.indexOf(value) !== -1),
     });
   }
+
   render() {
     return (
       <Mention
@@ -58,6 +61,6 @@ class App extends React.Component {
 }
 
 ReactDOM.render(
-  <App />
-, mountNode);
+  <App />,
+  mountNode);
 ````
diff --git a/components/mention/demo/placement.md b/components/mention/demo/placement.md
index 9b07dc8500..66d646e4b1 100644
--- a/components/mention/demo/placement.md
+++ b/components/mention/demo/placement.md
@@ -15,6 +15,7 @@ Change the suggestions placement.
 
 ````jsx
 import { Mention } from 'antd';
+
 const { toString } = Mention;
 
 function onChange(contentState) {
@@ -32,6 +33,6 @@ ReactDOM.render(
     suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
     onSelect={onSelect}
     placement="top"
-  />
-, mountNode);
+  />,
+  mountNode);
 ````
diff --git a/components/mention/demo/popupContainer.md b/components/mention/demo/popupContainer.md
index e20ddacb2e..b8facae84b 100644
--- a/components/mention/demo/popupContainer.md
+++ b/components/mention/demo/popupContainer.md
@@ -15,6 +15,7 @@ To set the container of the suggestion.
 
 ````jsx
 import { Mention, Popover, Button } from 'antd';
+
 const { toString, toContentState } = Mention;
 
 function onChange(editorState) {
@@ -29,11 +30,13 @@ class PopoverContainer extends React.Component {
   getSuggestionContainer = () => {
     return this.popover.getPopupDomNode();
   }
+
   visibleChange = (visible) => {
     if (visible && this.mention) {
       this.mention.focus();
     }
   }
+
   render() {
     const mention = (
       <Mention
diff --git a/components/mention/demo/readonly.md b/components/mention/demo/readonly.md
index 67cb9ffe82..87c3a5f3c4 100644
--- a/components/mention/demo/readonly.md
+++ b/components/mention/demo/readonly.md
@@ -15,6 +15,7 @@ Configurate `disabled` and `readOnly`.
 
 ````jsx
 import { Mention } from 'antd';
+
 const { toString } = Mention;
 
 function onChange(editorState) {
@@ -48,6 +49,6 @@ function App() {
 
 
 ReactDOM.render(
-  <App />
-, mountNode);
+  <App />,
+  mountNode);
 ````
diff --git a/components/menu/demo/horizontal.md b/components/menu/demo/horizontal.md
index 6ab75af8f0..2082204b24 100755
--- a/components/menu/demo/horizontal.md
+++ b/components/menu/demo/horizontal.md
@@ -15,6 +15,7 @@ Horizontal top navigation menu.
 
 ````jsx
 import { Menu, Icon } from 'antd';
+
 const SubMenu = Menu.SubMenu;
 const MenuItemGroup = Menu.ItemGroup;
 
@@ -22,12 +23,14 @@ class App extends React.Component {
   state = {
     current: 'mail',
   }
+
   handleClick = (e) => {
     console.log('click ', e);
     this.setState({
       current: e.key,
     });
   }
+
   render() {
     return (
       <Menu
diff --git a/components/menu/demo/inline-collapsed.md b/components/menu/demo/inline-collapsed.md
index a329432fb5..ea369ddca2 100644
--- a/components/menu/demo/inline-collapsed.md
+++ b/components/menu/demo/inline-collapsed.md
@@ -19,17 +19,20 @@ Here is [a complete demo](/components/layout/#components-layout-demo-side) with
 
 ````jsx
 import { Menu, Icon, Button } from 'antd';
+
 const SubMenu = Menu.SubMenu;
 
 class App extends React.Component {
   state = {
     collapsed: false,
   }
+
   toggleCollapsed = () => {
     this.setState({
       collapsed: !this.state.collapsed,
     });
   }
+
   render() {
     return (
       <div style={{ width: 256 }}>
diff --git a/components/menu/demo/inline.md b/components/menu/demo/inline.md
index 3c260109a2..221db2ee1b 100755
--- a/components/menu/demo/inline.md
+++ b/components/menu/demo/inline.md
@@ -15,6 +15,7 @@ Vertical menu with inline submenus.
 
 ````jsx
 import { Menu, Icon } from 'antd';
+
 const SubMenu = Menu.SubMenu;
 const MenuItemGroup = Menu.ItemGroup;
 
@@ -22,6 +23,7 @@ class Sider extends React.Component {
   handleClick = (e) => {
     console.log('click ', e);
   }
+
   render() {
     return (
       <Menu
diff --git a/components/menu/demo/sider-current.md b/components/menu/demo/sider-current.md
index 15cea1a25c..3896c2fc49 100755
--- a/components/menu/demo/sider-current.md
+++ b/components/menu/demo/sider-current.md
@@ -15,14 +15,17 @@ Click the menu and you will see that all the other menus gets collapsed to keep
 
 ````jsx
 import { Menu, Icon } from 'antd';
+
 const SubMenu = Menu.SubMenu;
 
 class Sider extends React.Component {
   // submenu keys of first level
   rootSubmenuKeys = ['sub1', 'sub2', 'sub4'];
+
   state = {
     openKeys: ['sub1'],
   };
+
   onOpenChange = (openKeys) => {
     const latestOpenKey = openKeys.find(key => this.state.openKeys.indexOf(key) === -1);
     if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
@@ -33,6 +36,7 @@ class Sider extends React.Component {
       });
     }
   }
+
   render() {
     return (
       <Menu
diff --git a/components/menu/demo/switch-mode.md b/components/menu/demo/switch-mode.md
index b524bfeee9..19a0b92ff8 100755
--- a/components/menu/demo/switch-mode.md
+++ b/components/menu/demo/switch-mode.md
@@ -15,6 +15,7 @@ Show the dynamic switching mode (between 'inline' and 'vertical').
 
 ````jsx
 import { Menu, Icon, Switch } from 'antd';
+
 const { SubMenu } = Menu;
 
 class Sider extends React.Component {
@@ -22,16 +23,19 @@ class Sider extends React.Component {
     mode: 'inline',
     theme: 'light',
   }
+
   changeMode = (value) => {
     this.setState({
       mode: value ? 'vertical' : 'inline',
     });
   }
+
   changeTheme = (value) => {
     this.setState({
       theme: value ? 'dark' : 'light',
     });
   }
+
   render() {
     return (
       <div>
diff --git a/components/menu/demo/theme.md b/components/menu/demo/theme.md
index 287c9a968c..d41a20a9e7 100755
--- a/components/menu/demo/theme.md
+++ b/components/menu/demo/theme.md
@@ -15,6 +15,7 @@ There are two built-in themes: 'light' and 'dark'. The default value is 'light'.
 
 ````jsx
 import { Menu, Icon, Switch } from 'antd';
+
 const SubMenu = Menu.SubMenu;
 
 class Sider extends React.Component {
@@ -22,17 +23,20 @@ class Sider extends React.Component {
     theme: 'dark',
     current: '1',
   }
+
   changeTheme = (value) => {
     this.setState({
       theme: value ? 'dark' : 'light',
     });
   }
+
   handleClick = (e) => {
     console.log('click ', e);
     this.setState({
       current: e.key,
     });
   }
+
   render() {
     return (
       <div>
diff --git a/components/menu/demo/vertical.md b/components/menu/demo/vertical.md
index 316c2061a8..eb96113847 100755
--- a/components/menu/demo/vertical.md
+++ b/components/menu/demo/vertical.md
@@ -15,6 +15,7 @@ Submenus open as pop-ups.
 
 ````jsx
 import { Menu, Icon } from 'antd';
+
 const SubMenu = Menu.SubMenu;
 const MenuItemGroup = Menu.ItemGroup;
 
@@ -48,6 +49,6 @@ ReactDOM.render(
       <Menu.Item key="11">Option 11</Menu.Item>
       <Menu.Item key="12">Option 12</Menu.Item>
     </SubMenu>
-  </Menu>
-, mountNode);
+  </Menu>,
+  mountNode);
 ````
diff --git a/components/message/demo/duration.md b/components/message/demo/duration.md
index cc9e27500e..0835634184 100644
--- a/components/message/demo/duration.md
+++ b/components/message/demo/duration.md
@@ -21,6 +21,6 @@ const success = () => {
 };
 
 ReactDOM.render(
-  <Button onClick={success}>Customized display duration</Button>
-, mountNode);
+  <Button onClick={success}>Customized display duration</Button>,
+  mountNode);
 ````
diff --git a/components/message/demo/info.md b/components/message/demo/info.md
index bcd8fb9ee8..174b806138 100644
--- a/components/message/demo/info.md
+++ b/components/message/demo/info.md
@@ -21,6 +21,6 @@ const info = () => {
 };
 
 ReactDOM.render(
-  <Button type="primary" onClick={info}>Display normal message</Button>
-, mountNode);
+  <Button type="primary" onClick={info}>Display normal message</Button>,
+  mountNode);
 ````
diff --git a/components/message/demo/loading.md b/components/message/demo/loading.md
index bcdfbe47bd..57566ff3a3 100644
--- a/components/message/demo/loading.md
+++ b/components/message/demo/loading.md
@@ -23,6 +23,6 @@ const success = () => {
 };
 
 ReactDOM.render(
-  <Button onClick={success}>Display a loading indicator</Button>
-, mountNode);
+  <Button onClick={success}>Display a loading indicator</Button>,
+  mountNode);
 ````
diff --git a/components/message/demo/other.md b/components/message/demo/other.md
index 9c3a1025ae..1a40642ec6 100644
--- a/components/message/demo/other.md
+++ b/components/message/demo/other.md
@@ -33,8 +33,8 @@ ReactDOM.render(
     <Button onClick={success}>Success</Button>
     <Button onClick={error}>Error</Button>
     <Button onClick={warning}>Warning</Button>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 <style>
diff --git a/components/message/demo/thenable.md b/components/message/demo/thenable.md
index d1da8a8f4e..7583b261ae 100644
--- a/components/message/demo/thenable.md
+++ b/components/message/demo/thenable.md
@@ -22,7 +22,7 @@ const success = () => {
 };
 
 ReactDOM.render(
-  <Button onClick={success}>Display a sequence of message</Button>
-, mountNode);
+  <Button onClick={success}>Display a sequence of message</Button>,
+  mountNode);
 ````
 
diff --git a/components/modal/demo/async.md b/components/modal/demo/async.md
index 0a40340230..5cfbd4a753 100644
--- a/components/modal/demo/async.md
+++ b/components/modal/demo/async.md
@@ -23,11 +23,13 @@ class App extends React.Component {
     visible: false,
     confirmLoading: false,
   }
+
   showModal = () => {
     this.setState({
       visible: true,
     });
   }
+
   handleOk = () => {
     this.setState({
       ModalText: 'The modal will be closed after two seconds',
@@ -40,12 +42,14 @@ class App extends React.Component {
       });
     }, 2000);
   }
+
   handleCancel = () => {
     console.log('Clicked cancel button');
     this.setState({
       visible: false,
     });
   }
+
   render() {
     const { visible, confirmLoading, ModalText } = this.state;
     return (
diff --git a/components/modal/demo/basic.md b/components/modal/demo/basic.md
index 21b4f612cd..bd971b9c53 100644
--- a/components/modal/demo/basic.md
+++ b/components/modal/demo/basic.md
@@ -18,23 +18,27 @@ import { Modal, Button } from 'antd';
 
 class App extends React.Component {
   state = { visible: false }
+
   showModal = () => {
     this.setState({
       visible: true,
     });
   }
+
   handleOk = (e) => {
     console.log(e);
     this.setState({
       visible: false,
     });
   }
+
   handleCancel = (e) => {
     console.log(e);
     this.setState({
       visible: false,
     });
   }
+
   render() {
     return (
       <div>
diff --git a/components/modal/demo/confirm-promise.md b/components/modal/demo/confirm-promise.md
index 008672d8be..7b59e39ee8 100644
--- a/components/modal/demo/confirm-promise.md
+++ b/components/modal/demo/confirm-promise.md
@@ -16,6 +16,7 @@ delay closing the dialog.
 
 ````jsx
 import { Modal, Button } from 'antd';
+
 const confirm = Modal.confirm;
 
 function showConfirm() {
@@ -34,6 +35,6 @@ function showConfirm() {
 ReactDOM.render(
   <Button onClick={showConfirm}>
     Confirm
-  </Button>
-, mountNode);
+  </Button>,
+  mountNode);
 ````
diff --git a/components/modal/demo/confirm.md b/components/modal/demo/confirm.md
index bc6ef8882a..64988cb93a 100644
--- a/components/modal/demo/confirm.md
+++ b/components/modal/demo/confirm.md
@@ -15,6 +15,7 @@ To use `confirm()` to popup a confirmation modal dialog.
 
 ````jsx
 import { Modal, Button } from 'antd';
+
 const confirm = Modal.confirm;
 
 function showConfirm() {
@@ -54,6 +55,6 @@ ReactDOM.render(
     <Button onClick={showDeleteConfirm} type="dashed">
       Delete
     </Button>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/modal/demo/footer.md b/components/modal/demo/footer.md
index 46c72e756d..39dbbb70f9 100644
--- a/components/modal/demo/footer.md
+++ b/components/modal/demo/footer.md
@@ -27,20 +27,24 @@ class App extends React.Component {
     loading: false,
     visible: false,
   }
+
   showModal = () => {
     this.setState({
       visible: true,
     });
   }
+
   handleOk = () => {
     this.setState({ loading: true });
     setTimeout(() => {
       this.setState({ loading: false, visible: false });
     }, 3000);
   }
+
   handleCancel = () => {
     this.setState({ visible: false });
   }
+
   render() {
     const { visible, loading } = this.state;
     return (
diff --git a/components/modal/demo/locale.md b/components/modal/demo/locale.md
index 6e734f40d2..8408c5b094 100644
--- a/components/modal/demo/locale.md
+++ b/components/modal/demo/locale.md
@@ -18,16 +18,19 @@ import { Modal, Button } from 'antd';
 
 class LocalizedModal extends React.Component {
   state = { visible: false }
+
   showModal = () => {
     this.setState({
       visible: true,
     });
   }
+
   hideModal = () => {
     this.setState({
       visible: false,
     });
   }
+
   render() {
     return (
       <div>
diff --git a/components/modal/demo/position.md b/components/modal/demo/position.md
index 4b96fa280c..b80e9305d2 100644
--- a/components/modal/demo/position.md
+++ b/components/modal/demo/position.md
@@ -22,12 +22,15 @@ class App extends React.Component {
     modal1Visible: false,
     modal2Visible: false,
   }
+
   setModal1Visible(modal1Visible) {
     this.setState({ modal1Visible });
   }
+
   setModal2Visible(modal2Visible) {
     this.setState({ modal2Visible });
   }
+
   render() {
     return (
       <div>
diff --git a/components/notification/demo/basic.md b/components/notification/demo/basic.md
index a631cffcc6..6d496818ff 100644
--- a/components/notification/demo/basic.md
+++ b/components/notification/demo/basic.md
@@ -24,6 +24,6 @@ const openNotification = () => {
 };
 
 ReactDOM.render(
-  <Button type="primary" onClick={openNotification}>Open the notification box</Button>
-, mountNode);
+  <Button type="primary" onClick={openNotification}>Open the notification box</Button>,
+  mountNode);
 ````
diff --git a/components/notification/demo/custom-icon.md b/components/notification/demo/custom-icon.md
index 6faf1526d2..b25498474e 100644
--- a/components/notification/demo/custom-icon.md
+++ b/components/notification/demo/custom-icon.md
@@ -25,6 +25,6 @@ const openNotification = () => {
 };
 
 ReactDOM.render(
-  <Button type="primary" onClick={openNotification}>Open the notification box</Button>
-, mountNode);
+  <Button type="primary" onClick={openNotification}>Open the notification box</Button>,
+  mountNode);
 ````
diff --git a/components/notification/demo/custom-style.md b/components/notification/demo/custom-style.md
index a291d104a1..56e9982ab2 100644
--- a/components/notification/demo/custom-style.md
+++ b/components/notification/demo/custom-style.md
@@ -28,6 +28,6 @@ const openNotification = () => {
 };
 
 ReactDOM.render(
-  <Button type="primary" onClick={openNotification}>Open the notification box</Button>
-, mountNode);
+  <Button type="primary" onClick={openNotification}>Open the notification box</Button>,
+  mountNode);
 ````
diff --git a/components/notification/demo/duration.md b/components/notification/demo/duration.md
index 41f9c878fa..a4bab4b4b9 100644
--- a/components/notification/demo/duration.md
+++ b/components/notification/demo/duration.md
@@ -28,6 +28,6 @@ const openNotification = () => {
 };
 
 ReactDOM.render(
-  <Button type="primary" onClick={openNotification}>Open the notification box</Button>
-, mountNode);
+  <Button type="primary" onClick={openNotification}>Open the notification box</Button>,
+  mountNode);
 ````
diff --git a/components/notification/demo/placement.md b/components/notification/demo/placement.md
index 702ffc2216..4c4dcb8c54 100755
--- a/components/notification/demo/placement.md
+++ b/components/notification/demo/placement.md
@@ -44,6 +44,6 @@ ReactDOM.render(
     >
       Open the notification box
     </Button>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/notification/demo/update.md b/components/notification/demo/update.md
index ca3fa54263..4a731e09be 100644
--- a/components/notification/demo/update.md
+++ b/components/notification/demo/update.md
@@ -34,6 +34,6 @@ const openNotification = () => {
 };
 
 ReactDOM.render(
-  <Button type="primary" onClick={openNotification}>Open the notification box</Button>
-, mountNode);
+  <Button type="primary" onClick={openNotification}>Open the notification box</Button>,
+  mountNode);
 ````
diff --git a/components/notification/demo/with-btn.md b/components/notification/demo/with-btn.md
index 805334f751..ff7527820f 100644
--- a/components/notification/demo/with-btn.md
+++ b/components/notification/demo/with-btn.md
@@ -39,6 +39,6 @@ const openNotification = () => {
 ReactDOM.render(
   <Button type="primary" onClick={openNotification}>
     Open the notification box
-  </Button>
-, mountNode);
+  </Button>,
+  mountNode);
 ````
diff --git a/components/notification/demo/with-icon.md b/components/notification/demo/with-icon.md
index 9a7d7d0468..c3fff5d398 100644
--- a/components/notification/demo/with-icon.md
+++ b/components/notification/demo/with-icon.md
@@ -29,8 +29,8 @@ ReactDOM.render(
     <Button onClick={() => openNotificationWithIcon('info')}>Info</Button>
     <Button onClick={() => openNotificationWithIcon('warning')}>Warning</Button>
     <Button onClick={() => openNotificationWithIcon('error')}>Error</Button>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 <style>
diff --git a/components/pagination/demo/changer.md b/components/pagination/demo/changer.md
index 5662ef4028..fc9abbebd8 100644
--- a/components/pagination/demo/changer.md
+++ b/components/pagination/demo/changer.md
@@ -21,6 +21,6 @@ function onShowSizeChange(current, pageSize) {
 }
 
 ReactDOM.render(
-  <Pagination showSizeChanger onShowSizeChange={onShowSizeChange} defaultCurrent={3} total={500} />
-, mountNode);
+  <Pagination showSizeChanger onShowSizeChange={onShowSizeChange} defaultCurrent={3} total={500} />,
+  mountNode);
 ````
diff --git a/components/pagination/demo/controlled.md b/components/pagination/demo/controlled.md
index be606e5e20..ae4ce67bf1 100644
--- a/components/pagination/demo/controlled.md
+++ b/components/pagination/demo/controlled.md
@@ -20,12 +20,14 @@ class App extends React.Component {
   state = {
     current: 3,
   }
+
   onChange = (page) => {
     console.log(page);
     this.setState({
       current: page,
     });
   }
+
   render() {
     return <Pagination current={this.state.current} onChange={this.onChange} total={50} />;
   }
diff --git a/components/pagination/demo/itemRender.md b/components/pagination/demo/itemRender.md
index 279d92e537..cac0e5a734 100644
--- a/components/pagination/demo/itemRender.md
+++ b/components/pagination/demo/itemRender.md
@@ -19,13 +19,13 @@ import { Pagination } from 'antd';
 function itemRender(current, type, originalElement) {
   if (type === 'prev') {
     return <a>Previous</a>;
-  } else if (type === 'next') {
+  } if (type === 'next') {
     return <a>Next</a>;
   }
   return originalElement;
 }
 
 ReactDOM.render(
-  <Pagination total={500} itemRender={itemRender} />
-, mountNode);
+  <Pagination total={500} itemRender={itemRender} />,
+  mountNode);
 ````
diff --git a/components/pagination/demo/mini.md b/components/pagination/demo/mini.md
index 630965cdde..c5b7f24eed 100644
--- a/components/pagination/demo/mini.md
+++ b/components/pagination/demo/mini.md
@@ -25,8 +25,8 @@ ReactDOM.render(
     <Pagination size="small" total={50} />
     <Pagination size="small" total={50} showSizeChanger showQuickJumper />
     <Pagination size="small" total={50} showTotal={showTotal} />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 <style>
diff --git a/components/pagination/demo/more.md b/components/pagination/demo/more.md
index 9ce18c0053..7061b9658c 100644
--- a/components/pagination/demo/more.md
+++ b/components/pagination/demo/more.md
@@ -17,6 +17,6 @@ More pages.
 import { Pagination } from 'antd';
 
 ReactDOM.render(
-  <Pagination defaultCurrent={6} total={500} />
-, mountNode);
+  <Pagination defaultCurrent={6} total={500} />,
+  mountNode);
 ````
diff --git a/components/pagination/demo/simple.md b/components/pagination/demo/simple.md
index 290fd7efb3..af54df97a4 100644
--- a/components/pagination/demo/simple.md
+++ b/components/pagination/demo/simple.md
@@ -17,6 +17,6 @@ Simple mode.
 import { Pagination } from 'antd';
 
 ReactDOM.render(
-  <Pagination simple defaultCurrent={2} total={50} />
-, mountNode);
+  <Pagination simple defaultCurrent={2} total={50} />,
+  mountNode);
 ````
diff --git a/components/pagination/demo/total.md b/components/pagination/demo/total.md
index dabc370abf..d2d7bc53ad 100644
--- a/components/pagination/demo/total.md
+++ b/components/pagination/demo/total.md
@@ -31,6 +31,6 @@ ReactDOM.render(
       pageSize={20}
       defaultCurrent={1}
     />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/popconfirm/demo/basic.md b/components/popconfirm/demo/basic.md
index f95cd2ecab..f4231a759a 100755
--- a/components/popconfirm/demo/basic.md
+++ b/components/popconfirm/demo/basic.md
@@ -29,6 +29,6 @@ function cancel(e) {
 ReactDOM.render(
   <Popconfirm title="Are you sure delete this task?" onConfirm={confirm} onCancel={cancel} okText="Yes" cancelText="No">
     <a href="#">Delete</a>
-  </Popconfirm>
-, mountNode);
+  </Popconfirm>,
+  mountNode);
 ````
diff --git a/components/popconfirm/demo/dynamic-trigger.md b/components/popconfirm/demo/dynamic-trigger.md
index 25930cd372..0fc04d1cc0 100755
--- a/components/popconfirm/demo/dynamic-trigger.md
+++ b/components/popconfirm/demo/dynamic-trigger.md
@@ -21,17 +21,21 @@ class App extends React.Component {
     visible: false,
     condition: true, // Whether meet the condition, if not show popconfirm.
   }
+
   changeCondition = (value) => {
     this.setState({ condition: value });
   }
+
   confirm = () => {
     this.setState({ visible: false });
     message.success('Next step.');
   }
+
   cancel = () => {
     this.setState({ visible: false });
     message.error('Click on cancel.');
   }
+
   handleVisibleChange = (visible) => {
     if (!visible) {
       this.setState({ visible });
@@ -45,6 +49,7 @@ class App extends React.Component {
       this.setState({ visible }); // show the popconfirm
     }
   }
+
   render() {
     return (
       <div>
diff --git a/components/popconfirm/demo/locale.md b/components/popconfirm/demo/locale.md
index 52b5f3df9e..7cfe57a3a7 100755
--- a/components/popconfirm/demo/locale.md
+++ b/components/popconfirm/demo/locale.md
@@ -19,6 +19,6 @@ import { Popconfirm } from 'antd';
 ReactDOM.render(
   <Popconfirm title="Are you sure？" okText="Yes" cancelText="No">
     <a href="#">Delete</a>
-  </Popconfirm>
-, mountNode);
+  </Popconfirm>,
+  mountNode);
 ````
diff --git a/components/popconfirm/demo/placement.md b/components/popconfirm/demo/placement.md
index baa75a1dec..443917f5cc 100755
--- a/components/popconfirm/demo/placement.md
+++ b/components/popconfirm/demo/placement.md
@@ -68,8 +68,8 @@ ReactDOM.render(
         <Button>BR</Button>
       </Popconfirm>
     </div>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 <style>
diff --git a/components/popover/demo/arrow-point-at-center.md b/components/popover/demo/arrow-point-at-center.md
index 80df7d2c4e..f7fa148c6f 100644
--- a/components/popover/demo/arrow-point-at-center.md
+++ b/components/popover/demo/arrow-point-at-center.md
@@ -32,6 +32,6 @@ ReactDOM.render(
     <Popover placement="topLeft" title={text} content={content} arrowPointAtCenter>
       <Button>Arrow points to center / 箭头指向中心</Button>
     </Popover>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/popover/demo/basic.md b/components/popover/demo/basic.md
index 3873e51126..de7221dda4 100755
--- a/components/popover/demo/basic.md
+++ b/components/popover/demo/basic.md
@@ -26,8 +26,8 @@ const content = (
 ReactDOM.render(
   <Popover content={content} title="Title">
     <Button type="primary">Hover me</Button>
-  </Popover>
-, mountNode);
+  </Popover>,
+  mountNode);
 ````
 
 <style>
diff --git a/components/popover/demo/control.md b/components/popover/demo/control.md
index 9821a17d5c..a5e4acc541 100755
--- a/components/popover/demo/control.md
+++ b/components/popover/demo/control.md
@@ -20,14 +20,17 @@ class App extends React.Component {
   state = {
     visible: false,
   }
+
   hide = () => {
     this.setState({
       visible: false,
     });
   }
+
   handleVisibleChange = (visible) => {
     this.setState({ visible });
   }
+
   render() {
     return (
       <Popover
diff --git a/components/popover/demo/placement.md b/components/popover/demo/placement.md
index e480257ff6..da0440da47 100755
--- a/components/popover/demo/placement.md
+++ b/components/popover/demo/placement.md
@@ -72,8 +72,8 @@ ReactDOM.render(
         <Button>BR</Button>
       </Popover>
     </div>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 <style>
diff --git a/components/popover/demo/triggerType.md b/components/popover/demo/triggerType.md
index 0c07f86478..e339f11222 100755
--- a/components/popover/demo/triggerType.md
+++ b/components/popover/demo/triggerType.md
@@ -34,6 +34,6 @@ ReactDOM.render(
     <Popover content={content} title="Title" trigger="click">
       <Button>Click me</Button>
     </Popover>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/progress/demo/circle-dynamic.md b/components/progress/demo/circle-dynamic.md
index 5adebcdb9b..906e9d09bc 100644
--- a/components/progress/demo/circle-dynamic.md
+++ b/components/progress/demo/circle-dynamic.md
@@ -15,12 +15,14 @@ A dynamic progress bar is better.
 
 ````jsx
 import { Progress, Button } from 'antd';
+
 const ButtonGroup = Button.Group;
 
 class App extends React.Component {
   state = {
     percent: 0,
   }
+
   increase = () => {
     let percent = this.state.percent + 10;
     if (percent > 100) {
@@ -28,6 +30,7 @@ class App extends React.Component {
     }
     this.setState({ percent });
   }
+
   decline = () => {
     let percent = this.state.percent - 10;
     if (percent < 0) {
@@ -35,6 +38,7 @@ class App extends React.Component {
     }
     this.setState({ percent });
   }
+
   render() {
     return (
       <div>
diff --git a/components/progress/demo/circle-mini.md b/components/progress/demo/circle-mini.md
index 439c6c24ba..465ebbf83e 100644
--- a/components/progress/demo/circle-mini.md
+++ b/components/progress/demo/circle-mini.md
@@ -21,6 +21,6 @@ ReactDOM.render(
     <Progress type="circle" percent={30} width={80} />
     <Progress type="circle" percent={70} width={80} status="exception" />
     <Progress type="circle" percent={100} width={80} />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/progress/demo/circle.md b/components/progress/demo/circle.md
index 00f9b71c7c..0744d4c25f 100644
--- a/components/progress/demo/circle.md
+++ b/components/progress/demo/circle.md
@@ -21,8 +21,8 @@ ReactDOM.render(
     <Progress type="circle" percent={75} />
     <Progress type="circle" percent={70} status="exception" />
     <Progress type="circle" percent={100} />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 <style>
diff --git a/components/progress/demo/dynamic.md b/components/progress/demo/dynamic.md
index ef133dc18a..78cd62b1dd 100644
--- a/components/progress/demo/dynamic.md
+++ b/components/progress/demo/dynamic.md
@@ -15,12 +15,14 @@ A dynamic progress bar is better.
 
 ````jsx
 import { Progress, Button } from 'antd';
+
 const ButtonGroup = Button.Group;
 
 class App extends React.Component {
   state = {
     percent: 0,
   }
+
   increase = () => {
     let percent = this.state.percent + 10;
     if (percent > 100) {
@@ -28,6 +30,7 @@ class App extends React.Component {
     }
     this.setState({ percent });
   }
+
   decline = () => {
     let percent = this.state.percent - 10;
     if (percent < 0) {
@@ -35,6 +38,7 @@ class App extends React.Component {
     }
     this.setState({ percent });
   }
+
   render() {
     return (
       <div>
diff --git a/components/progress/demo/format.md b/components/progress/demo/format.md
index b22f124d03..ebbbcd0926 100644
--- a/components/progress/demo/format.md
+++ b/components/progress/demo/format.md
@@ -20,8 +20,8 @@ ReactDOM.render(
   <div>
     <Progress type="circle" percent={75} format={percent => `${percent} Days`} />
     <Progress type="circle" percent={100} format={() => 'Done'} />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 <style>
diff --git a/components/progress/demo/line-mini.md b/components/progress/demo/line-mini.md
index 9b7e6c0e19..b969f6bbb1 100644
--- a/components/progress/demo/line-mini.md
+++ b/components/progress/demo/line-mini.md
@@ -22,6 +22,6 @@ ReactDOM.render(
     <Progress percent={50} size="small" status="active" />
     <Progress percent={70} size="small" status="exception" />
     <Progress percent={100} size="small" />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/progress/demo/line.md b/components/progress/demo/line.md
index 1a64468433..d293bf01fa 100644
--- a/components/progress/demo/line.md
+++ b/components/progress/demo/line.md
@@ -23,6 +23,6 @@ ReactDOM.render(
     <Progress percent={70} status="exception" />
     <Progress percent={100} />
     <Progress percent={50} showInfo={false} />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/progress/demo/segment.md b/components/progress/demo/segment.md
index d6f490c21f..1b8dd87f66 100644
--- a/components/progress/demo/segment.md
+++ b/components/progress/demo/segment.md
@@ -19,6 +19,6 @@ import { Tooltip, Progress } from 'antd';
 ReactDOM.render(
   <Tooltip title="3 done / 3 in progress / 4 to do">
     <Progress percent={60} successPercent={30} />
-  </Tooltip>
-, mountNode);
+  </Tooltip>,
+  mountNode);
 ````
diff --git a/components/radio/demo/disable.md b/components/radio/demo/disable.md
index 8ca66c0386..6185735e4b 100644
--- a/components/radio/demo/disable.md
+++ b/components/radio/demo/disable.md
@@ -20,11 +20,13 @@ class App extends React.Component {
   state = {
     disabled: true,
   }
+
   toggleDisabled = () => {
     this.setState({
       disabled: !this.state.disabled,
     });
   }
+
   render() {
     return (
       <div>
diff --git a/components/radio/demo/radiobutton.md b/components/radio/demo/radiobutton.md
index a2cddcdb4c..5a905fdd51 100644
--- a/components/radio/demo/radiobutton.md
+++ b/components/radio/demo/radiobutton.md
@@ -15,6 +15,7 @@ The combination of radio button style.
 
 ```jsx
 import { Radio } from 'antd';
+
 const RadioButton = Radio.Button;
 const RadioGroup = Radio.Group;
 
@@ -48,6 +49,6 @@ ReactDOM.render(
         <RadioButton value="d">Chengdu</RadioButton>
       </RadioGroup>
     </div>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ```
diff --git a/components/radio/demo/radiogroup-more.md b/components/radio/demo/radiogroup-more.md
index 5389bacc06..05d65998a6 100644
--- a/components/radio/demo/radiogroup-more.md
+++ b/components/radio/demo/radiogroup-more.md
@@ -15,18 +15,21 @@ Vertical RadioGroup, with more radios.
 
 ```jsx
 import { Radio, Input } from 'antd';
+
 const RadioGroup = Radio.Group;
 
 class App extends React.Component {
   state = {
     value: 1,
   }
+
   onChange = (e) => {
     console.log('radio checked', e.target.value);
     this.setState({
       value: e.target.value,
     });
   }
+
   render() {
     const radioStyle = {
       display: 'block',
diff --git a/components/radio/demo/radiogroup-options.md b/components/radio/demo/radiogroup-options.md
index 65c0c76898..3490419277 100644
--- a/components/radio/demo/radiogroup-options.md
+++ b/components/radio/demo/radiogroup-options.md
@@ -19,6 +19,7 @@ Render radios by configuring `options`.
 
 ```jsx
 import { Radio } from 'antd';
+
 const RadioGroup = Radio.Group;
 
 const plainOptions = ['Apple', 'Pear', 'Orange'];
@@ -39,24 +40,28 @@ class App extends React.Component {
     value2: 'Apple',
     value3: 'Apple',
   }
+
   onChange1 = (e) => {
     console.log('radio1 checked', e.target.value);
     this.setState({
       value1: e.target.value,
     });
   }
+
   onChange2 = (e) => {
     console.log('radio2 checked', e.target.value);
     this.setState({
       value2: e.target.value,
     });
   }
+
   onChange3 = (e) => {
     console.log('radio3 checked', e.target.value);
     this.setState({
       value3: e.target.value,
     });
   }
+
   render() {
     return (
       <div>
diff --git a/components/radio/demo/radiogroup-with-name.md b/components/radio/demo/radiogroup-with-name.md
index 9d2a52000f..318977137b 100644
--- a/components/radio/demo/radiogroup-with-name.md
+++ b/components/radio/demo/radiogroup-with-name.md
@@ -15,6 +15,7 @@ Passing the `name` property to all `input[type="radio"]` that are in the same Ra
 
 ```jsx
 import { Radio } from 'antd';
+
 const RadioGroup = Radio.Group;
 
 function App() {
diff --git a/components/radio/demo/radiogroup.md b/components/radio/demo/radiogroup.md
index 2a26afacf5..c7acd86355 100644
--- a/components/radio/demo/radiogroup.md
+++ b/components/radio/demo/radiogroup.md
@@ -15,18 +15,21 @@ A group of radio components.
 
 ```jsx
 import { Radio } from 'antd';
+
 const RadioGroup = Radio.Group;
 
 class App extends React.Component {
   state = {
     value: 1,
   }
+
   onChange = (e) => {
     console.log('radio checked', e.target.value);
     this.setState({
       value: e.target.value,
     });
   }
+
   render() {
     return (
       <RadioGroup onChange={this.onChange} value={this.state.value}>
diff --git a/components/radio/demo/size.md b/components/radio/demo/size.md
index 5b88d4a7a1..563e2bef54 100644
--- a/components/radio/demo/size.md
+++ b/components/radio/demo/size.md
@@ -15,6 +15,7 @@ There are three sizes available: large, medium, and small. It can coordinate wit
 
 ```jsx
 import { Radio } from 'antd';
+
 const RadioButton = Radio.Button;
 const RadioGroup = Radio.Group;
 
@@ -44,6 +45,6 @@ ReactDOM.render(
         <RadioButton value="d">Chengdu</RadioButton>
       </RadioGroup>
     </div>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ```
diff --git a/components/rate/demo/character.md b/components/rate/demo/character.md
index 34e377c456..f97fbf9e65 100644
--- a/components/rate/demo/character.md
+++ b/components/rate/demo/character.md
@@ -23,6 +23,6 @@ ReactDOM.render(
     <Rate character="A" allowHalf style={{ fontSize: 36 }} />
     <br />
     <Rate character="好" allowHalf />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/rate/demo/clear.md b/components/rate/demo/clear.md
index a0e56b6c16..52645fdf2b 100644
--- a/components/rate/demo/clear.md
+++ b/components/rate/demo/clear.md
@@ -21,6 +21,6 @@ ReactDOM.render(
     <Rate defaultValue={3} /> allowClear: true
     <br />
     <Rate allowClear={false} defaultValue={3} /> allowClear: false
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/rate/demo/text.md b/components/rate/demo/text.md
index a1ba246bea..a4f31148e5 100644
--- a/components/rate/demo/text.md
+++ b/components/rate/demo/text.md
@@ -20,9 +20,11 @@ class Rater extends React.Component {
   state = {
     value: 3,
   }
+
   handleChange = (value) => {
     this.setState({ value });
   }
+
   render() {
     const { value } = this.state;
     return (
diff --git a/components/select/demo/automatic-tokenization.md b/components/select/demo/automatic-tokenization.md
index e56203663a..48e35d09b2 100644
--- a/components/select/demo/automatic-tokenization.md
+++ b/components/select/demo/automatic-tokenization.md
@@ -15,6 +15,7 @@ Try to copy `Lucy,Jack` to the input. Only available in tags and multiple mode.
 
 ````jsx
 import { Select } from 'antd';
+
 const Option = Select.Option;
 
 const children = [];
@@ -34,6 +35,6 @@ ReactDOM.render(
     tokenSeparators={[',']}
   >
     {children}
-  </Select>
-, mountNode);
+  </Select>,
+  mountNode);
 ````
diff --git a/components/select/demo/basic.md b/components/select/demo/basic.md
index 08911703ca..e487ea7efc 100644
--- a/components/select/demo/basic.md
+++ b/components/select/demo/basic.md
@@ -15,6 +15,7 @@ Basic Usage.
 
 ````jsx
 import { Select } from 'antd';
+
 const Option = Select.Option;
 
 function handleChange(value) {
@@ -32,6 +33,6 @@ ReactDOM.render(
     <Select defaultValue="lucy" style={{ width: 120 }} disabled>
       <Option value="lucy">Lucy</Option>
     </Select>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/select/demo/combobox.md b/components/select/demo/combobox.md
index 548c2ac4bb..3cffffc008 100644
--- a/components/select/demo/combobox.md
+++ b/components/select/demo/combobox.md
@@ -20,12 +20,14 @@ Using the [AutoComplete](/components/auto-complete/) component is strongly recom
 
 ````jsx
 import { Select } from 'antd';
+
 const Option = Select.Option;
 
 class App extends React.Component {
   state = {
     options: [],
   }
+
   handleChange = (value) => {
     let options;
     if (!value || value.indexOf('@') >= 0) {
@@ -38,6 +40,7 @@ class App extends React.Component {
     }
     this.setState({ options });
   }
+
   render() {
     // filterOption needs to be false，as the value is dynamically generated
     return (
diff --git a/components/select/demo/coordinate.md b/components/select/demo/coordinate.md
index 094b6f8d46..e11dbb5f91 100644
--- a/components/select/demo/coordinate.md
+++ b/components/select/demo/coordinate.md
@@ -20,6 +20,7 @@ Using the [Cascader](/components/cascader) component is strongly recommended ins
 
 ````jsx
 import { Select } from 'antd';
+
 const Option = Select.Option;
 
 const provinceData = ['Zhejiang', 'Jiangsu'];
@@ -33,17 +34,20 @@ class App extends React.Component {
     cities: cityData[provinceData[0]],
     secondCity: cityData[provinceData[0]][0],
   }
+
   handleProvinceChange = (value) => {
     this.setState({
       cities: cityData[value],
       secondCity: cityData[value][0],
     });
   }
+
   onSecondCityChange = (value) => {
     this.setState({
       secondCity: value,
     });
   }
+
   render() {
     const provinceOptions = provinceData.map(province => <Option key={province}>{province}</Option>);
     const cityOptions = this.state.cities.map(city => <Option key={city}>{city}</Option>);
diff --git a/components/select/demo/label-in-value.md b/components/select/demo/label-in-value.md
index b28b92d488..6e7984ac6e 100644
--- a/components/select/demo/label-in-value.md
+++ b/components/select/demo/label-in-value.md
@@ -19,6 +19,7 @@ The label of the selected item will be packed as an object for passing to the on
 
 ````jsx
 import { Select } from 'antd';
+
 const Option = Select.Option;
 
 function handleChange(value) {
@@ -29,6 +30,6 @@ ReactDOM.render(
   <Select labelInValue defaultValue={{ key: 'lucy' }} style={{ width: 120 }} onChange={handleChange}>
     <Option value="jack">Jack (100)</Option>
     <Option value="lucy">Lucy (101)</Option>
-  </Select>
-, mountNode);
+  </Select>,
+  mountNode);
 ````
diff --git a/components/select/demo/multiple.md b/components/select/demo/multiple.md
index 9cee4127c0..e9b29ba42e 100644
--- a/components/select/demo/multiple.md
+++ b/components/select/demo/multiple.md
@@ -15,6 +15,7 @@ Multiple selection, selecting from existing items (scroll the menu).
 
 ````jsx
 import { Select } from 'antd';
+
 const Option = Select.Option;
 
 const children = [];
@@ -35,6 +36,6 @@ ReactDOM.render(
     onChange={handleChange}
   >
     {children}
-  </Select>
-, mountNode);
+  </Select>,
+  mountNode);
 ````
diff --git a/components/select/demo/optgroup.md b/components/select/demo/optgroup.md
index 7437406d0b..638e034096 100644
--- a/components/select/demo/optgroup.md
+++ b/components/select/demo/optgroup.md
@@ -15,6 +15,7 @@ Using `OptGroup` to group the options.
 
 ````jsx
 import { Select } from 'antd';
+
 const { Option, OptGroup } = Select;
 
 function handleChange(value) {
@@ -34,6 +35,6 @@ ReactDOM.render(
     <OptGroup label="Engineer">
       <Option value="Yiminghe">yiminghe</Option>
     </OptGroup>
-  </Select>
-, mountNode);
+  </Select>,
+  mountNode);
 ````
diff --git a/components/select/demo/search-box.md b/components/select/demo/search-box.md
index dba8878bad..f2c2c2c482 100644
--- a/components/select/demo/search-box.md
+++ b/components/select/demo/search-box.md
@@ -17,6 +17,7 @@ Autocomplete with remote ajax data.
 import { Select } from 'antd';
 import jsonp from 'fetch-jsonp';
 import querystring from 'querystring';
+
 const Option = Select.Option;
 
 let timeout;
@@ -59,10 +60,12 @@ class SearchInput extends React.Component {
     data: [],
     value: '',
   }
+
   handleChange = (value) => {
     this.setState({ value });
     fetch(value, data => this.setState({ data }));
   }
+
   render() {
     const options = this.state.data.map(d => <Option key={d.value}>{d.text}</Option>);
     return (
@@ -83,6 +86,6 @@ class SearchInput extends React.Component {
 }
 
 ReactDOM.render(
-  <SearchInput placeholder="input search text" style={{ width: 200 }} />
-, mountNode);
+  <SearchInput placeholder="input search text" style={{ width: 200 }} />,
+  mountNode);
 ````
diff --git a/components/select/demo/search.md b/components/select/demo/search.md
index 177f561600..f18280cb84 100644
--- a/components/select/demo/search.md
+++ b/components/select/demo/search.md
@@ -15,6 +15,7 @@ Search the options while expanded.
 
 ````jsx
 import { Select } from 'antd';
+
 const Option = Select.Option;
 
 function handleChange(value) {
@@ -43,6 +44,6 @@ ReactDOM.render(
     <Option value="jack">Jack</Option>
     <Option value="lucy">Lucy</Option>
     <Option value="tom">Tom</Option>
-  </Select>
-, mountNode);
+  </Select>,
+  mountNode);
 ````
diff --git a/components/select/demo/select-users.md b/components/select/demo/select-users.md
index c901a58167..4f08df2bbe 100644
--- a/components/select/demo/select-users.md
+++ b/components/select/demo/select-users.md
@@ -16,6 +16,7 @@ A complete multiple select sample with remote search, debounce fetch, ajax callb
 ````jsx
 import { Select, Spin } from 'antd';
 import debounce from 'lodash/debounce';
+
 const Option = Select.Option;
 
 class UserRemoteSelect extends React.Component {
@@ -24,11 +25,13 @@ class UserRemoteSelect extends React.Component {
     this.lastFetchId = 0;
     this.fetchUser = debounce(this.fetchUser, 800);
   }
+
   state = {
     data: [],
     value: [],
     fetching: false,
   }
+
   fetchUser = (value) => {
     console.log('fetching user', value);
     this.lastFetchId += 1;
@@ -47,6 +50,7 @@ class UserRemoteSelect extends React.Component {
         this.setState({ data, fetching: false });
       });
   }
+
   handleChange = (value) => {
     this.setState({
       value,
@@ -54,6 +58,7 @@ class UserRemoteSelect extends React.Component {
       fetching: false,
     });
   }
+
   render() {
     const { fetching, data, value } = this.state;
     return (
diff --git a/components/select/demo/size.md b/components/select/demo/size.md
index 97ed118fd1..d40c3599a6 100644
--- a/components/select/demo/size.md
+++ b/components/select/demo/size.md
@@ -15,6 +15,7 @@ The height of the input field for the select defaults to 32px. If size is set to
 
 ````jsx
 import { Select, Radio } from 'antd';
+
 const Option = Select.Option;
 
 const children = [];
diff --git a/components/select/demo/tags.md b/components/select/demo/tags.md
index 5f7dedbe29..7cdae9f1e1 100644
--- a/components/select/demo/tags.md
+++ b/components/select/demo/tags.md
@@ -15,6 +15,7 @@ Select with tags, transform input to tag (scroll the menu)
 
 ````jsx
 import { Select } from 'antd';
+
 const Option = Select.Option;
 
 const children = [];
@@ -34,6 +35,6 @@ ReactDOM.render(
     onChange={handleChange}
   >
     {children}
-  </Select>
-, mountNode);
+  </Select>,
+  mountNode);
 ````
diff --git a/components/slider/demo/basic.md b/components/slider/demo/basic.md
index e0aaeda6ce..501461f29f 100644
--- a/components/slider/demo/basic.md
+++ b/components/slider/demo/basic.md
@@ -20,9 +20,11 @@ class Demo extends React.Component {
   state = {
     disabled: false,
   };
+
   handleDisabledChange = (disabled) => {
     this.setState({ disabled });
   }
+
   render() {
     const { disabled } = this.state;
     return (
diff --git a/components/slider/demo/icon-slider.md b/components/slider/demo/icon-slider.md
index 85dd86469c..edf5071831 100644
--- a/components/slider/demo/icon-slider.md
+++ b/components/slider/demo/icon-slider.md
@@ -20,9 +20,11 @@ class IconSlider extends React.Component {
   state = {
     value: 0,
   }
+
   handleChange = (value) => {
     this.setState({ value });
   }
+
   render() {
     const { max, min } = this.props;
     const { value } = this.state;
diff --git a/components/slider/demo/input-number.md b/components/slider/demo/input-number.md
index 50f2869f79..484fb8f14c 100644
--- a/components/slider/demo/input-number.md
+++ b/components/slider/demo/input-number.md
@@ -20,11 +20,13 @@ class IntegerStep extends React.Component {
   state = {
     inputValue: 1,
   }
+
   onChange = (value) => {
     this.setState({
       inputValue: value,
     });
   }
+
   render() {
     return (
       <Row>
@@ -49,11 +51,13 @@ class DecimalStep extends React.Component {
   state = {
     inputValue: 0,
   }
+
   onChange = (value) => {
     this.setState({
       inputValue: value,
     });
   }
+
   render() {
     return (
       <Row>
@@ -79,6 +83,6 @@ ReactDOM.render(
   <div>
     <IntegerStep />
     <DecimalStep />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/slider/demo/mark.md b/components/slider/demo/mark.md
index bbccc59355..c871a2ef7c 100644
--- a/components/slider/demo/mark.md
+++ b/components/slider/demo/mark.md
@@ -45,8 +45,8 @@ ReactDOM.render(
 
     <h4>step=null</h4>
     <Slider marks={marks} step={null} defaultValue={37} />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 <style>
diff --git a/components/spin/demo/delayAndDebounce.md b/components/spin/demo/delayAndDebounce.md
index 3eb3295619..3323c98c9b 100644
--- a/components/spin/demo/delayAndDebounce.md
+++ b/components/spin/demo/delayAndDebounce.md
@@ -18,9 +18,11 @@ import { Spin, Alert, Switch } from 'antd';
 
 class Card extends React.Component {
   state = { loading: false }
+
   toggle = (value) => {
     this.setState({ loading: value });
   }
+
   render() {
     const container = (
       <Alert
@@ -31,7 +33,7 @@ class Card extends React.Component {
     );
     return (
       <div>
-        <Spin spinning={this.state.loading} delay={500} >{container}</Spin>
+        <Spin spinning={this.state.loading} delay={500}>{container}</Spin>
         <div style={{ marginTop: 16 }}>
           Loading state：<Switch checked={this.state.loading} onChange={this.toggle} />
         </div>
diff --git a/components/spin/demo/inside.md b/components/spin/demo/inside.md
index 1472777702..b0094d5b8f 100644
--- a/components/spin/demo/inside.md
+++ b/components/spin/demo/inside.md
@@ -19,8 +19,8 @@ import { Spin } from 'antd';
 ReactDOM.render(
   <div className="example">
     <Spin />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 ````css
diff --git a/components/spin/demo/nested.md b/components/spin/demo/nested.md
index 64b75dfec3..5f64bebdd0 100644
--- a/components/spin/demo/nested.md
+++ b/components/spin/demo/nested.md
@@ -18,9 +18,11 @@ import { Spin, Switch, Alert } from 'antd';
 
 class Card extends React.Component {
   state = { loading: false }
+
   toggle = (value) => {
     this.setState({ loading: value });
   }
+
   render() {
     return (
       <div>
diff --git a/components/spin/demo/size.md b/components/spin/demo/size.md
index b59dda1f62..70b9774057 100644
--- a/components/spin/demo/size.md
+++ b/components/spin/demo/size.md
@@ -21,8 +21,8 @@ ReactDOM.render(
     <Spin size="small" />
     <Spin />
     <Spin size="large" />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 <style>
diff --git a/components/spin/demo/tip.md b/components/spin/demo/tip.md
index 517b58603e..4f10610b23 100644
--- a/components/spin/demo/tip.md
+++ b/components/spin/demo/tip.md
@@ -23,6 +23,6 @@ ReactDOM.render(
       description="Further details about the context of this alert."
       type="info"
     />
-  </Spin>
-, mountNode);
+  </Spin>,
+  mountNode);
 ````
diff --git a/components/steps/demo/customized-progress-dot.md b/components/steps/demo/customized-progress-dot.md
index 6f3e272c65..07edd6094c 100644
--- a/components/steps/demo/customized-progress-dot.md
+++ b/components/steps/demo/customized-progress-dot.md
@@ -15,6 +15,7 @@ You can customize the display for Steps with progress dot style.
 
 ````jsx
 import { Steps, Popover } from 'antd';
+
 const Step = Steps.Step;
 
 const customDot = (dot, { status, index }) => (
@@ -29,6 +30,6 @@ ReactDOM.render(
     <Step title="In Progress" description="You can hover on the dot." />
     <Step title="Waiting" description="You can hover on the dot." />
     <Step title="Waiting" description="You can hover on the dot." />
-  </Steps>
-, mountNode);
+  </Steps>,
+  mountNode);
 ````
diff --git a/components/steps/demo/error.md b/components/steps/demo/error.md
index eb75d968a1..75e3fab7ca 100644
--- a/components/steps/demo/error.md
+++ b/components/steps/demo/error.md
@@ -15,6 +15,7 @@ By using `status` of `Steps`, you can specify the state for current step.
 
 ````jsx
 import { Steps } from 'antd';
+
 const Step = Steps.Step;
 
 ReactDOM.render(
@@ -22,6 +23,6 @@ ReactDOM.render(
     <Step title="Finished" description="This is a description" />
     <Step title="In Process" description="This is a description" />
     <Step title="Waiting" description="This is a description" />
-  </Steps>
-, mountNode);
+  </Steps>,
+  mountNode);
 ````
diff --git a/components/steps/demo/icon.md b/components/steps/demo/icon.md
index 1a9b6e5cef..7f237e2e4a 100644
--- a/components/steps/demo/icon.md
+++ b/components/steps/demo/icon.md
@@ -15,6 +15,7 @@ You can use your own custom icons by setting the property `icon` for `Steps.Step
 
 ````jsx
 import { Steps, Icon } from 'antd';
+
 const Step = Steps.Step;
 
 ReactDOM.render(
@@ -23,6 +24,6 @@ ReactDOM.render(
     <Step status="finish" title="Verification" icon={<Icon type="solution" />} />
     <Step status="process" title="Pay" icon={<Icon type="loading" />} />
     <Step status="wait" title="Done" icon={<Icon type="smile-o" />} />
-  </Steps>
-, mountNode);
+  </Steps>,
+  mountNode);
 ````
diff --git a/components/steps/demo/progress-dot.md b/components/steps/demo/progress-dot.md
index b2b9f2e48f..9a650d74eb 100644
--- a/components/steps/demo/progress-dot.md
+++ b/components/steps/demo/progress-dot.md
@@ -15,6 +15,7 @@ Steps with progress dot style.
 
 ````jsx
 import { Steps } from 'antd';
+
 const Step = Steps.Step;
 
 ReactDOM.render(
@@ -22,6 +23,6 @@ ReactDOM.render(
     <Step title="Finished" description="This is a description." />
     <Step title="In Progress" description="This is a description." />
     <Step title="Waiting" description="This is a description." />
-  </Steps>
-, mountNode);
+  </Steps>,
+  mountNode);
 ````
diff --git a/components/steps/demo/simple.md b/components/steps/demo/simple.md
index eddab28929..f756e9fc10 100644
--- a/components/steps/demo/simple.md
+++ b/components/steps/demo/simple.md
@@ -15,6 +15,7 @@ The most basic step bar.
 
 ````jsx
 import { Steps } from 'antd';
+
 const Step = Steps.Step;
 
 ReactDOM.render(
@@ -22,6 +23,6 @@ ReactDOM.render(
     <Step title="Finished" description="This is a description." />
     <Step title="In Progress" description="This is a description." />
     <Step title="Waiting" description="This is a description." />
-  </Steps>
-, mountNode);
+  </Steps>,
+  mountNode);
 ````
diff --git a/components/steps/demo/small-size.md b/components/steps/demo/small-size.md
index abecad0e19..fc60dc63cb 100644
--- a/components/steps/demo/small-size.md
+++ b/components/steps/demo/small-size.md
@@ -15,6 +15,7 @@ By setting like this: `<Steps size="small">`, you can get a mini version.
 
 ````jsx
 import { Steps } from 'antd';
+
 const Step = Steps.Step;
 
 ReactDOM.render(
@@ -22,6 +23,6 @@ ReactDOM.render(
     <Step title="Finished" />
     <Step title="In Progress" />
     <Step title="Waiting" />
-  </Steps>
-, mountNode);
+  </Steps>,
+  mountNode);
 ````
diff --git a/components/steps/demo/step-next.md b/components/steps/demo/step-next.md
index 7c37daefa4..e6e0aca699 100644
--- a/components/steps/demo/step-next.md
+++ b/components/steps/demo/step-next.md
@@ -15,6 +15,7 @@ Cooperate with the content and buttons, to represent the progress of a process.
 
 ````jsx
 import { Steps, Button, message } from 'antd';
+
 const Step = Steps.Step;
 
 const steps = [{
@@ -35,14 +36,17 @@ class App extends React.Component {
       current: 0,
     };
   }
+
   next() {
     const current = this.state.current + 1;
     this.setState({ current });
   }
+
   prev() {
     const current = this.state.current - 1;
     this.setState({ current });
   }
+
   render() {
     const { current } = this.state;
     return (
@@ -54,20 +58,19 @@ class App extends React.Component {
         <div className="steps-action">
           {
             current < steps.length - 1
-            &&
-            <Button type="primary" onClick={() => this.next()}>Next</Button>
+            && <Button type="primary" onClick={() => this.next()}>Next</Button>
           }
           {
             current === steps.length - 1
-            &&
-            <Button type="primary" onClick={() => message.success('Processing complete!')}>Done</Button>
+            && <Button type="primary" onClick={() => message.success('Processing complete!')}>Done</Button>
           }
           {
             current > 0
-            &&
+            && (
             <Button style={{ marginLeft: 8 }} onClick={() => this.prev()}>
               Previous
             </Button>
+            )
           }
         </div>
       </div>
diff --git a/components/steps/demo/vertical-small.md b/components/steps/demo/vertical-small.md
index 8446d52dd7..dea0979b34 100644
--- a/components/steps/demo/vertical-small.md
+++ b/components/steps/demo/vertical-small.md
@@ -15,6 +15,7 @@ A simple mini version step bar in the vertical direction.
 
 ````jsx
 import { Steps } from 'antd';
+
 const Step = Steps.Step;
 
 ReactDOM.render(
@@ -22,6 +23,6 @@ ReactDOM.render(
     <Step title="Finished" description="This is a description." />
     <Step title="In Progress" description="This is a description." />
     <Step title="Waiting" description="This is a description." />
-  </Steps>
-, mountNode);
+  </Steps>,
+  mountNode);
 ````
diff --git a/components/steps/demo/vertical.md b/components/steps/demo/vertical.md
index 36f85f7354..f2eff1e4e0 100644
--- a/components/steps/demo/vertical.md
+++ b/components/steps/demo/vertical.md
@@ -15,6 +15,7 @@ A simple step bar in the vertical direction.
 
 ````jsx
 import { Steps } from 'antd';
+
 const Step = Steps.Step;
 
 ReactDOM.render(
@@ -22,6 +23,6 @@ ReactDOM.render(
     <Step title="Finished" description="This is a description." />
     <Step title="In Progress" description="This is a description." />
     <Step title="Waiting" description="This is a description." />
-  </Steps>
-, mountNode);
+  </Steps>,
+  mountNode);
 ````
diff --git a/components/switch/demo/disabled.md b/components/switch/demo/disabled.md
index f26d08f772..7930e1ccc4 100644
--- a/components/switch/demo/disabled.md
+++ b/components/switch/demo/disabled.md
@@ -20,11 +20,13 @@ class App extends React.Component {
   state = {
     disabled: true,
   }
+
   toggle = () => {
     this.setState({
       disabled: !this.state.disabled,
     });
   }
+
   render() {
     return (
       <div>
diff --git a/components/switch/demo/loading.md b/components/switch/demo/loading.md
index 29bf77b47b..ab18499cb1 100644
--- a/components/switch/demo/loading.md
+++ b/components/switch/demo/loading.md
@@ -21,6 +21,6 @@ ReactDOM.render(
     <Switch loading defaultChecked />
     <br />
     <Switch size="small" loading />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/switch/demo/size.md b/components/switch/demo/size.md
index 49a1f58618..cf86542411 100644
--- a/components/switch/demo/size.md
+++ b/components/switch/demo/size.md
@@ -21,6 +21,6 @@ ReactDOM.render(
     <Switch defaultChecked />
     <br />
     <Switch size="small" defaultChecked />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/switch/demo/text.md b/components/switch/demo/text.md
index 53df8dff09..91cfc64255 100644
--- a/components/switch/demo/text.md
+++ b/components/switch/demo/text.md
@@ -23,6 +23,6 @@ ReactDOM.render(
     <Switch checkedChildren="1" unCheckedChildren="0" />
     <br />
     <Switch checkedChildren={<Icon type="check" />} unCheckedChildren={<Icon type="cross" />} defaultChecked />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/table/demo/ajax.md b/components/table/demo/ajax.md
index 0c9eb08b14..354166e3ac 100644
--- a/components/table/demo/ajax.md
+++ b/components/table/demo/ajax.md
@@ -48,6 +48,7 @@ class App extends React.Component {
     pagination: {},
     loading: false,
   };
+
   handleTableChange = (pagination, filters, sorter) => {
     const pager = { ...this.state.pagination };
     pager.current = pagination.current;
@@ -62,6 +63,7 @@ class App extends React.Component {
       ...filters,
     });
   }
+
   fetch = (params = {}) => {
     console.log('params:', params);
     this.setState({ loading: true });
@@ -85,9 +87,11 @@ class App extends React.Component {
       });
     });
   }
+
   componentDidMount() {
     this.fetch();
   }
+
   render() {
     return (
       <Table
diff --git a/components/table/demo/bordered.md b/components/table/demo/bordered.md
index 7aac4c2eb8..76107d6470 100644
--- a/components/table/demo/bordered.md
+++ b/components/table/demo/bordered.md
@@ -53,8 +53,8 @@ ReactDOM.render(
     bordered
     title={() => 'Header'}
     footer={() => 'Footer'}
-  />
-, mountNode);
+  />,
+  mountNode);
 ````
 
 ````css
diff --git a/components/table/demo/colspan-rowspan.md b/components/table/demo/colspan-rowspan.md
index f290d14cd8..354ad0d11a 100644
--- a/components/table/demo/colspan-rowspan.md
+++ b/components/table/demo/colspan-rowspan.md
@@ -120,6 +120,6 @@ const data = [{
   address: 'Dublin No. 2 Lake Park',
 }];
 
-ReactDOM.render(<Table columns={columns} dataSource={data} bordered />
-, mountNode);
+ReactDOM.render(<Table columns={columns} dataSource={data} bordered />,
+  mountNode);
 ````
diff --git a/components/table/demo/custom-filter-panel.md b/components/table/demo/custom-filter-panel.md
index 545995a5f9..22c9721139 100644
--- a/components/table/demo/custom-filter-panel.md
+++ b/components/table/demo/custom-filter-panel.md
@@ -45,9 +45,11 @@ class App extends React.Component {
     searchText: '',
     filtered: false,
   };
+
   onInputChange = (e) => {
     this.setState({ searchText: e.target.value });
   }
+
   onSearch = () => {
     const { searchText } = this.state;
     const reg = new RegExp(searchText, 'gi');
@@ -64,8 +66,8 @@ class App extends React.Component {
           name: (
             <span>
               {record.name.split(new RegExp(`(?<=${searchText})|(?=${searchText})`, 'i')).map((text, i) => (
-                text.toLowerCase() === searchText.toLowerCase() ?
-                  <span key={i} className="highlight">{text}</span> : text // eslint-disable-line
+                text.toLowerCase() === searchText.toLowerCase()
+                  ? <span key={i} className="highlight">{text}</span> : text // eslint-disable-line
               ))}
             </span>
           ),
@@ -73,6 +75,7 @@ class App extends React.Component {
       }).filter(record => !!record),
     });
   }
+
   render() {
     const columns = [{
       title: 'Name',
diff --git a/components/table/demo/dynamic-settings.md b/components/table/demo/dynamic-settings.md
index a0393c5c0d..6b89e24516 100644
--- a/components/table/demo/dynamic-settings.md
+++ b/components/table/demo/dynamic-settings.md
@@ -15,6 +15,7 @@ Select different settings to see the result.
 
 ````jsx
 import { Table, Icon, Switch, Radio, Form, Divider } from 'antd';
+
 const FormItem = Form.Item;
 
 const columns = [{
diff --git a/components/table/demo/edit-cell.md b/components/table/demo/edit-cell.md
index 00aff18c00..35be8c7459 100644
--- a/components/table/demo/edit-cell.md
+++ b/components/table/demo/edit-cell.md
@@ -21,19 +21,23 @@ class EditableCell extends React.Component {
     value: this.props.value,
     editable: false,
   }
+
   handleChange = (e) => {
     const value = e.target.value;
     this.setState({ value });
   }
+
   check = () => {
     this.setState({ editable: false });
     if (this.props.onChange) {
       this.props.onChange(this.state.value);
     }
   }
+
   edit = () => {
     this.setState({ editable: true });
   }
+
   render() {
     const { value, editable } = this.state;
     return (
@@ -44,13 +48,13 @@ class EditableCell extends React.Component {
               value={value}
               onChange={this.handleChange}
               onPressEnter={this.check}
-              suffix={
+              suffix={(
                 <Icon
                   type="check"
                   className="editable-cell-icon-check"
                   onClick={this.check}
                 />
-              }
+)}
             />
           ) : (
             <div style={{ paddingRight: 24 }}>
@@ -92,12 +96,12 @@ class EditableTable extends React.Component {
       dataIndex: 'operation',
       render: (text, record) => {
         return (
-          this.state.dataSource.length > 1 ?
-          (
-            <Popconfirm title="Sure to delete?" onConfirm={() => this.onDelete(record.key)}>
-              <a href="javascript:;">Delete</a>
-            </Popconfirm>
-          ) : null
+          this.state.dataSource.length > 1
+            ? (
+              <Popconfirm title="Sure to delete?" onConfirm={() => this.onDelete(record.key)}>
+                <a href="javascript:;">Delete</a>
+              </Popconfirm>
+            ) : null
         );
       },
     }];
@@ -117,6 +121,7 @@ class EditableTable extends React.Component {
       count: 2,
     };
   }
+
   onCellChange = (key, dataIndex) => {
     return (value) => {
       const dataSource = [...this.state.dataSource];
@@ -127,10 +132,12 @@ class EditableTable extends React.Component {
       }
     };
   }
+
   onDelete = (key) => {
     const dataSource = [...this.state.dataSource];
     this.setState({ dataSource: dataSource.filter(item => item.key !== key) });
   }
+
   handleAdd = () => {
     const { count, dataSource } = this.state;
     const newData = {
@@ -144,6 +151,7 @@ class EditableTable extends React.Component {
       count: count + 1,
     });
   }
+
   render() {
     const { dataSource } = this.state;
     const columns = this.columns;
diff --git a/components/table/demo/edit-row.md b/components/table/demo/edit-row.md
index 8ee8205c6b..8d28dc0d24 100644
--- a/components/table/demo/edit-row.md
+++ b/components/table/demo/edit-row.md
@@ -43,6 +43,7 @@ class EditableCell extends React.Component {
     }
     return <Input />;
   };
+
   render() {
     const {
       editing,
@@ -137,12 +138,15 @@ class EditableTable extends React.Component {
       },
     ];
   }
+
   isEditing = (record) => {
     return record.key === this.state.editingKey;
   };
+
   edit(key) {
     this.setState({ editingKey: key });
   }
+
   save(form, key) {
     form.validateFields((error, row) => {
       if (error) {
@@ -163,9 +167,11 @@ class EditableTable extends React.Component {
       }
     });
   }
+
   cancel = () => {
     this.setState({ editingKey: '' });
   };
+
   render() {
     const components = {
       body: {
diff --git a/components/table/demo/expand-children.md b/components/table/demo/expand-children.md
index 5be096e4d5..2ae24d9ade 100644
--- a/components/table/demo/expand-children.md
+++ b/components/table/demo/expand-children.md
@@ -101,6 +101,6 @@ const rowSelection = {
 };
 
 ReactDOM.render(
-  <Table columns={columns} rowSelection={rowSelection} dataSource={data} />
-, mountNode);
+  <Table columns={columns} rowSelection={rowSelection} dataSource={data} />,
+  mountNode);
 ````
diff --git a/components/table/demo/expand.md b/components/table/demo/expand.md
index f73ad8e9d6..22b3a75586 100644
--- a/components/table/demo/expand.md
+++ b/components/table/demo/expand.md
@@ -34,6 +34,6 @@ ReactDOM.render(
     columns={columns}
     expandedRowRender={record => <p style={{ margin: 0 }}>{record.description}</p>}
     dataSource={data}
-  />
-, mountNode);
+  />,
+  mountNode);
 ````
diff --git a/components/table/demo/fixed-header.md b/components/table/demo/fixed-header.md
index 5b02f7c617..290d9f65ae 100644
--- a/components/table/demo/fixed-header.md
+++ b/components/table/demo/fixed-header.md
@@ -44,6 +44,6 @@ for (let i = 0; i < 100; i++) {
 }
 
 ReactDOM.render(
-  <Table columns={columns} dataSource={data} pagination={{ pageSize: 50 }} scroll={{ y: 240 }} />
-, mountNode);
+  <Table columns={columns} dataSource={data} pagination={{ pageSize: 50 }} scroll={{ y: 240 }} />,
+  mountNode);
 ````
diff --git a/components/table/demo/grouping-columns.md b/components/table/demo/grouping-columns.md
index 3396195fc4..fda7560fb2 100644
--- a/components/table/demo/grouping-columns.md
+++ b/components/table/demo/grouping-columns.md
@@ -101,6 +101,6 @@ ReactDOM.render(
     bordered
     size="middle"
     scroll={{ x: '130%', y: 240 }}
-  />
-, mountNode);
+  />,
+  mountNode);
 ```
diff --git a/components/table/demo/head.md b/components/table/demo/head.md
index 71e9a69c53..9c8a2235a2 100644
--- a/components/table/demo/head.md
+++ b/components/table/demo/head.md
@@ -97,6 +97,6 @@ function onChange(pagination, filters, sorter) {
 }
 
 ReactDOM.render(
-  <Table columns={columns} dataSource={data} onChange={onChange} />
-, mountNode);
+  <Table columns={columns} dataSource={data} onChange={onChange} />,
+  mountNode);
 ````
diff --git a/components/table/demo/jsx.md b/components/table/demo/jsx.md
index 08dfaa92ba..c8d0ad5f82 100644
--- a/components/table/demo/jsx.md
+++ b/components/table/demo/jsx.md
@@ -81,6 +81,6 @@ ReactDOM.render(
         </span>
       )}
     />
-  </Table>
-, mountNode);
+  </Table>,
+  mountNode);
 ````
diff --git a/components/table/demo/reset-filter.md b/components/table/demo/reset-filter.md
index bef89cbd79..515e7e91ac 100644
--- a/components/table/demo/reset-filter.md
+++ b/components/table/demo/reset-filter.md
@@ -51,6 +51,7 @@ class App extends React.Component {
     filteredInfo: null,
     sortedInfo: null,
   };
+
   handleChange = (pagination, filters, sorter) => {
     console.log('Various parameters', pagination, filters, sorter);
     this.setState({
@@ -58,15 +59,18 @@ class App extends React.Component {
       sortedInfo: sorter,
     });
   }
+
   clearFilters = () => {
     this.setState({ filteredInfo: null });
   }
+
   clearAll = () => {
     this.setState({
       filteredInfo: null,
       sortedInfo: null,
     });
   }
+
   setAgeSort = () => {
     this.setState({
       sortedInfo: {
@@ -75,6 +79,7 @@ class App extends React.Component {
       },
     });
   }
+
   render() {
     let { sortedInfo, filteredInfo } = this.state;
     sortedInfo = sortedInfo || {};
diff --git a/components/table/demo/row-selection-and-operation.md b/components/table/demo/row-selection-and-operation.md
index 3dfaef7da8..1657eb0986 100644
--- a/components/table/demo/row-selection-and-operation.md
+++ b/components/table/demo/row-selection-and-operation.md
@@ -43,6 +43,7 @@ class App extends React.Component {
     selectedRowKeys: [], // Check here to configure the default column
     loading: false,
   };
+
   start = () => {
     this.setState({ loading: true });
     // ajax request after empty completing
@@ -53,10 +54,12 @@ class App extends React.Component {
       });
     }, 1000);
   }
+
   onSelectChange = (selectedRowKeys) => {
     console.log('selectedRowKeys changed: ', selectedRowKeys);
     this.setState({ selectedRowKeys });
   }
+
   render() {
     const { loading, selectedRowKeys } = this.state;
     const rowSelection = {
diff --git a/components/table/demo/row-selection-custom.md b/components/table/demo/row-selection-custom.md
index b4e3cea9c9..308676b8cf 100644
--- a/components/table/demo/row-selection-custom.md
+++ b/components/table/demo/row-selection-custom.md
@@ -42,10 +42,12 @@ class App extends React.Component {
   state = {
     selectedRowKeys: [], // Check here to configure the default column
   };
+
   onSelectChange = (selectedRowKeys) => {
     console.log('selectedRowKeys changed: ', selectedRowKeys);
     this.setState({ selectedRowKeys });
   }
+
   render() {
     const { selectedRowKeys } = this.state;
     const rowSelection = {
diff --git a/components/table/demo/row-selection.md b/components/table/demo/row-selection.md
index 7a384f6be4..f6260aab47 100644
--- a/components/table/demo/row-selection.md
+++ b/components/table/demo/row-selection.md
@@ -65,6 +65,6 @@ const rowSelection = {
 };
 
 ReactDOM.render(
-  <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
-, mountNode);
+  <Table rowSelection={rowSelection} columns={columns} dataSource={data} />,
+  mountNode);
 ````
diff --git a/components/table/demo/size.md b/components/table/demo/size.md
index 44bd495347..9cce25a65e 100644
--- a/components/table/demo/size.md
+++ b/components/table/demo/size.md
@@ -49,8 +49,8 @@ ReactDOM.render(
     <Table columns={columns} dataSource={data} size="middle" />
     <h4>Small size table</h4>
     <Table columns={columns} dataSource={data} size="small" />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 <style>#components-table-demo-size h4 { margin-bottom: 16px; }</style>
diff --git a/components/tabs/demo/basic.md b/components/tabs/demo/basic.md
index 2862b961ed..11cc076da5 100644
--- a/components/tabs/demo/basic.md
+++ b/components/tabs/demo/basic.md
@@ -15,6 +15,7 @@ Default activate first tab.
 
 ````jsx
 import { Tabs } from 'antd';
+
 const TabPane = Tabs.TabPane;
 
 function callback(key) {
@@ -26,6 +27,6 @@ ReactDOM.render(
     <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
     <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
     <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
-  </Tabs>
-, mountNode);
+  </Tabs>,
+  mountNode);
 ````
diff --git a/components/tabs/demo/card-top.md b/components/tabs/demo/card-top.md
index aa7c28ff0a..b8cee684de 100644
--- a/components/tabs/demo/card-top.md
+++ b/components/tabs/demo/card-top.md
@@ -15,6 +15,7 @@ Should be used at the top of container, needs to override styles.
 
 ````jsx
 import { Tabs } from 'antd';
+
 const TabPane = Tabs.TabPane;
 
 ReactDOM.render(
@@ -36,8 +37,8 @@ ReactDOM.render(
         <p>Content of Tab Pane 3</p>
       </TabPane>
     </Tabs>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 ````css
diff --git a/components/tabs/demo/card.md b/components/tabs/demo/card.md
index debed6cb1c..51ce1676d1 100644
--- a/components/tabs/demo/card.md
+++ b/components/tabs/demo/card.md
@@ -16,6 +16,7 @@ Another type Tabs, which doesn't support vertical mode.
 
 ````jsx
 import { Tabs } from 'antd';
+
 const TabPane = Tabs.TabPane;
 
 function callback(key) {
@@ -27,6 +28,6 @@ ReactDOM.render(
     <TabPane tab="Tab 1" key="1">Content of Tab Pane 1</TabPane>
     <TabPane tab="Tab 2" key="2">Content of Tab Pane 2</TabPane>
     <TabPane tab="Tab 3" key="3">Content of Tab Pane 3</TabPane>
-  </Tabs>
-, mountNode);
+  </Tabs>,
+  mountNode);
 ````
diff --git a/components/tabs/demo/custom-add-trigger.md b/components/tabs/demo/custom-add-trigger.md
index 46c9b76853..e9313b0440 100644
--- a/components/tabs/demo/custom-add-trigger.md
+++ b/components/tabs/demo/custom-add-trigger.md
@@ -15,6 +15,7 @@ Hide default plus icon, and bind event for customized trigger.
 
 ````jsx
 import { Tabs, Button } from 'antd';
+
 const TabPane = Tabs.TabPane;
 
 class Demo extends React.Component {
@@ -34,15 +35,18 @@ class Demo extends React.Component {
   onChange = (activeKey) => {
     this.setState({ activeKey });
   }
+
   onEdit = (targetKey, action) => {
     this[action](targetKey);
   }
+
   add = () => {
     const panes = this.state.panes;
     const activeKey = `newTab${this.newTabIndex++}`;
     panes.push({ title: 'New Tab', content: 'New Tab Pane', key: activeKey });
     this.setState({ panes, activeKey });
   }
+
   remove = (targetKey) => {
     let activeKey = this.state.activeKey;
     let lastIndex;
@@ -57,6 +61,7 @@ class Demo extends React.Component {
     }
     this.setState({ panes, activeKey });
   }
+
   render() {
     return (
       <div>
diff --git a/components/tabs/demo/disabled.md b/components/tabs/demo/disabled.md
index 5e06d2c283..c469c964c4 100644
--- a/components/tabs/demo/disabled.md
+++ b/components/tabs/demo/disabled.md
@@ -15,6 +15,7 @@ Disabled a tab.
 
 ````jsx
 import { Tabs } from 'antd';
+
 const TabPane = Tabs.TabPane;
 
 ReactDOM.render(
@@ -22,6 +23,6 @@ ReactDOM.render(
     <TabPane tab="Tab 1" key="1">Tab 1</TabPane>
     <TabPane tab="Tab 2" disabled key="2">Tab 2</TabPane>
     <TabPane tab="Tab 3" key="3">Tab 3</TabPane>
-  </Tabs>
-, mountNode);
+  </Tabs>,
+  mountNode);
 ````
diff --git a/components/tabs/demo/editable-card.md b/components/tabs/demo/editable-card.md
index ff627cde28..af17573918 100644
--- a/components/tabs/demo/editable-card.md
+++ b/components/tabs/demo/editable-card.md
@@ -17,6 +17,7 @@ Only card type Tabs support adding & closable.
 
 ````jsx
 import { Tabs } from 'antd';
+
 const TabPane = Tabs.TabPane;
 
 class Demo extends React.Component {
@@ -37,15 +38,18 @@ class Demo extends React.Component {
   onChange = (activeKey) => {
     this.setState({ activeKey });
   }
+
   onEdit = (targetKey, action) => {
     this[action](targetKey);
   }
+
   add = () => {
     const panes = this.state.panes;
     const activeKey = `newTab${this.newTabIndex++}`;
     panes.push({ title: 'New Tab', content: 'Content of new Tab', key: activeKey });
     this.setState({ panes, activeKey });
   }
+
   remove = (targetKey) => {
     let activeKey = this.state.activeKey;
     let lastIndex;
@@ -60,6 +64,7 @@ class Demo extends React.Component {
     }
     this.setState({ panes, activeKey });
   }
+
   render() {
     return (
       <Tabs
diff --git a/components/tabs/demo/extra.md b/components/tabs/demo/extra.md
index 9d48369574..79cce14212 100644
--- a/components/tabs/demo/extra.md
+++ b/components/tabs/demo/extra.md
@@ -16,6 +16,7 @@ You can add extra actions to the right of Tabs.
 
 ````jsx
 import { Tabs, Button } from 'antd';
+
 const TabPane = Tabs.TabPane;
 
 const operations = <Button>Extra Action</Button>;
@@ -25,6 +26,6 @@ ReactDOM.render(
     <TabPane tab="Tab 1" key="1">Content of tab 1</TabPane>
     <TabPane tab="Tab 2" key="2">Content of tab 2</TabPane>
     <TabPane tab="Tab 3" key="3">Content of tab 3</TabPane>
-  </Tabs>
-, mountNode);
+  </Tabs>,
+  mountNode);
 ````
diff --git a/components/tabs/demo/icon.md b/components/tabs/demo/icon.md
index 2e9073ac55..685597ec33 100644
--- a/components/tabs/demo/icon.md
+++ b/components/tabs/demo/icon.md
@@ -16,6 +16,7 @@ The Tab with Icon.
 
 ````jsx
 import { Tabs, Icon } from 'antd';
+
 const TabPane = Tabs.TabPane;
 
 ReactDOM.render(
@@ -26,6 +27,6 @@ ReactDOM.render(
     <TabPane tab={<span><Icon type="android" />Tab 2</span>} key="2">
       Tab 2
     </TabPane>
-  </Tabs>
-, mountNode);
+  </Tabs>,
+  mountNode);
 ````
diff --git a/components/tabs/demo/position.md b/components/tabs/demo/position.md
index 72f3831079..4913ed7061 100644
--- a/components/tabs/demo/position.md
+++ b/components/tabs/demo/position.md
@@ -15,6 +15,7 @@ Tab's position: left, right, top or bottom.
 
 ````jsx
 import { Tabs, Select } from 'antd';
+
 const TabPane = Tabs.TabPane;
 const Option = Select.Option;
 
@@ -23,9 +24,11 @@ class Demo extends React.Component {
   state = {
     tabPosition: 'top',
   }
+
   changeTabPosition = (tabPosition) => {
     this.setState({ tabPosition });
   }
+
   render() {
     return (
       <div>
diff --git a/components/tabs/demo/size.md b/components/tabs/demo/size.md
index 763d99098d..b5be97c710 100644
--- a/components/tabs/demo/size.md
+++ b/components/tabs/demo/size.md
@@ -15,13 +15,16 @@ Large size tabs are usally used in page header, and small size could be used in
 
 ````jsx
 import { Tabs, Radio } from 'antd';
+
 const { TabPane } = Tabs;
 
 class Demo extends React.Component {
   state = { size: 'small' };
+
   onChange = (e) => {
     this.setState({ size: e.target.value });
   }
+
   render() {
     const { size } = this.state;
     return (
diff --git a/components/tabs/demo/slide.md b/components/tabs/demo/slide.md
index e74265ebb4..506afe5d48 100644
--- a/components/tabs/demo/slide.md
+++ b/components/tabs/demo/slide.md
@@ -15,6 +15,7 @@ In order to fit in more tabs, they can slide left and right (or up and down).
 
 ````jsx
 import { Tabs, Radio } from 'antd';
+
 const TabPane = Tabs.TabPane;
 
 class SlidingTabsDemo extends React.Component {
@@ -24,10 +25,12 @@ class SlidingTabsDemo extends React.Component {
       mode: 'top',
     };
   }
+
   handleModeChange = (e) => {
     const mode = e.target.value;
     this.setState({ mode });
   }
+
   render() {
     const { mode } = this.state;
     return (
diff --git a/components/tag/demo/checkable.md b/components/tag/demo/checkable.md
index 30ce86335e..8b481b5c13 100644
--- a/components/tag/demo/checkable.md
+++ b/components/tag/demo/checkable.md
@@ -19,13 +19,16 @@ title:
 
 ````jsx
 import { Tag } from 'antd';
+
 const { CheckableTag } = Tag;
 
 class MyTag extends React.Component {
   state = { checked: true };
+
   handleChange = (checked) => {
     this.setState({ checked });
   }
+
   render() {
     return <CheckableTag {...this.props} checked={this.state.checked} onChange={this.handleChange} />;
   }
@@ -36,6 +39,6 @@ ReactDOM.render(
     <MyTag>Tag1</MyTag>
     <MyTag>Tag2</MyTag>
     <MyTag>Tag3</MyTag>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/tag/demo/colorful.md b/components/tag/demo/colorful.md
index b6f68bd447..15bc4f0ae5 100644
--- a/components/tag/demo/colorful.md
+++ b/components/tag/demo/colorful.md
@@ -40,8 +40,8 @@ ReactDOM.render(
       <Tag color="#87d068">#87d068</Tag>
       <Tag color="#108ee9">#108ee9</Tag>
     </div>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 ````css
diff --git a/components/tag/demo/hot-tags.md b/components/tag/demo/hot-tags.md
index 6469e876e3..3e50f4dce6 100644
--- a/components/tag/demo/hot-tags.md
+++ b/components/tag/demo/hot-tags.md
@@ -15,6 +15,7 @@ Select your favourite topics.
 
 ````jsx
 import { Tag } from 'antd';
+
 const CheckableTag = Tag.CheckableTag;
 
 const tagsFromServer = ['Movies', 'Books', 'Music', 'Sports'];
@@ -26,9 +27,9 @@ class HotTags extends React.Component {
 
   handleChange(tag, checked) {
     const { selectedTags } = this.state;
-    const nextSelectedTags = checked ?
-            [...selectedTags, tag] :
-            selectedTags.filter(t => t !== tag);
+    const nextSelectedTags = checked
+      ? [...selectedTags, tag]
+      : selectedTags.filter(t => t !== tag);
     console.log('You are interested in: ', nextSelectedTags);
     this.setState({ selectedTags: nextSelectedTags });
   }
diff --git a/components/time-picker/demo/12hours.md b/components/time-picker/demo/12hours.md
index f971624d21..6c914bdd2a 100644
--- a/components/time-picker/demo/12hours.md
+++ b/components/time-picker/demo/12hours.md
@@ -25,6 +25,6 @@ ReactDOM.render(
     <TimePicker use12Hours onChange={onChange} />
     <TimePicker use12Hours format="h:mm:ss A" onChange={onChange} />
     <TimePicker use12Hours format="h:mm a" onChange={onChange} />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/time-picker/demo/disabled.md b/components/time-picker/demo/disabled.md
index 9da9857bfc..4f765f62c8 100644
--- a/components/time-picker/demo/disabled.md
+++ b/components/time-picker/demo/disabled.md
@@ -19,6 +19,6 @@ import { TimePicker } from 'antd';
 import moment from 'moment';
 
 ReactDOM.render(
-  <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} disabled />
-, mountNode);
+  <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} disabled />,
+  mountNode);
 ````
diff --git a/components/time-picker/demo/hide-column.md b/components/time-picker/demo/hide-column.md
index 69595e0cfe..b204231d0c 100644
--- a/components/time-picker/demo/hide-column.md
+++ b/components/time-picker/demo/hide-column.md
@@ -20,6 +20,6 @@ import moment from 'moment';
 const format = 'HH:mm';
 
 ReactDOM.render(
-  <TimePicker defaultValue={moment('12:08', format)} format={format} />
-, mountNode);
+  <TimePicker defaultValue={moment('12:08', format)} format={format} />,
+  mountNode);
 ````
diff --git a/components/time-picker/demo/interval-options.md b/components/time-picker/demo/interval-options.md
index 1acff0880b..7ef4d8adfb 100644
--- a/components/time-picker/demo/interval-options.md
+++ b/components/time-picker/demo/interval-options.md
@@ -16,6 +16,6 @@ Show stepped options by `hourStep` `minuteStep` `secondStep`.
 import { TimePicker } from 'antd';
 
 ReactDOM.render(
-  <TimePicker minuteStep={15} secondStep={10} />
-, mountNode);
+  <TimePicker minuteStep={15} secondStep={10} />,
+  mountNode);
 ````
diff --git a/components/time-picker/demo/size.md b/components/time-picker/demo/size.md
index 39e1e14a31..cfb39a6aa1 100644
--- a/components/time-picker/demo/size.md
+++ b/components/time-picker/demo/size.md
@@ -22,6 +22,6 @@ ReactDOM.render(
     <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} size="large" />
     <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} />
     <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} size="small" />
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
diff --git a/components/timeline/demo/basic.md b/components/timeline/demo/basic.md
index cb5d6b2e7d..0af7e801ec 100644
--- a/components/timeline/demo/basic.md
+++ b/components/timeline/demo/basic.md
@@ -22,6 +22,6 @@ ReactDOM.render(
     <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
     <Timeline.Item>Technical testing 2015-09-01</Timeline.Item>
     <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
-  </Timeline>
-, mountNode);
+  </Timeline>,
+  mountNode);
 ````
diff --git a/components/timeline/demo/color.md b/components/timeline/demo/color.md
index dd8d2d14f5..1bc8b4db41 100644
--- a/components/timeline/demo/color.md
+++ b/components/timeline/demo/color.md
@@ -30,6 +30,6 @@ ReactDOM.render(
       <p>Technical testing 2</p>
       <p>Technical testing 3 2015-09-01</p>
     </Timeline.Item>
-  </Timeline>
-, mountNode);
+  </Timeline>,
+  mountNode);
 ````
diff --git a/components/timeline/demo/custom.md b/components/timeline/demo/custom.md
index 39b73d9cdb..d2c5f1c736 100644
--- a/components/timeline/demo/custom.md
+++ b/components/timeline/demo/custom.md
@@ -22,6 +22,6 @@ ReactDOM.render(
     <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>
     <Timeline.Item dot={<Icon type="clock-circle-o" style={{ fontSize: '16px' }} />} color="red">Technical testing 2015-09-01</Timeline.Item>
     <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>
-  </Timeline>
-, mountNode);
+  </Timeline>,
+  mountNode);
 ````
diff --git a/components/tooltip/demo/arrow-point-at-center.md b/components/tooltip/demo/arrow-point-at-center.md
index c0fea126b0..9e5acdbbfd 100644
--- a/components/tooltip/demo/arrow-point-at-center.md
+++ b/components/tooltip/demo/arrow-point-at-center.md
@@ -24,8 +24,8 @@ ReactDOM.render(
     <Tooltip placement="topLeft" title="Prompt Text" arrowPointAtCenter>
       <Button>Arrow points to center / 箭头指向中心</Button>
     </Tooltip>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 <style>
diff --git a/components/tooltip/demo/auto-adjust-overflow.md b/components/tooltip/demo/auto-adjust-overflow.md
index b3f97c9263..6387538f46 100644
--- a/components/tooltip/demo/auto-adjust-overflow.md
+++ b/components/tooltip/demo/auto-adjust-overflow.md
@@ -33,8 +33,8 @@ ReactDOM.render(
     <Tooltip placement="left" title="Prompt Text" getPopupContainer={trigger => trigger.parentElement} autoAdjustOverflow={false}>
       <Button>Ingore / 不处理</Button>
     </Tooltip>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 <style>
diff --git a/components/tooltip/demo/basic.md b/components/tooltip/demo/basic.md
index 356223f58e..913658417e 100644
--- a/components/tooltip/demo/basic.md
+++ b/components/tooltip/demo/basic.md
@@ -19,6 +19,6 @@ import { Tooltip } from 'antd';
 ReactDOM.render(
   <Tooltip title="prompt text">
     <span>Tooltip will show when mouse enter.</span>
-  </Tooltip>
-, mountNode);
+  </Tooltip>,
+  mountNode);
 ````
diff --git a/components/tooltip/demo/placement.md b/components/tooltip/demo/placement.md
index ce4aa248f0..2d4c87dd29 100644
--- a/components/tooltip/demo/placement.md
+++ b/components/tooltip/demo/placement.md
@@ -66,8 +66,8 @@ ReactDOM.render(
         <Button>BR</Button>
       </Tooltip>
     </div>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 <style>
diff --git a/components/transfer/demo/advanced.md b/components/transfer/demo/advanced.md
index bcc36333c1..c75d96a0f0 100644
--- a/components/transfer/demo/advanced.md
+++ b/components/transfer/demo/advanced.md
@@ -23,9 +23,11 @@ class App extends React.Component {
     mockData: [],
     targetKeys: [],
   }
+
   componentDidMount() {
     this.getMock();
   }
+
   getMock = () => {
     const targetKeys = [];
     const mockData = [];
@@ -43,9 +45,11 @@ class App extends React.Component {
     }
     this.setState({ mockData, targetKeys });
   }
+
   handleChange = (targetKeys) => {
     this.setState({ targetKeys });
   }
+
   renderFooter = () => {
     return (
       <Button
@@ -57,6 +61,7 @@ class App extends React.Component {
       </Button>
     );
   }
+
   render() {
     return (
       <Transfer
diff --git a/components/transfer/demo/basic.md b/components/transfer/demo/basic.md
index 4644ed30d5..ada65cd9dc 100644
--- a/components/transfer/demo/basic.md
+++ b/components/transfer/demo/basic.md
@@ -27,8 +27,8 @@ for (let i = 0; i < 20; i++) {
 }
 
 const targetKeys = mockData
-        .filter(item => +item.key % 3 > 1)
-        .map(item => item.key);
+  .filter(item => +item.key % 3 > 1)
+  .map(item => item.key);
 
 class App extends React.Component {
   state = {
diff --git a/components/transfer/demo/custom-item.md b/components/transfer/demo/custom-item.md
index ab702bde17..9a8fed3e76 100644
--- a/components/transfer/demo/custom-item.md
+++ b/components/transfer/demo/custom-item.md
@@ -21,9 +21,11 @@ class App extends React.Component {
     mockData: [],
     targetKeys: [],
   }
+
   componentDidMount() {
     this.getMock();
   }
+
   getMock = () => {
     const targetKeys = [];
     const mockData = [];
@@ -41,10 +43,12 @@ class App extends React.Component {
     }
     this.setState({ mockData, targetKeys });
   }
+
   handleChange = (targetKeys, direction, moveKeys) => {
     console.log(targetKeys, direction, moveKeys);
     this.setState({ targetKeys });
   }
+
   renderItem = (item) => {
     const customLabel = (
       <span className="custom-item">
@@ -57,6 +61,7 @@ class App extends React.Component {
       value: item.title, // for title and filter matching
     };
   }
+
   render() {
     return (
       <Transfer
diff --git a/components/transfer/demo/large-data.md b/components/transfer/demo/large-data.md
index 75e1da8701..2db3173e9c 100644
--- a/components/transfer/demo/large-data.md
+++ b/components/transfer/demo/large-data.md
@@ -22,9 +22,11 @@ class App extends React.Component {
     mockData: [],
     targetKeys: [],
   }
+
   componentDidMount() {
     this.getMock();
   }
+
   getMock = () => {
     const targetKeys = [];
     const mockData = [];
@@ -42,10 +44,12 @@ class App extends React.Component {
     }
     this.setState({ mockData, targetKeys });
   }
+
   handleChange = (targetKeys, direction, moveKeys) => {
     console.log(targetKeys, direction, moveKeys);
     this.setState({ targetKeys });
   }
+
   render() {
     return (
       <Transfer
diff --git a/components/transfer/demo/search.md b/components/transfer/demo/search.md
index 330aa7195b..fab33e48a6 100644
--- a/components/transfer/demo/search.md
+++ b/components/transfer/demo/search.md
@@ -21,9 +21,11 @@ class App extends React.Component {
     mockData: [],
     targetKeys: [],
   }
+
   componentDidMount() {
     this.getMock();
   }
+
   getMock = () => {
     const targetKeys = [];
     const mockData = [];
@@ -41,12 +43,15 @@ class App extends React.Component {
     }
     this.setState({ mockData, targetKeys });
   }
+
   filterOption = (inputValue, option) => {
     return option.description.indexOf(inputValue) > -1;
   }
+
   handleChange = (targetKeys) => {
     this.setState({ targetKeys });
   }
+
   render() {
     return (
       <Transfer
diff --git a/components/tree-select/demo/basic.md b/components/tree-select/demo/basic.md
index d51b2daf37..6011278d2c 100644
--- a/components/tree-select/demo/basic.md
+++ b/components/tree-select/demo/basic.md
@@ -15,16 +15,19 @@ The most basic usage.
 
 ````jsx
 import { TreeSelect } from 'antd';
+
 const TreeNode = TreeSelect.TreeNode;
 
 class Demo extends React.Component {
   state = {
     value: undefined,
   }
+
   onChange = (value) => {
     console.log(value);
     this.setState({ value });
   }
+
   render() {
     return (
       <TreeSelect
diff --git a/components/tree-select/demo/checkable.md b/components/tree-select/demo/checkable.md
index e60615f8c3..600a7c7185 100644
--- a/components/tree-select/demo/checkable.md
+++ b/components/tree-select/demo/checkable.md
@@ -15,6 +15,7 @@ Multiple and checkable.
 
 ````jsx
 import { TreeSelect } from 'antd';
+
 const SHOW_PARENT = TreeSelect.SHOW_PARENT;
 
 const treeData = [{
@@ -49,10 +50,12 @@ class Demo extends React.Component {
   state = {
     value: ['0-0-0'],
   }
+
   onChange = (value) => {
     console.log('onChange ', value);
     this.setState({ value });
   }
+
   render() {
     const tProps = {
       treeData,
diff --git a/components/tree-select/demo/multiple.md b/components/tree-select/demo/multiple.md
index ed505dad8c..cbbd97fa46 100644
--- a/components/tree-select/demo/multiple.md
+++ b/components/tree-select/demo/multiple.md
@@ -15,16 +15,19 @@ Multiple selection usage.
 
 ````jsx
 import { TreeSelect } from 'antd';
+
 const TreeNode = TreeSelect.TreeNode;
 
 class Demo extends React.Component {
   state = {
     value: undefined,
   }
+
   onChange = (value) => {
     console.log(value);
     this.setState({ value });
   }
+
   render() {
     return (
       <TreeSelect
diff --git a/components/tree-select/demo/treeData.md b/components/tree-select/demo/treeData.md
index be1b946112..555b2deafc 100644
--- a/components/tree-select/demo/treeData.md
+++ b/components/tree-select/demo/treeData.md
@@ -40,10 +40,12 @@ class Demo extends React.Component {
   state = {
     value: undefined,
   }
+
   onChange = (value) => {
     console.log(value);
     this.setState({ value });
   }
+
   render() {
     return (
       <TreeSelect
diff --git a/components/tree/demo/basic-controlled.md b/components/tree/demo/basic-controlled.md
index 4de8217825..a474e45972 100644
--- a/components/tree/demo/basic-controlled.md
+++ b/components/tree/demo/basic-controlled.md
@@ -15,6 +15,7 @@ basic controlled example
 
 ````jsx
 import { Tree } from 'antd';
+
 const TreeNode = Tree.TreeNode;
 
 const treeData = [{
@@ -60,6 +61,7 @@ class Demo extends React.Component {
     checkedKeys: ['0-0-0'],
     selectedKeys: [],
   }
+
   onExpand = (expandedKeys) => {
     console.log('onExpand', expandedKeys);
     // if not set autoExpandParent to false, if children expanded, parent can not collapse.
@@ -69,14 +71,17 @@ class Demo extends React.Component {
       autoExpandParent: false,
     });
   }
+
   onCheck = (checkedKeys) => {
     console.log('onCheck', checkedKeys);
     this.setState({ checkedKeys });
   }
+
   onSelect = (selectedKeys, info) => {
     console.log('onSelect', info);
     this.setState({ selectedKeys });
   }
+
   renderTreeNodes = (data) => {
     return data.map((item) => {
       if (item.children) {
@@ -89,6 +94,7 @@ class Demo extends React.Component {
       return <TreeNode {...item} />;
     });
   }
+
   render() {
     return (
       <Tree
diff --git a/components/tree/demo/basic.md b/components/tree/demo/basic.md
index 64a553b894..4c8dbbc35e 100644
--- a/components/tree/demo/basic.md
+++ b/components/tree/demo/basic.md
@@ -15,15 +15,18 @@ The most basic usage, tell you how to use checkable, selectable, disabled, defau
 
 ````jsx
 import { Tree } from 'antd';
+
 const TreeNode = Tree.TreeNode;
 
 class Demo extends React.Component {
   onSelect = (selectedKeys, info) => {
     console.log('selected', selectedKeys, info);
   }
+
   onCheck = (checkedKeys, info) => {
     console.log('onCheck', checkedKeys, info);
   }
+
   render() {
     return (
       <Tree
diff --git a/components/tree/demo/customized-icon.md b/components/tree/demo/customized-icon.md
index 547ebed9ce..ee689083fc 100644
--- a/components/tree/demo/customized-icon.md
+++ b/components/tree/demo/customized-icon.md
@@ -15,6 +15,7 @@ You can customize icons for different nodes.
 
 ````jsx
 import { Tree, Icon } from 'antd';
+
 const TreeNode = Tree.TreeNode;
 
 class Demo extends React.Component {
diff --git a/components/tree/demo/draggable.md b/components/tree/demo/draggable.md
index 339301b8e2..1cf352603b 100644
--- a/components/tree/demo/draggable.md
+++ b/components/tree/demo/draggable.md
@@ -15,6 +15,7 @@ Drag treeNode to insert after the other treeNode or insert into the other parent
 
 ````jsx
 import { Tree } from 'antd';
+
 const TreeNode = Tree.TreeNode;
 
 const x = 3;
@@ -50,6 +51,7 @@ class Demo extends React.Component {
     gData,
     expandedKeys: ['0-0', '0-0-0', '0-0-0-0'],
   }
+
   onDragEnter = (info) => {
     console.log(info);
     // expandedKeys 需要受控时设置
@@ -57,6 +59,7 @@ class Demo extends React.Component {
     //   expandedKeys: info.expandedKeys,
     // });
   }
+
   onDrop = (info) => {
     console.log(info);
     const dropKey = info.node.props.eventKey;
@@ -103,6 +106,7 @@ class Demo extends React.Component {
       gData: data,
     });
   }
+
   render() {
     const loop = data => data.map((item) => {
       if (item.children && item.children.length) {
diff --git a/components/tree/demo/dynamic.md b/components/tree/demo/dynamic.md
index f9c6bef934..07071593d2 100644
--- a/components/tree/demo/dynamic.md
+++ b/components/tree/demo/dynamic.md
@@ -15,6 +15,7 @@ To load data asynchronously when click to expand a treeNode.
 
 ````jsx
 import { Tree } from 'antd';
+
 const TreeNode = Tree.TreeNode;
 
 class Demo extends React.Component {
@@ -25,6 +26,7 @@ class Demo extends React.Component {
       { title: 'Tree Node', key: '2', isLeaf: true },
     ],
   }
+
   onLoadData = (treeNode) => {
     return new Promise((resolve) => {
       if (treeNode.props.children) {
@@ -43,6 +45,7 @@ class Demo extends React.Component {
       }, 1000);
     });
   }
+
   renderTreeNodes = (data) => {
     return data.map((item) => {
       if (item.children) {
@@ -55,6 +58,7 @@ class Demo extends React.Component {
       return <TreeNode {...item} dataRef={item} />;
     });
   }
+
   render() {
     return (
       <Tree loadData={this.onLoadData}>
diff --git a/components/tree/demo/line.md b/components/tree/demo/line.md
index 1281039e69..b55e4cb0fe 100644
--- a/components/tree/demo/line.md
+++ b/components/tree/demo/line.md
@@ -15,12 +15,14 @@ Tree With Line
 
 ````jsx
 import { Tree } from 'antd';
+
 const TreeNode = Tree.TreeNode;
 
 class Demo extends React.Component {
   onSelect = (selectedKeys, info) => {
     console.log('selected', selectedKeys, info);
   }
+
   render() {
     return (
       <Tree
diff --git a/components/tree/demo/search.md b/components/tree/demo/search.md
index 4d98ae4677..95bc80ae9c 100644
--- a/components/tree/demo/search.md
+++ b/components/tree/demo/search.md
@@ -81,12 +81,14 @@ class SearchTree extends React.Component {
     searchValue: '',
     autoExpandParent: true,
   }
+
   onExpand = (expandedKeys) => {
     this.setState({
       expandedKeys,
       autoExpandParent: false,
     });
   }
+
   onChange = (e) => {
     const value = e.target.value;
     const expandedKeys = dataList.map((item) => {
@@ -101,6 +103,7 @@ class SearchTree extends React.Component {
       autoExpandParent: true,
     });
   }
+
   render() {
     const { searchValue, expandedKeys, autoExpandParent } = this.state;
     const loop = data => data.map((item) => {
diff --git a/components/upload/demo/avatar.md b/components/upload/demo/avatar.md
index ab0a520c47..04e7e90e00 100644
--- a/components/upload/demo/avatar.md
+++ b/components/upload/demo/avatar.md
@@ -42,6 +42,7 @@ class Avatar extends React.Component {
   state = {
     loading: false,
   };
+
   handleChange = (info) => {
     if (info.file.status === 'uploading') {
       this.setState({ loading: true });
@@ -55,6 +56,7 @@ class Avatar extends React.Component {
       }));
     }
   }
+
   render() {
     const uploadButton = (
       <div>
diff --git a/components/upload/demo/basic.md b/components/upload/demo/basic.md
index fbd4d56f8f..3c9febd216 100644
--- a/components/upload/demo/basic.md
+++ b/components/upload/demo/basic.md
@@ -39,6 +39,6 @@ ReactDOM.render(
     <Button>
       <Icon type="upload" /> Click to Upload
     </Button>
-  </Upload>
-, mountNode);
+  </Upload>,
+  mountNode);
 ````
diff --git a/components/upload/demo/defaultFileList.md b/components/upload/demo/defaultFileList.md
index 4629fa05e5..8d849a343d 100644
--- a/components/upload/demo/defaultFileList.md
+++ b/components/upload/demo/defaultFileList.md
@@ -48,6 +48,6 @@ ReactDOM.render(
     <Button>
       <Icon type="upload" /> Upload
     </Button>
-  </Upload>
-, mountNode);
+  </Upload>,
+  mountNode);
 ````
diff --git a/components/upload/demo/drag.md b/components/upload/demo/drag.md
index 01ce962bb1..fb7591067c 100644
--- a/components/upload/demo/drag.md
+++ b/components/upload/demo/drag.md
@@ -19,6 +19,7 @@ We can upload serveral files at once in modern browsers by giving the input the
 
 ````jsx
 import { Upload, Icon, message } from 'antd';
+
 const Dragger = Upload.Dragger;
 
 const props = {
@@ -45,6 +46,6 @@ ReactDOM.render(
     </p>
     <p className="ant-upload-text">Click or drag file to this area to upload</p>
     <p className="ant-upload-hint">Support for a single or bulk upload. Strictly prohibit from uploading company data or other band files</p>
-  </Dragger>
-, mountNode);
+  </Dragger>,
+  mountNode);
 ````
diff --git a/components/upload/demo/fileList.md b/components/upload/demo/fileList.md
index 0df0b684c3..6dee6259dd 100644
--- a/components/upload/demo/fileList.md
+++ b/components/upload/demo/fileList.md
@@ -37,6 +37,7 @@ class MyUpload extends React.Component {
       url: 'http://www.baidu.com/xxx.png',
     }],
   }
+
   handleChange = (info) => {
     let fileList = info.fileList;
 
@@ -63,6 +64,7 @@ class MyUpload extends React.Component {
 
     this.setState({ fileList });
   }
+
   render() {
     const props = {
       action: '//jsonplaceholder.typicode.com/posts/',
diff --git a/components/upload/demo/picture-style.md b/components/upload/demo/picture-style.md
index e6a8c0d510..67e402094e 100644
--- a/components/upload/demo/picture-style.md
+++ b/components/upload/demo/picture-style.md
@@ -58,8 +58,8 @@ ReactDOM.render(
         <Icon type="upload" /> upload
       </Button>
     </Upload>
-  </div>
-, mountNode);
+  </div>,
+  mountNode);
 ````
 
 ````css
diff --git a/package.json b/package.json
index df01440882..8c4ab12e69 100644
--- a/package.json
+++ b/package.json
@@ -85,7 +85,7 @@
     "warning": "~4.0.1"
   },
   "devDependencies": {
-    "@babel/types": "7.0.0-beta.44",
+    "@babel/types": "7.0.0-beta.51",
     "@types/react": "^16.0.0",
     "@types/react-dom": "^16.0.0",
     "ansi-styles": "^3.2.0",
@@ -117,13 +117,13 @@
     "enzyme-adapter-react-16": "^1.0.0",
     "enzyme-to-json": "^3.1.2",
     "eslint": "^5.0.0",
-    "eslint-config-airbnb": "^16.1.0",
+    "eslint-config-airbnb": "^17.0.0",
     "eslint-plugin-babel": "^5.0.0",
     "eslint-plugin-import": "^2.2.0",
     "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-markdown": "~1.0.0-beta.4",
-    "eslint-plugin-react": "7.9.1",
-    "eslint-tinker": "^0.4.0",
+    "eslint-plugin-react": "^7.10.0",
+    "eslint-tinker-antd": "^0.5.0",
     "fetch-jsonp": "^1.0.3",
     "glob": "^7.1.1",
     "immutability-helper": "^2.5.0",