Changed trailing-commas to es5, moved example config to separate rc file

.prettierrc.examples

@@ -0,0 +1,8 @@
+{
+  "bracketSpacing": false,
+  "jsxBracketSameLine": true,
+  "parser": "flow",
+  "printWidth": 40,
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

examples/components-and-props/composing-components.js

@@ -14,5 +14,5 @@ function App() {
 
 ReactDOM.render(
   <App />,
-  document.getElementById('root'),
+  document.getElementById('root')
 );

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')
 );

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')
 );

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')
 );

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);

examples/hello-world.js

@@ -1,4 +1,4 @@
 ReactDOM.render(
   <h1>Hello, world!</h1>,
-  document.getElementById('root'),
+  document.getElementById('root')
 );

examples/introducing-jsx.js

@@ -15,5 +15,5 @@ const element = (
 
 ReactDOM.render(
   element,
-  document.getElementById('root'),
+  document.getElementById('root')
 );

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')
 );

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')
 );

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>

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"