From a03aa6c812d003211d2afb8dd8fd1a2bfd5fd8a9 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Thu, 23 Nov 2017 08:32:54 -0800
Subject: [PATCH 1/2] Format examples with Prettier

---
 .../composing-components.js                   |   4 +-
 .../extracting-components-continued.js        |  20 ++--
 .../extracting-components.js                  |  20 ++--
 .../rendering-a-component.js                  |   4 +-
 examples/es5-syntax-example.js                |   6 +-
 examples/hello-world.js                       |   2 +-
 examples/introducing-jsx.js                   |  10 +-
 examples/jsx-simple-example.js                |   2 +-
 examples/reconciliation/index-used-as-key.js  | 111 +++++++++++-------
 .../reconciliation/no-index-used-as-key.js    | 106 +++++++++++------
 examples/tutorial-expanded-version.js         |   2 +-
 package.json                                  |   8 +-
 12 files changed, 185 insertions(+), 110 deletions(-)

diff --git a/examples/components-and-props/composing-components.js b/examples/components-and-props/composing-components.js
index 9158dd0c..7b27a2a1 100644
--- a/examples/components-and-props/composing-components.js
+++ b/examples/components-and-props/composing-components.js
@@ -14,5 +14,5 @@ function App() {
 
 ReactDOM.render(
   <App />,
-  document.getElementById('root')
-);
\ No newline at end of file
+  document.getElementById('root'),
+);
diff --git a/examples/components-and-props/extracting-components-continued.js b/examples/components-and-props/extracting-components-continued.js
index bcb6547b..22e2fb43 100644
--- a/examples/components-and-props/extracting-components-continued.js
+++ b/examples/components-and-props/extracting-components-continued.js
@@ -4,9 +4,11 @@ function formatDate(date) {
 
 function Avatar(props) {
   return (
-    <img className="Avatar"
-         src={props.user.avatarUrl}
-         alt={props.user.name} />
+    <img
+      className="Avatar"
+      src={props.user.avatarUrl}
+      alt={props.user.name}
+    />
   );
 }
 
@@ -40,13 +42,15 @@ const comment = {
   text: 'I hope you enjoy learning React!',
   author: {
     name: 'Hello Kitty',
-    avatarUrl: 'http://placekitten.com/g/64/64'
-  }
+    avatarUrl:
+      'http://placekitten.com/g/64/64',
+  },
 };
 ReactDOM.render(
   <Comment
     date={comment.date}
     text={comment.text}
-    author={comment.author} />,
-  document.getElementById('root')
-);
\ No newline at end of file
+    author={comment.author}
+  />,
+  document.getElementById('root'),
+);
diff --git a/examples/components-and-props/extracting-components.js b/examples/components-and-props/extracting-components.js
index 720624ea..63ce9671 100644
--- a/examples/components-and-props/extracting-components.js
+++ b/examples/components-and-props/extracting-components.js
@@ -6,9 +6,11 @@ function Comment(props) {
   return (
     <div className="Comment">
       <div className="UserInfo">
-        <img className="Avatar"
-             src={props.author.avatarUrl}
-             alt={props.author.name} />
+        <img
+          className="Avatar"
+          src={props.author.avatarUrl}
+          alt={props.author.name}
+        />
         <div className="UserInfo-name">
           {props.author.name}
         </div>
@@ -28,13 +30,15 @@ const comment = {
   text: 'I hope you enjoy learning React!',
   author: {
     name: 'Hello Kitty',
-    avatarUrl: 'http://placekitten.com/g/64/64'
-  }
+    avatarUrl:
+      'http://placekitten.com/g/64/64',
+  },
 };
 ReactDOM.render(
   <Comment
     date={comment.date}
     text={comment.text}
-    author={comment.author} />,
-  document.getElementById('root')
-);
\ No newline at end of file
+    author={comment.author}
+  />,
+  document.getElementById('root'),
+);
diff --git a/examples/components-and-props/rendering-a-component.js b/examples/components-and-props/rendering-a-component.js
index d42e1681..9ca3c560 100644
--- a/examples/components-and-props/rendering-a-component.js
+++ b/examples/components-and-props/rendering-a-component.js
@@ -5,5 +5,5 @@ function Welcome(props) {
 const element = <Welcome name="Sara" />;
 ReactDOM.render(
   element,
-  document.getElementById('root')
-);
\ No newline at end of file
+  document.getElementById('root'),
+);
diff --git a/examples/es5-syntax-example.js b/examples/es5-syntax-example.js
index 6d1e2033..20723ce5 100644
--- a/examples/es5-syntax-example.js
+++ b/examples/es5-syntax-example.js
@@ -1,3 +1,5 @@
 const element = <h1>Hello, world!</h1>;
-const container = document.getElementById('root');
-ReactDOM.render(element, container);
\ No newline at end of file
+const container = document.getElementById(
+  'root',
+);
+ReactDOM.render(element, container);
diff --git a/examples/hello-world.js b/examples/hello-world.js
index d0f87a59..3a40a142 100644
--- a/examples/hello-world.js
+++ b/examples/hello-world.js
@@ -1,4 +1,4 @@
 ReactDOM.render(
   <h1>Hello, world!</h1>,
-  document.getElementById('root')
+  document.getElementById('root'),
 );
diff --git a/examples/introducing-jsx.js b/examples/introducing-jsx.js
index adb32664..3900f34e 100644
--- a/examples/introducing-jsx.js
+++ b/examples/introducing-jsx.js
@@ -1,5 +1,7 @@
 function formatName(user) {
-  return user.firstName + ' ' + user.lastName;
+  return (
+    user.firstName + ' ' + user.lastName
+  );
 }
 
 const user = {
@@ -8,12 +10,10 @@ const user = {
 };
 
 const element = (
-  <h1>
-    Hello, {formatName(user)}!
-  </h1>
+  <h1>Hello, {formatName(user)}!</h1>
 );
 
 ReactDOM.render(
   element,
-  document.getElementById('root')
+  document.getElementById('root'),
 );
diff --git a/examples/jsx-simple-example.js b/examples/jsx-simple-example.js
index af770ebc..4fa46d3b 100644
--- a/examples/jsx-simple-example.js
+++ b/examples/jsx-simple-example.js
@@ -1,3 +1,3 @@
 function hello() {
   return <div>Hello world!</div>;
-}
\ No newline at end of file
+}
diff --git a/examples/reconciliation/index-used-as-key.js b/examples/reconciliation/index-used-as-key.js
index 9d7ff13c..74dda0e4 100644
--- a/examples/reconciliation/index-used-as-key.js
+++ b/examples/reconciliation/index-used-as-key.js
@@ -1,8 +1,16 @@
-const ToDo = (props) => (
+const ToDo = props => (
   <tr>
-    <td><label>{props.id}</label></td>
-    <td><input/></td>
-    <td><label>{props.createdAt.toTimeString()}</label></td>
+    <td>
+      <label>{props.id}</label>
+    </td>
+    <td>
+      <input />
+    </td>
+    <td>
+      <label>
+        {props.createdAt.toTimeString()}
+      </label>
+    </td>
   </tr>
 );
 
@@ -14,90 +22,111 @@ class ToDoList extends React.Component {
     this.state = {
       todoCounter: todoCounter,
       list: [
-        { id: todoCounter, createdAt: date },
-      ]
-    }
+        {
+          id: todoCounter,
+          createdAt: date,
+        },
+      ],
+    };
   }
 
   sortByEarliest() {
-    const sortedList = this.state.list.sort((a, b) => {
-      return a.createdAt - b.createdAt;
-    });
+    const sortedList = this.state.list.sort(
+      (a, b) => {
+        return a.createdAt - b.createdAt;
+      },
+    );
     this.setState({
-      list: [...sortedList]
-    })
+      list: [...sortedList],
+    });
   }
 
   sortByLatest() {
-    const sortedList = this.state.list.sort((a, b) => {
-      return b.createdAt - a.createdAt;
-    });
+    const sortedList = this.state.list.sort(
+      (a, b) => {
+        return b.createdAt - a.createdAt;
+      },
+    );
     this.setState({
-      list: [...sortedList]
-    })
+      list: [...sortedList],
+    });
   }
 
   addToEnd() {
     const date = new Date();
-    const nextId = this.state.todoCounter + 1;
+    const nextId =
+      this.state.todoCounter + 1;
     const newList = [
       ...this.state.list,
-      { id: nextId, createdAt: date }
+      {id: nextId, createdAt: date},
     ];
     this.setState({
       list: newList,
-      todoCounter: nextId
+      todoCounter: nextId,
     });
   }
 
   addToStart() {
     const date = new Date();
-    const nextId = this.state.todoCounter + 1;
+    const nextId =
+      this.state.todoCounter + 1;
     const newList = [
-      { id: nextId, createdAt: date },
-      ...this.state.list
+      {id: nextId, createdAt: date},
+      ...this.state.list,
     ];
     this.setState({
       list: newList,
-      todoCounter: nextId
+      todoCounter: nextId,
     });
   }
 
   render() {
-    return(
+    return (
       <div>
-        <code>key=index</code><br/>
-        <button onClick={this.addToStart.bind(this)}>
+        <code>key=index</code>
+        <br />
+        <button
+          onClick={this.addToStart.bind(
+            this,
+          )}>
           Add New to Start
         </button>
-        <button onClick={this.addToEnd.bind(this)}>
+        <button
+          onClick={this.addToEnd.bind(
+            this,
+          )}>
           Add New to End
         </button>
-        <button onClick={this.sortByEarliest.bind(this)}>
+        <button
+          onClick={this.sortByEarliest.bind(
+            this,
+          )}>
           Sort by Earliest
         </button>
-        <button onClick={this.sortByLatest.bind(this)}>
+        <button
+          onClick={this.sortByLatest.bind(
+            this,
+          )}>
           Sort by Latest
         </button>
         <table>
           <tr>
-            <th>ID</th><th></th><th>created at</th>
+            <th>ID</th>
+            <th />
+            <th>created at</th>
           </tr>
-          {
-            this.state.list.map((todo, index) => (
-              <ToDo
-                key={index}
-                {...todo}
-              />
-            ))
-          }
+          {this.state.list.map(
+            (todo, index) => (
+              <ToDo key={index} {...todo} />
+            ),
+          )}
         </table>
       </div>
-    )
+    );
   }
 }
 
 ReactDOM.render(
   <ToDoList />,
-  document.getElementById('root')
+  document.getElementById('root'),
 );
diff --git a/examples/reconciliation/no-index-used-as-key.js b/examples/reconciliation/no-index-used-as-key.js
index b083118d..9f004bb9 100644
--- a/examples/reconciliation/no-index-used-as-key.js
+++ b/examples/reconciliation/no-index-used-as-key.js
@@ -1,8 +1,16 @@
-const ToDo = (props) => (
+const ToDo = props => (
   <tr>
-    <td><label>{props.id}</label></td>
-    <td><input/></td>
-    <td><label>{props.createdAt.toTimeString()}</label></td>
+    <td>
+      <label>{props.id}</label>
+    </td>
+    <td>
+      <input />
+    </td>
+    <td>
+      <label>
+        {props.createdAt.toTimeString()}
+      </label>
+    </td>
   </tr>
 );
 
@@ -13,91 +21,115 @@ class ToDoList extends React.Component {
     const toDoCounter = 1;
     this.state = {
       list: [
-        { id: toDoCounter, createdAt: date },
+        {
+          id: toDoCounter,
+          createdAt: date,
+        },
       ],
-      toDoCounter: toDoCounter
-    }
+      toDoCounter: toDoCounter,
+    };
   }
 
   sortByEarliest() {
-    const sortedList = this.state.list.sort((a, b) => {
-      return a.createdAt - b.createdAt;
-    });
+    const sortedList = this.state.list.sort(
+      (a, b) => {
+        return a.createdAt - b.createdAt;
+      },
+    );
     this.setState({
-      list: [...sortedList]
-    })
+      list: [...sortedList],
+    });
   }
 
   sortByLatest() {
-    const sortedList = this.state.list.sort((a, b) => {
-      return b.createdAt - a.createdAt;
-    });
+    const sortedList = this.state.list.sort(
+      (a, b) => {
+        return b.createdAt - a.createdAt;
+      },
+    );
     this.setState({
-      list: [...sortedList]
-    })
+      list: [...sortedList],
+    });
   }
 
   addToEnd() {
     const date = new Date();
-    const nextId = this.state.toDoCounter + 1;
+    const nextId =
+      this.state.toDoCounter + 1;
     const newList = [
       ...this.state.list,
-      { id: nextId, createdAt: date }
+      {id: nextId, createdAt: date},
     ];
     this.setState({
       list: newList,
-      toDoCounter: nextId
+      toDoCounter: nextId,
     });
   }
 
   addToStart() {
     const date = new Date();
-    const nextId = this.state.toDoCounter + 1;
+    const nextId =
+      this.state.toDoCounter + 1;
     const newList = [
-      { id: nextId, createdAt: date },
-      ...this.state.list
+      {id: nextId, createdAt: date},
+      ...this.state.list,
     ];
     this.setState({
       list: newList,
-      toDoCounter: nextId
+      toDoCounter: nextId,
     });
   }
 
   render() {
-    return(
+    return (
       <div>
-        <code>key=id</code><br/>
-        <button onClick={this.addToStart.bind(this)}>
+        <code>key=id</code>
+        <br />
+        <button
+          onClick={this.addToStart.bind(
+            this,
+          )}>
           Add New to Start
         </button>
-        <button onClick={this.addToEnd.bind(this)}>
+        <button
+          onClick={this.addToEnd.bind(
+            this,
+          )}>
           Add New to End
         </button>
-        <button onClick={this.sortByEarliest.bind(this)}>
+        <button
+          onClick={this.sortByEarliest.bind(
+            this,
+          )}>
           Sort by Earliest
         </button>
-        <button onClick={this.sortByLatest.bind(this)}>
+        <button
+          onClick={this.sortByLatest.bind(
+            this,
+          )}>
           Sort by Latest
         </button>
         <table>
           <tr>
-            <th>ID</th><th></th><th>created at</th>
+            <th>ID</th>
+            <th />
+            <th>created at</th>
           </tr>
-          {
-            this.state.list.map((todo, index) => (
+          {this.state.list.map(
+            (todo, index) => (
               <ToDo
                 key={todo.id}
                 {...todo}
               />
-            ))
-          }
+            ),
+          )}
         </table>
       </div>
-    )
+    );
   }
 }
 
 ReactDOM.render(
   <ToDoList />,
-  document.getElementById('root')
+  document.getElementById('root'),
 );
diff --git a/examples/tutorial-expanded-version.js b/examples/tutorial-expanded-version.js
index 767a233f..f3ad0d72 100644
--- a/examples/tutorial-expanded-version.js
+++ b/examples/tutorial-expanded-version.js
@@ -5,4 +5,4 @@
     <li>WhatsApp</li>
     <li>Oculus</li>
   </ul>
-</div>
\ No newline at end of file
+</div>;
diff --git a/package.json b/package.json
index 7ebc70ae..98c644d1 100644
--- a/package.json
+++ b/package.json
@@ -79,10 +79,14 @@
     "ci-check": "npm-run-all prettier:diff --parallel lint flow",
     "dev": "gatsby develop -H 0.0.0.0",
     "flow": "flow",
+    "format:source": "prettier --config .prettierrc --write \"{gatsby-*.js,{flow-typed,plugins,src}/**/*.js}\"",
+    "format:examples": "prettier --config .prettierrc --write --print-width 44 \"examples/**/*.js\"",
     "lint": "eslint .",
     "netlify": "yarn install && yarn build",
-    "prettier": "prettier --config .prettierrc --write \"{gatsby-*.js,{flow-typed,plugins,src}/**/*.js}\"",
-    "prettier:diff": "prettier --config .prettierrc --list-different \"{gatsby-*.js,{flow-typed,plugins,src}/**/*.js}\"",
+    "nit:source": "prettier --config .prettierrc --list-different \"{gatsby-*.js,{flow-typed,plugins,src}/**/*.js}\"",
+    "nit:examples": "prettier --config .prettierrc --list-different --print-width 44 \"examples/**/*.js\"",
+    "prettier": "yarn format:source && yarn format:examples",
+    "prettier:diff": "yarn nit:source && yarn nit:examples",
     "reset": "rimraf ./.cache"
   },
   "devDependencies": {

From f0f375387e2cdb3df68a5a7e539ee4cd3477f979 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <brian.david.vaughn@gmail.com>
Date: Thu, 23 Nov 2017 08:36:26 -0800
Subject: [PATCH 2/2] Changed trailing-commas to es5, moved example config to
 separate rc file

---
 .prettierrc.examples                          |  8 +++++
 .../composing-components.js                   |  2 +-
 .../extracting-components-continued.js        |  5 ++--
 .../extracting-components.js                  |  5 ++--
 .../rendering-a-component.js                  |  2 +-
 examples/es5-syntax-example.js                |  2 +-
 examples/hello-world.js                       |  2 +-
 examples/introducing-jsx.js                   |  2 +-
 examples/reconciliation/index-used-as-key.js  | 29 ++++++++++++-------
 .../reconciliation/no-index-used-as-key.js    | 24 ++++++++-------
 examples/tutorial-expanded-version.js         |  4 ++-
 package.json                                  |  4 +--
 12 files changed, 56 insertions(+), 33 deletions(-)
 create mode 100644 .prettierrc.examples

diff --git a/.prettierrc.examples b/.prettierrc.examples
new file mode 100644
index 00000000..1d6941b2
--- /dev/null
+++ b/.prettierrc.examples
@@ -0,0 +1,8 @@
+{
+  "bracketSpacing": false,
+  "jsxBracketSameLine": true,
+  "parser": "flow",
+  "printWidth": 40,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}
\ No newline at end of file
diff --git a/examples/components-and-props/composing-components.js b/examples/components-and-props/composing-components.js
index 7b27a2a1..f81f7668 100644
--- a/examples/components-and-props/composing-components.js
+++ b/examples/components-and-props/composing-components.js
@@ -14,5 +14,5 @@ function App() {
 
 ReactDOM.render(
   <App />,
-  document.getElementById('root'),
+  document.getElementById('root')
 );
diff --git a/examples/components-and-props/extracting-components-continued.js b/examples/components-and-props/extracting-components-continued.js
index 22e2fb43..bcd08b85 100644
--- a/examples/components-and-props/extracting-components-continued.js
+++ b/examples/components-and-props/extracting-components-continued.js
@@ -39,7 +39,8 @@ function Comment(props) {
 
 const comment = {
   date: new Date(),
-  text: 'I hope you enjoy learning React!',
+  text:
+    'I hope you enjoy learning React!',
   author: {
     name: 'Hello Kitty',
     avatarUrl:
@@ -52,5 +53,5 @@ ReactDOM.render(
     text={comment.text}
     author={comment.author}
   />,
-  document.getElementById('root'),
+  document.getElementById('root')
 );
diff --git a/examples/components-and-props/extracting-components.js b/examples/components-and-props/extracting-components.js
index 63ce9671..1ad153c3 100644
--- a/examples/components-and-props/extracting-components.js
+++ b/examples/components-and-props/extracting-components.js
@@ -27,7 +27,8 @@ function Comment(props) {
 
 const comment = {
   date: new Date(),
-  text: 'I hope you enjoy learning React!',
+  text:
+    'I hope you enjoy learning React!',
   author: {
     name: 'Hello Kitty',
     avatarUrl:
@@ -40,5 +41,5 @@ ReactDOM.render(
     text={comment.text}
     author={comment.author}
   />,
-  document.getElementById('root'),
+  document.getElementById('root')
 );
diff --git a/examples/components-and-props/rendering-a-component.js b/examples/components-and-props/rendering-a-component.js
index 9ca3c560..5458b516 100644
--- a/examples/components-and-props/rendering-a-component.js
+++ b/examples/components-and-props/rendering-a-component.js
@@ -5,5 +5,5 @@ function Welcome(props) {
 const element = <Welcome name="Sara" />;
 ReactDOM.render(
   element,
-  document.getElementById('root'),
+  document.getElementById('root')
 );
diff --git a/examples/es5-syntax-example.js b/examples/es5-syntax-example.js
index 20723ce5..122f7c39 100644
--- a/examples/es5-syntax-example.js
+++ b/examples/es5-syntax-example.js
@@ -1,5 +1,5 @@
 const element = <h1>Hello, world!</h1>;
 const container = document.getElementById(
-  'root',
+  'root'
 );
 ReactDOM.render(element, container);
diff --git a/examples/hello-world.js b/examples/hello-world.js
index 3a40a142..d0f87a59 100644
--- a/examples/hello-world.js
+++ b/examples/hello-world.js
@@ -1,4 +1,4 @@
 ReactDOM.render(
   <h1>Hello, world!</h1>,
-  document.getElementById('root'),
+  document.getElementById('root')
 );
diff --git a/examples/introducing-jsx.js b/examples/introducing-jsx.js
index 3900f34e..67013fa8 100644
--- a/examples/introducing-jsx.js
+++ b/examples/introducing-jsx.js
@@ -15,5 +15,5 @@ const element = (
 
 ReactDOM.render(
   element,
-  document.getElementById('root'),
+  document.getElementById('root')
 );
diff --git a/examples/reconciliation/index-used-as-key.js b/examples/reconciliation/index-used-as-key.js
index 74dda0e4..bb4d4284 100644
--- a/examples/reconciliation/index-used-as-key.js
+++ b/examples/reconciliation/index-used-as-key.js
@@ -33,8 +33,10 @@ class ToDoList extends React.Component {
   sortByEarliest() {
     const sortedList = this.state.list.sort(
       (a, b) => {
-        return a.createdAt - b.createdAt;
-      },
+        return (
+          a.createdAt - b.createdAt
+        );
+      }
     );
     this.setState({
       list: [...sortedList],
@@ -44,8 +46,10 @@ class ToDoList extends React.Component {
   sortByLatest() {
     const sortedList = this.state.list.sort(
       (a, b) => {
-        return b.createdAt - a.createdAt;
-      },
+        return (
+          b.createdAt - a.createdAt
+        );
+      }
     );
     this.setState({
       list: [...sortedList],
@@ -87,25 +91,25 @@ class ToDoList extends React.Component {
         <br />
         <button
           onClick={this.addToStart.bind(
-            this,
+            this
           )}>
           Add New to Start
         </button>
         <button
           onClick={this.addToEnd.bind(
-            this,
+            this
           )}>
           Add New to End
         </button>
         <button
           onClick={this.sortByEarliest.bind(
-            this,
+            this
           )}>
           Sort by Earliest
         </button>
         <button
           onClick={this.sortByLatest.bind(
-            this,
+            this
           )}>
           Sort by Latest
         </button>
@@ -117,8 +121,11 @@ class ToDoList extends React.Component {
           </tr>
           {this.state.list.map(
             (todo, index) => (
-              <ToDo key={index} {...todo} />
-            ),
+              <ToDo
+                key={index}
+                {...todo}
+              />
+            )
           )}
         </table>
       </div>
@@ -128,5 +135,5 @@ class ToDoList extends React.Component {
 
 ReactDOM.render(
   <ToDoList />,
-  document.getElementById('root'),
+  document.getElementById('root')
 );
diff --git a/examples/reconciliation/no-index-used-as-key.js b/examples/reconciliation/no-index-used-as-key.js
index 9f004bb9..04e3ffad 100644
--- a/examples/reconciliation/no-index-used-as-key.js
+++ b/examples/reconciliation/no-index-used-as-key.js
@@ -33,8 +33,10 @@ class ToDoList extends React.Component {
   sortByEarliest() {
     const sortedList = this.state.list.sort(
       (a, b) => {
-        return a.createdAt - b.createdAt;
-      },
+        return (
+          a.createdAt - b.createdAt
+        );
+      }
     );
     this.setState({
       list: [...sortedList],
@@ -44,8 +46,10 @@ class ToDoList extends React.Component {
   sortByLatest() {
     const sortedList = this.state.list.sort(
       (a, b) => {
-        return b.createdAt - a.createdAt;
-      },
+        return (
+          b.createdAt - a.createdAt
+        );
+      }
     );
     this.setState({
       list: [...sortedList],
@@ -87,25 +91,25 @@ class ToDoList extends React.Component {
         <br />
         <button
           onClick={this.addToStart.bind(
-            this,
+            this
           )}>
           Add New to Start
         </button>
         <button
           onClick={this.addToEnd.bind(
-            this,
+            this
           )}>
           Add New to End
         </button>
         <button
           onClick={this.sortByEarliest.bind(
-            this,
+            this
           )}>
           Sort by Earliest
         </button>
         <button
           onClick={this.sortByLatest.bind(
-            this,
+            this
           )}>
           Sort by Latest
         </button>
@@ -121,7 +125,7 @@ class ToDoList extends React.Component {
                 key={todo.id}
                 {...todo}
               />
-            ),
+            )
           )}
         </table>
       </div>
@@ -131,5 +135,5 @@ class ToDoList extends React.Component {
 
 ReactDOM.render(
   <ToDoList />,
-  document.getElementById('root'),
+  document.getElementById('root')
 );
diff --git a/examples/tutorial-expanded-version.js b/examples/tutorial-expanded-version.js
index f3ad0d72..61a7d094 100644
--- a/examples/tutorial-expanded-version.js
+++ b/examples/tutorial-expanded-version.js
@@ -1,5 +1,7 @@
 <div className="shopping-list">
-  <h1>Shopping List for {props.name}</h1>
+  <h1>
+    Shopping List for {props.name}
+  </h1>
   <ul>
     <li>Instagram</li>
     <li>WhatsApp</li>
diff --git a/package.json b/package.json
index 98c644d1..4b551bb2 100644
--- a/package.json
+++ b/package.json
@@ -80,11 +80,11 @@
     "dev": "gatsby develop -H 0.0.0.0",
     "flow": "flow",
     "format:source": "prettier --config .prettierrc --write \"{gatsby-*.js,{flow-typed,plugins,src}/**/*.js}\"",
-    "format:examples": "prettier --config .prettierrc --write --print-width 44 \"examples/**/*.js\"",
+    "format:examples": "prettier --config .prettierrc.examples --write \"examples/**/*.js\"",
     "lint": "eslint .",
     "netlify": "yarn install && yarn build",
     "nit:source": "prettier --config .prettierrc --list-different \"{gatsby-*.js,{flow-typed,plugins,src}/**/*.js}\"",
-    "nit:examples": "prettier --config .prettierrc --list-different --print-width 44 \"examples/**/*.js\"",
+    "nit:examples": "prettier --config .prettierrc.examples --list-different \"examples/**/*.js\"",
     "prettier": "yarn format:source && yarn format:examples",
     "prettier:diff": "yarn nit:source && yarn nit:examples",
     "reset": "rimraf ./.cache"