diff --git a/CHANGELOG.md b/CHANGELOG.md
index e42daa2e3715e..0f77e73861c46 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -529,7 +529,7 @@ export const pageQuery = `
     }
   }
 }
-`
+`;
 ```
 
 You must now write:
@@ -545,7 +545,7 @@ export const pageQuery = graphql`
       }
     }
   }
-`
+`;
 ```
 
 ## [1.0.0-alpha10] - 2016-11-17
diff --git a/docs/blog/2017-02-21-1-0-progress-update-where-came-from-where-going/index.md b/docs/blog/2017-02-21-1-0-progress-update-where-came-from-where-going/index.md
index 80f2c102c2fbf..014dc65b19cf3 100644
--- a/docs/blog/2017-02-21-1-0-progress-update-where-came-from-where-going/index.md
+++ b/docs/blog/2017-02-21-1-0-progress-update-where-came-from-where-going/index.md
@@ -165,8 +165,8 @@ navigate around, Gatsby loads the JavaScript needed for each route.
 This means that one page with heavy imports:
 
 ```javascript
-import d3 from "d3"
-import threejs from "react-threejs"
+import d3 from "d3";
+import threejs from "react-threejs";
 ```
 
 ...won't affect the performance of the rest of the site.
@@ -281,11 +281,11 @@ the blog posts. Included with the component is an exported `pageQuery`.
 
 ```javascript
 // A simple React component for rendering a blog page.
-import React from "react"
+import React from "react";
 
 class BlogPostTemplate extends React.Component {
   render() {
-    ;<div>
+    <div>
       <h1>{this.props.data.markdown.frontmatter.title}</h1>
       <small>{this.props.data.markdown.frontmatter.date}</small>
       <div
@@ -293,11 +293,11 @@ class BlogPostTemplate extends React.Component {
           __html: this.props.data.markdown.html,
         }}
       />
-    </div>
+    </div>;
   }
 }
 
-export default BlogPostTemplate
+export default BlogPostTemplate;
 
 export const pageQuery = `
   query BlogPost($slug: String!) {
@@ -311,7 +311,7 @@ export const pageQuery = `
       }
     }
   }
-`
+`;
 ```
 
 All data parsing and processing is plugin-driven. So in time, any imaginable
diff --git a/docs/blog/2017-07-19-creating-a-blog-with-gatsby/index.md b/docs/blog/2017-07-19-creating-a-blog-with-gatsby/index.md
index 02c8c7372e25b..9d8fe685805c5 100644
--- a/docs/blog/2017-07-19-creating-a-blog-with-gatsby/index.md
+++ b/docs/blog/2017-07-19-creating-a-blog-with-gatsby/index.md
@@ -255,15 +255,15 @@ We'll want to create the file `src/templates/blog-post.js` (please create the
 `src/templates` folder if it does not yet exist!).
 
 ```javascript
-import React from "react"
-import Helmet from "react-helmet"
+import React from "react";
+import Helmet from "react-helmet";
 
 // import '../css/blog-post.css'; // make it pretty!
 
 export default function Template({
   data, // this prop will be injected by the GraphQL query we'll write in a bit
 }) {
-  const { markdownRemark: post } = data // data.markdownRemark holds our post data
+  const { markdownRemark: post } = data; // data.markdownRemark holds our post data
   return (
     <div className="blog-post-container">
       <Helmet title={`Your Blog Name - ${post.frontmatter.title}`} />
@@ -275,7 +275,7 @@ export default function Template({
         />
       </div>
     </div>
-  )
+  );
 }
 ```
 
@@ -377,13 +377,13 @@ Gatsby, as detailed in its [Node API specification][node-spec]. However, we only
 care about one particular API in this instance, `createPages`.
 
 ```javascript
-const path = require("path")
+const path = require("path");
 
 exports.createPages = ({ boundActionCreators, graphql }) => {
-  const { createPage } = boundActionCreators
+  const { createPage } = boundActionCreators;
 
-  const blogPostTemplate = path.resolve(`src/templates/blog-post.js`)
-}
+  const blogPostTemplate = path.resolve(`src/templates/blog-post.js`);
+};
 ```
 
 Nothing super complex yet! We're using the `createPages` API (which Gatsby will
@@ -541,14 +541,14 @@ create `src/pages/tags.js`, the path `http://localhost:8000/tags/` will be
 available within the browser and the statically generated site.
 
 ```javascript
-import React from "react"
-import Link from "gatsby-link"
-import Helmet from "react-helmet"
+import React from "react";
+import Link from "gatsby-link";
+import Helmet from "react-helmet";
 
 // import '../css/index.css'; // add some style if you want!
 
 export default function Index({ data }) {
-  const { edges: posts } = data.allMarkdownRemark
+  const { edges: posts } = data.allMarkdownRemark;
   return (
     <div className="blog-posts">
       {posts
@@ -562,10 +562,10 @@ export default function Index({ data }) {
               <h2>{post.frontmatter.date}</h2>
               <p>{post.excerpt}</p>
             </div>
-          )
+          );
         })}
     </div>
-  )
+  );
 }
 
 export const pageQuery = graphql`
@@ -584,7 +584,7 @@ export const pageQuery = graphql`
       }
     }
   }
-`
+`;
 ```
 
 OK! So we've followed a similar approach to our blog post template, so this
diff --git a/docs/blog/2017-10-01-migrating-my-blog-from-hexo-to-gatsby/index.md b/docs/blog/2017-10-01-migrating-my-blog-from-hexo-to-gatsby/index.md
index b2963f4aec326..aa825ceeb27b1 100644
--- a/docs/blog/2017-10-01-migrating-my-blog-from-hexo-to-gatsby/index.md
+++ b/docs/blog/2017-10-01-migrating-my-blog-from-hexo-to-gatsby/index.md
@@ -293,16 +293,16 @@ specify a `pageQuery` that will pass data into the default export of that page.
 
 ```jsx
 // src/pages/index.js
-import React from "react"
+import React from "react";
 
 export default class BlogIndex extends React.Component {
   render() {
     // Handle graphql errors
     if (this.props.errors && this.props.errors.length) {
       this.props.errors.forEach(({ message }) => {
-        console.error(`BlogIndex render errr: ${message}`)
-      })
-      return <h1>Errors found: Check the console for details</h1>
+        console.error(`BlogIndex render errr: ${message}`);
+      });
+      return <h1>Errors found: Check the console for details</h1>;
     }
 
     return (
@@ -312,7 +312,7 @@ export default class BlogIndex extends React.Component {
           <a key={i}>{node.frontmatter.title}</a>
         ))}
       </div>
-    )
+    );
   }
 }
 
@@ -328,7 +328,7 @@ export const pageQuery = graphql`
       }
     }
   }
-`
+`;
 ```
 
 This is a simplified example, but there are a few things going on that might not
@@ -352,7 +352,7 @@ Now let's looks specifically at where we render a link for each blog post:
 {
   this.props.data.allMarkdownRemark.edges.map(({ node }, i) => (
     <a key={i}>{node.frontmatter.title}</a>
-  ))
+  ));
 }
 ```
 
@@ -376,7 +376,7 @@ export const pageQuery = graphql`
       }
     }
   }
-`
+`;
 ```
 
 This is how you get data from Gatsby into your react components. Make sure you
@@ -441,7 +441,7 @@ export const pageQuery = graphql`
       }
     }
   }
-`
+`;
 ```
 
 ```jsx
@@ -450,7 +450,7 @@ export const pageQuery = graphql`
     <Link to={node.frontmatter.url} key={i}>
       {node.frontmatter.title}
     </Link>
-  ))
+  ));
 }
 ```
 
@@ -495,15 +495,15 @@ we add custom fields. Example:
 
 ```js
 // gatsby-node.js
-const { GraphQLString } = require("graphql")
+const { GraphQLString } = require("graphql");
 
 const getURL = node => {
   /* See the source link below for implementation */
-}
+};
 
 exports.setFieldsOnGraphQLNodeType = ({ type }) => {
   if (type.name !== "MarkdownRemark") {
-    return {}
+    return {};
   }
 
   return Promise.resolve({
@@ -511,8 +511,8 @@ exports.setFieldsOnGraphQLNodeType = ({ type }) => {
       type: GraphQLString,
       resolve: node => getURL(node),
     },
-  })
-}
+  });
+};
 ```
 
 > Source code for
@@ -564,16 +564,16 @@ case, `createPages`. In the same `gatsby-node.js` file as before:
 // .. other stuff from before...
 
 exports.createPages = ({ boundActionCreators }) => {
-  const { createPage } = boundActionCreators
-  const postTemplate = path.resolve("./src/templates/custom-page.js")
+  const { createPage } = boundActionCreators;
+  const postTemplate = path.resolve("./src/templates/custom-page.js");
 
   // Create a custom page!
   createPage({
     path: `/my-custom-page/`,
     component: postTemplate,
     context: {}, // Context will be passed in to the page query as graphql variables
-  })
-}
+  });
+};
 ```
 
 At the most basic level this method of page creation is quite simple: Grab the
@@ -600,8 +600,8 @@ markdownFiles.forEach(post => {
     context: {
       id: post.id,
     },
-  })
-})
+  });
+});
 ```
 
 I've included the pseudo code to highlight the fact that nothing too magical is
@@ -618,8 +618,8 @@ work.
 // NOTE: I'm using async/await to simplify the code since it's now natively supported
 // in Node 8.x. This means that our function will return a promise
 exports.createPages = async ({ graphql, boundActionCreators }) => {
-  const { createPage } = boundActionCreators
-  const postTemplate = path.resolve("./src/templates/post.js")
+  const { createPage } = boundActionCreators;
+  const postTemplate = path.resolve("./src/templates/post.js");
 
   // Using async await. Query will likely be very similar to your pageQuery in index.js
   const result = await graphql(`
@@ -633,11 +633,11 @@ exports.createPages = async ({ graphql, boundActionCreators }) => {
         }
       }
     }
-  `)
+  `);
 
   if (result.errors) {
-    console.log(result.errors)
-    throw new Error("Things broke, see console output above")
+    console.log(result.errors);
+    throw new Error("Things broke, see console output above");
   }
 
   // Create blog posts pages.
@@ -649,9 +649,9 @@ exports.createPages = async ({ graphql, boundActionCreators }) => {
         // Context will be passed in to the page query as graphql vars
         id: node.id,
       },
-    })
-  })
-}
+    });
+  });
+};
 ```
 
 Notice that the query is very similar to the `pageQuery` in index.js but it's
@@ -671,11 +671,11 @@ Here it is in all it's glory:
 
 ```jsx
 // src/templates/post.js
-import React from "react"
+import React from "react";
 
 export default class BlogPost extends React.Component {
   render() {
-    const post = this.props.data.markdownRemark
+    const post = this.props.data.markdownRemark;
 
     return (
       <div className="Post">
@@ -685,7 +685,7 @@ export default class BlogPost extends React.Component {
           className="content"
         />
       </div>
-    )
+    );
   }
 }
 
@@ -699,7 +699,7 @@ export const pageQuery = graphql`
       html
     }
   }
-`
+`;
 ```
 
 If you're not used to GraphQL syntax the `pageQuery` might be a little
diff --git a/docs/blog/2017-10-05-portfolio-site-gatsby-wordpress/index.md b/docs/blog/2017-10-05-portfolio-site-gatsby-wordpress/index.md
index 7f8c57545b4f4..ecdcf0370a7a7 100644
--- a/docs/blog/2017-10-05-portfolio-site-gatsby-wordpress/index.md
+++ b/docs/blog/2017-10-05-portfolio-site-gatsby-wordpress/index.md
@@ -81,7 +81,7 @@ export const projectsPageQuery = graphql`
       }
     }
   }
-`
+`;
 ```
 
 Pulling blog posts was even easier! If you’d like to sort them by date, ID,
@@ -103,7 +103,7 @@ export const postQuery = graphql`
       }
     }
   }
-`
+`;
 ```
 
 ## Wrap up and future
diff --git a/docs/blog/2017-10-16-making-website-building-fun/index.md b/docs/blog/2017-10-16-making-website-building-fun/index.md
index e32c96e8a168e..39c1b573fa664 100644
--- a/docs/blog/2017-10-16-making-website-building-fun/index.md
+++ b/docs/blog/2017-10-16-making-website-building-fun/index.md
@@ -20,14 +20,14 @@ simple I realized you almost don't need documentation. A React header component
 using it would look like this:
 
 ```jsx
-import React from "react"
-import Headroom from "react-headroom"
+import React from "react";
+import Headroom from "react-headroom";
 
 export default () => (
   <Headroom>
     <h1>You can put anything you'd like inside the Headroom Component</h1>
   </Headroom>
-)
+);
 ```
 
 Having coming from years of building things with Backbone.js and jQuery where
@@ -49,11 +49,11 @@ Compare this with the minimum code necessary for the original headroom.js.
 
 ```js
 // grab the element
-var myElement = document.querySelector("header")
+var myElement = document.querySelector("header");
 // construct an instance of Headroom, passing the element
-var headroom = new Headroom(myElement)
+var headroom = new Headroom(myElement);
 // initialise
-headroom.init()
+headroom.init();
 ```
 
 #### CSS
@@ -202,15 +202,15 @@ Here's what a really simple Gatsby page component using gatsby-image would look
 like:
 
 ```jsx
-import React from "react"
-import Img from "gatsby-image"
+import React from "react";
+import Img from "gatsby-image";
 
 export default ({ data }) => (
   <div>
     <h1>Hello gatsby-image</h1>
     <Img resolutions={data.file.childImageSharp.resolutions} />
   </div>
-)
+);
 ```
 
 So this is all very nice and it's far better to be able to use this from NPM vs.
@@ -248,15 +248,15 @@ The code I showed above was missing the GraphQL query. A full image component
 would look like:
 
 ```jsx
-import React from "react"
-import Img from "gatsby-image"
+import React from "react";
+import Img from "gatsby-image";
 
 export default ({ data }) => (
   <div>
     <h1>Hello gatsby-image</h1>
     <Img resolutions={data.file.childImageSharp.resolutions} />
   </div>
-)
+);
 
 export const query = graphql`
   query GatsbyImageSampleQuery {
@@ -271,7 +271,7 @@ export const query = graphql`
       }
     }
   }
-`
+`;
 ```
 
 So instead of a long pipeline of tasks to setup optimized images for your site,
diff --git a/docs/blog/2017-10-17-building-i18n-with-gatsby/index.md b/docs/blog/2017-10-17-building-i18n-with-gatsby/index.md
index 8794ce0b854e5..7deaf3b757e37 100644
--- a/docs/blog/2017-10-17-building-i18n-with-gatsby/index.md
+++ b/docs/blog/2017-10-17-building-i18n-with-gatsby/index.md
@@ -83,10 +83,10 @@ but copied here for convenience. You'll need to create an i18n component and
 import it somewhere (we did it in our index layout):
 
 ```jsx
-import i18n from "i18next"
-import Backend from "i18next-xhr-backend"
-import LanguageDetector from "i18next-browser-languagedetector"
-import { reactI18nextModule } from "react-i18next"
+import i18n from "i18next";
+import Backend from "i18next-xhr-backend";
+import LanguageDetector from "i18next-browser-languagedetector";
+import { reactI18nextModule } from "react-i18next";
 
 i18n
   .use(Backend)
@@ -108,9 +108,9 @@ i18n
     react: {
       wait: true,
     },
-  })
+  });
 
-export default i18n
+export default i18n;
 ```
 
 ## Locales
@@ -163,16 +163,16 @@ little hook to our `gatsby-node.js` file. It copies the locales folder post
 build and gets everything in the right place:
 
 ```javascript
-const fs = require("fs-extra")
-const path = require("path")
+const fs = require("fs-extra");
+const path = require("path");
 
 exports.onPostBuild = () => {
-  console.log("Copying locales")
+  console.log("Copying locales");
   fs.copySync(
     path.join(__dirname, "/src/locales"),
     path.join(__dirname, "/public/locales")
-  )
-}
+  );
+};
 ```
 
 ## Using with a component
@@ -184,23 +184,23 @@ React-i18next uses a HOC to wrap your component and provide some props to handle
 language switching. Here's our `PageHeader` component:
 
 ```jsx
-import React, { Component } from "react"
-import { translate } from "react-i18next"
+import React, { Component } from "react";
+import { translate } from "react-i18next";
 
 class PageHeader extends Component {
   render() {
-    const { t } = this.props
+    const { t } = this.props;
 
     return (
       <div className="PageHeader">
         <h2>{t("heading")}</h2>
         <p>{t("description")}</p>
       </div>
-    )
+    );
   }
 }
 
-export default translate("PageHeader")(PageHeader)
+export default translate("PageHeader")(PageHeader);
 ```
 
 Pretty simple! The string provided to `translate` is the corresponding JSON file
@@ -225,32 +225,32 @@ Finally, to make it easy for our users to switch language we need to create a
 little component. Here's an example from our site:
 
 ```jsx
-import React, { Component } from "react"
-import classNames from "classnames"
-import { translate } from "react-i18next"
+import React, { Component } from "react";
+import classNames from "classnames";
+import { translate } from "react-i18next";
 
 class LanguageSwitcher extends Component {
   constructor(props) {
-    super(props)
-    const { i18n } = this.props
-    this.state = { language: i18n.language }
+    super(props);
+    const { i18n } = this.props;
+    this.state = { language: i18n.language };
 
-    this.handleChangeLanguage = this.handleChangeLanguage.bind(this)
+    this.handleChangeLanguage = this.handleChangeLanguage.bind(this);
   }
 
   componentWillReceiveProps(nextProps) {
-    this.setState({ language: nextProps.i18n.language })
+    this.setState({ language: nextProps.i18n.language });
   }
 
   handleChangeLanguage(lng) {
-    const { i18n } = this.props
-    i18n.changeLanguage(lng)
+    const { i18n } = this.props;
+    i18n.changeLanguage(lng);
   }
 
   renderLanguageChoice({ code, label }) {
     const buttonClass = classNames("LanguageSwitcher__button", {
       "LanguageSwitcher__button--selected": this.state.language === code,
-    })
+    });
 
     return (
       <button
@@ -260,24 +260,24 @@ class LanguageSwitcher extends Component {
       >
         {label}
       </button>
-    )
+    );
   }
 
   render() {
     const languages = [
       { code: "en", label: "English" },
       { code: "cy", label: "Cymraeg" },
-    ]
+    ];
 
     return (
       <div className="LanguageSwitcher">
         {languages.map(language => this.renderLanguageChoice(language))}
       </div>
-    )
+    );
   }
 }
 
-export default translate("LanguageSwitcher")(LanguageSwitcher)
+export default translate("LanguageSwitcher")(LanguageSwitcher);
 ```
 
 This is a pretty simple component. We're setting the `language` state based on
diff --git a/docs/blog/2017-10-20-from-wordpress-to-developing-in-react-starting-to-see-it/index.md b/docs/blog/2017-10-20-from-wordpress-to-developing-in-react-starting-to-see-it/index.md
index 02bb1f50de83f..fef0a2f859a92 100644
--- a/docs/blog/2017-10-20-from-wordpress-to-developing-in-react-starting-to-see-it/index.md
+++ b/docs/blog/2017-10-20-from-wordpress-to-developing-in-react-starting-to-see-it/index.md
@@ -52,17 +52,17 @@ makes groking easier. I have my layout, template and config modules at hand in
 the folder structure, without duplication.
 
 ```js
-import React from "react"
+import React from "react";
 // Template for blog page
 export default ({ data }) => {
-  const post = data.markdownRemark
+  const post = data.markdownRemark;
   return (
     <div>
       <h1>{post.frontmatter.title}</h1>
       <div dangerouslySetInnerHTML={{ __html: post.html }} />
     </div>
-  )
-}
+  );
+};
 // The data query
 export const query = graphql`
   query BlogPostQuery($slug: String!) {
@@ -74,7 +74,7 @@ export const query = graphql`
       }
     }
   }
-`
+`;
 ```
 
 Whilst this might _look_ weird, it actually makes it much easier to understand
@@ -111,7 +111,7 @@ export const query = graphql`
       }
     }
   }
-`
+`;
 ```
 
 Aside from those pesky tick characters, which are sometimes hard to spot for a
diff --git a/docs/blog/2017-11-06-migrate-hugo-gatsby/index.md b/docs/blog/2017-11-06-migrate-hugo-gatsby/index.md
index 7cf34da326cdf..aaf81733b48cc 100644
--- a/docs/blog/2017-11-06-migrate-hugo-gatsby/index.md
+++ b/docs/blog/2017-11-06-migrate-hugo-gatsby/index.md
@@ -98,7 +98,7 @@ This might sound way more complicated than what it is:
 
 ```jsx
 exports.createPages = ({ graphql, boundActionCreators }) => {
-  const { createPage } = boundActionCreators
+  const { createPage } = boundActionCreators;
   graphql(`
     {
       allMarkdownRemark {
@@ -114,10 +114,10 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
       }
     }
   `).then(result => {
-    const posts = result.data.allMarkdownRemark.edges
+    const posts = result.data.allMarkdownRemark.edges;
     // Create content programatically here
-  })
-}
+  });
+};
 ```
 
 As you see, getting the list of posts can be done in a single query.
@@ -127,10 +127,10 @@ prefer to keep in a separate module. For example, creating posts works like
 following:
 
 ```jsx
-const path = require(`path`)
+const path = require(`path`);
 
 module.exports = (createPage, nodes) => {
-  const template = path.resolve(`src/templates/post.js`)
+  const template = path.resolve(`src/templates/post.js`);
 
   nodes.map(({ node }) => {
     if (node.frontmatter.slug) {
@@ -140,10 +140,10 @@ module.exports = (createPage, nodes) => {
         context: {
           slug: node.frontmatter.slug,
         },
-      })
+      });
     }
-  })
-}
+  });
+};
 ```
 
 I re-use the `slug` field of the frontmatter of my existing structure. I don't
@@ -233,12 +233,12 @@ both tags and pagination scenarios. I kept them as separate action creators and
 I just called them in the main creator function like this:
 
 ```jsx
-const createPostPages = require(`./gatsby-actions/createPostPages`)
-const createPaginatedPostsPages = require(`./gatsby-actions/createPaginatedPostsPages`)
-const createTagPages = require(`./gatsby-actions/createTagPages`)
+const createPostPages = require(`./gatsby-actions/createPostPages`);
+const createPaginatedPostsPages = require(`./gatsby-actions/createPaginatedPostsPages`);
+const createTagPages = require(`./gatsby-actions/createTagPages`);
 
 exports.createPages = ({ graphql, boundActionCreators }) => {
-  const { createPage } = boundActionCreators
+  const { createPage } = boundActionCreators;
   graphql(`
     {
       allMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC }) {
@@ -254,41 +254,41 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
       }
     }
   `).then(result => {
-    const posts = result.data.allMarkdownRemark.edges
-    createPostPages(createPage, posts)
-    createPaginatedPostsPages(createPage, posts)
-    createTagPages(createPage, posts)
-  })
-}
+    const posts = result.data.allMarkdownRemark.edges;
+    createPostPages(createPage, posts);
+    createPaginatedPostsPages(createPage, posts);
+    createTagPages(createPage, posts);
+  });
+};
 ```
 
 Easy to read, understand and mantain. The pagination module is a bit longer than
 the one of the posts:
 
 ```jsx
-const path = require(`path`)
+const path = require(`path`);
 
 module.exports = (createPage, nodes) => {
-  const template = path.resolve(`src/templates/postList.js`)
-  const paginateSize = 10
+  const template = path.resolve(`src/templates/postList.js`);
+  const paginateSize = 10;
 
   // Split posts into arrays of length equal to number posts on each page/paginateSize
   const groupedPages = nodes
     .map((node, index) => {
       return index % paginateSize === 0
         ? nodes.slice(index, index + paginateSize)
-        : null
+        : null;
     })
-    .filter(item => item)
+    .filter(item => item);
 
   // Create new indexed route for each array
   groupedPages.forEach((group, index, groups) => {
-    const pageIndex = index === 0 ? `` : index + 1
-    const paginationRoute = `/blog/${pageIndex}`
+    const pageIndex = index === 0 ? `` : index + 1;
+    const paginationRoute = `/blog/${pageIndex}`;
     // Avoid showing `Previous` link on first page - passed to context
-    const first = index === 0 ? true : false
+    const first = index === 0 ? true : false;
     // Avoid showing `Next` link if this is the last page - passed to context
-    const last = index === groups.length - 1 ? true : false
+    const last = index === groups.length - 1 ? true : false;
 
     return createPage({
       path: paginationRoute,
@@ -299,9 +299,9 @@ module.exports = (createPage, nodes) => {
         last,
         index: index + 1,
       },
-    })
-  })
-}
+    });
+  });
+};
 ```
 
 Then, pull context information in the React component:
@@ -358,7 +358,7 @@ createPage({
   context: {
     posts,
   },
-})
+});
 ```
 
 For the inner tag page:
@@ -372,7 +372,7 @@ createPage({
     post,
     tag: tagName,
   },
-})
+});
 ```
 
 ### Admin panel
@@ -425,8 +425,8 @@ This is my admin page React component which is placed in `src/pages/admin` so
 that Gatsby delivers the HTML page at `/admin`.
 
 ```jsx
-import React from "react"
-import Helmet from "react-helmet"
+import React from "react";
+import Helmet from "react-helmet";
 
 const AdminPage = () => (
   <div className="admin">
@@ -446,9 +446,9 @@ const AdminPage = () => (
       />
     </Helmet>
   </div>
-)
+);
 
-export default AdminPage
+export default AdminPage;
 ```
 
 In order for NetlifyCMS script to find the configuration file correctly,
diff --git a/docs/blog/2017-11-08-migrate-from-jekyll-to-gatsby/index.md b/docs/blog/2017-11-08-migrate-from-jekyll-to-gatsby/index.md
index da28fb4da1eb9..011e9b5e6df00 100644
--- a/docs/blog/2017-11-08-migrate-from-jekyll-to-gatsby/index.md
+++ b/docs/blog/2017-11-08-migrate-from-jekyll-to-gatsby/index.md
@@ -44,7 +44,7 @@ matter block, so you don't have to change anything. You just need to install
 Then, in your `gatsby-config.js` file add:
 
 ```js
-plugins: ["gatsby-transformer-remark"]
+plugins: ["gatsby-transformer-remark"];
 ```
 
 ### Theme
@@ -88,30 +88,30 @@ extension API to tweak the slug:
 
 ```js
 exports.onCreateNode = ({ node, getNode, boundActionCreators }) => {
-  const { createNodeField } = boundActionCreators
+  const { createNodeField } = boundActionCreators;
 
   if (node.internal.type === `MarkdownRemark`) {
-    const { categories } = node.frontmatter
+    const { categories } = node.frontmatter;
 
-    const filename = createFilePath({ node, getNode, basePath: `pages` })
+    const filename = createFilePath({ node, getNode, basePath: `pages` });
 
     // get the date and title from the file name
     const [, date, title] = filename.match(
       /^\/([\d]{4}-[\d]{2}-[\d]{2})-{1}(.+)\/$/
-    )
+    );
 
     // create a new slug concatenating everything
     const slug = `/${slugify(
       categories.concat([date]).join("-"),
       "/"
-    )}/${title}/`
+    )}/${title}/`;
 
-    createNodeField({ node, name: `slug`, value: slug })
+    createNodeField({ node, name: `slug`, value: slug });
 
     // save the date for later use
-    createNodeField({ node, name: `date`, value: date })
+    createNodeField({ node, name: `date`, value: date });
   }
-}
+};
 ```
 
 ### Deploy
diff --git a/docs/blog/gatsby-v1.md b/docs/blog/gatsby-v1.md
index 43f7cdbe5bfad..7b11267508a61 100644
--- a/docs/blog/gatsby-v1.md
+++ b/docs/blog/gatsby-v1.md
@@ -162,7 +162,7 @@ the blog posts. Included with the component is an exported `pageQuery`.
 
 ```jsx
 // A simple React component for rendering a blog page.
-import React from "react"
+import React from "react";
 
 class BlogPostTemplate extends React.Component {
   render() {
@@ -176,11 +176,11 @@ class BlogPostTemplate extends React.Component {
           }}
         />
       </div>
-    )
+    );
   }
 }
 
-export default BlogPostTemplate
+export default BlogPostTemplate;
 
 export const pageQuery = graphql`
   query BlogPost($slug: String!) {
@@ -194,7 +194,7 @@ export const pageQuery = graphql`
       }
     }
   }
-`
+`;
 ```
 
 All data sourcing and transforming is plugin-driven. So in time, any imaginable
@@ -276,8 +276,8 @@ you navigate around, Gatsby loads in the code needed for each route.
 This means that one page with heavy imports:
 
 ```javascript
-import d3 from "d3"
-import threejs from "react-threejs"
+import d3 from "d3";
+import threejs from "react-threejs";
 ```
 
 ...won't affect the performance of the rest of the site.
diff --git a/docs/blog/gatsbygram-case-study/index.md b/docs/blog/gatsbygram-case-study/index.md
index 7b0424b34f0e5..85ccbadde83fe 100644
--- a/docs/blog/gatsbygram-case-study/index.md
+++ b/docs/blog/gatsbygram-case-study/index.md
@@ -149,18 +149,18 @@ the site's
 [`gatsby-node.js` file](https://github.com/gatsbyjs/gatsby/blob/master/examples/gatsbygram/gatsby-node.js):
 
 ```javascript
-const _ = require(`lodash`)
-const Promise = require(`bluebird`)
-const path = require(`path`)
-const slug = require(`slug`)
-const slash = require(`slash`)
+const _ = require(`lodash`);
+const Promise = require(`bluebird`);
+const path = require(`path`);
+const slug = require(`slug`);
+const slash = require(`slash`);
 
 // Implement the Gatsby API “createPages”. This is
 // called after the Gatsby bootstrap is finished so you have
 // access to any information necessary to programmatically
 // create pages.
 exports.createPages = ({ graphql, boundActionCreators }) => {
-  const { createPage } = boundActionCreators
+  const { createPage } = boundActionCreators;
 
   return new Promise((resolve, reject) => {
     // The “graphql” function allows us to run arbitrary
@@ -188,11 +188,11 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
         `
       ).then(result => {
         if (result.errors) {
-          reject(new Error(result.errors))
+          reject(new Error(result.errors));
         }
 
         // Create image post pages.
-        const postTemplate = path.resolve(`src/templates/post-page.js`)
+        const postTemplate = path.resolve(`src/templates/post-page.js`);
         // We want to create a detailed page for each
         // Instagram post. Since the scrapped Instagram data
         // already includes an ID field, we just use that for
@@ -211,14 +211,14 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
             context: {
               id: edge.node.id,
             },
-          })
-        })
+          });
+        });
 
-        return
+        return;
       })
-    )
-  })
-}
+    );
+  });
+};
 ```
 
 ## Using templates
@@ -237,8 +237,8 @@ we pass the id to the post. Below we use that id to query our `GraphQL` schema
 and return a fully formed page:
 
 ```jsx
-import React from "react"
-import PostDetail from "../components/post-detail"
+import React from "react";
+import PostDetail from "../components/post-detail";
 
 class PostTemplate extends React.Component {
   render() {
@@ -246,11 +246,11 @@ class PostTemplate extends React.Component {
       // PostDetail is used for this detail page and
       // also in the modal.
       <PostDetail post={this.props.data.posts} />
-    )
+    );
   }
 }
 
-export default PostTemplate
+export default PostTemplate;
 
 // The post template's GraphQL query. Notice the “id”
 // variable which is passed in. We set this on the page
@@ -291,7 +291,7 @@ export const pageQuery = `
       }
     }
   }
-`
+`;
 ```
 
 ## Creating React.js component pages
@@ -328,8 +328,8 @@ loading your site from a service worker.
 A simple layout component might look something like this.
 
 ```jsx
-import React from "react"
-import Link from "gatsby-link"
+import React from "react";
+import Link from "gatsby-link";
 
 class Layout extends React.Component {
   render() {
@@ -340,19 +340,19 @@ class Layout extends React.Component {
         {/* Render children pages */}
         {this.props.children()}
       </div>
-    )
+    );
   }
 }
 
-export default Layout
+export default Layout;
 ```
 
 Every page will be rendered as children of the `Layout` component:
 
 ```jsx
-;<Layout>
+<Layout>
   <Page />
-</Layout>
+</Layout>;
 ```
 
 Gatsbygram's layout component is somewhat more complicated than most sites as it
@@ -459,7 +459,7 @@ module.exports = {
       },
     },
   ],
-}
+};
 ```
 
 ## Styles
diff --git a/docs/docs/add-custom-webpack-config.md b/docs/docs/add-custom-webpack-config.md
index dfbf299f9c34e..89183dc792fef 100644
--- a/docs/docs/add-custom-webpack-config.md
+++ b/docs/docs/add-custom-webpack-config.md
@@ -47,32 +47,32 @@ exports.modifyWebpackConfig = ({ config, stage }) => {
     case "develop":
       config.loader("css", {
         include: /flexboxgrid/,
-      })
+      });
 
-      break
+      break;
 
     case "build-css":
       config.loader("css", {
         include: /flexboxgrid/,
-      })
+      });
 
-      break
+      break;
 
     case "build-html":
       config.loader("css", {
         include: /flexboxgrid/,
-      })
+      });
 
-      break
+      break;
 
     case "build-javascript":
       config.loader("css", {
         include: /flexboxgrid/,
-      })
+      });
 
-      break
+      break;
   }
 
-  return config
-}
+  return config;
+};
 ```
diff --git a/docs/docs/adding-images-fonts-files.md b/docs/docs/adding-images-fonts-files.md
index ccac6258fd52a..52262619588e4 100644
--- a/docs/docs/adding-images-fonts-files.md
+++ b/docs/docs/adding-images-fonts-files.md
@@ -17,17 +17,17 @@ jpeg, png, gif, mp4, webm, wav, mp3, m4a, aac, and oga.
 Here is an example:
 
 ```js
-import React from "react"
-import logo from "./logo.png" // Tell Webpack this JS file uses this image
+import React from "react";
+import logo from "./logo.png"; // Tell Webpack this JS file uses this image
 
-console.log(logo) // /logo.84287d09.png
+console.log(logo); // /logo.84287d09.png
 
 function Header() {
   // Import result is the URL of your image
-  return <img src={logo} alt="Logo" />
+  return <img src={logo} alt="Logo" />;
 }
 
-export default Header
+export default Header;
 ```
 
 This ensures that when the project is built, Webpack will correctly move the
diff --git a/docs/docs/api-proxy.md b/docs/docs/api-proxy.md
index 2cd3a1ab94075..def7fcbd17226 100644
--- a/docs/docs/api-proxy.md
+++ b/docs/docs/api-proxy.md
@@ -14,7 +14,7 @@ module.exports = {
     prefix: "/api",
     url: "http://dev-mysite.com/api/",
   },
-}
+};
 ```
 
 This way, when you `fetch('/api/todos')` in development, the development server
diff --git a/docs/docs/building-with-components.md b/docs/docs/building-with-components.md
index 73375319cad74..23f1867c52abc 100644
--- a/docs/docs/building-with-components.md
+++ b/docs/docs/building-with-components.md
@@ -61,20 +61,20 @@ Example:
 `src/pages/about.jsx`
 
 ```jsx
-import React, { Component } from "react"
+import React, { Component } from "react";
 
 class AboutPage extends Component {
   render() {
-    const config = this.props.data.site.siteMetadata
+    const config = this.props.data.site.siteMetadata;
     return (
       <div className="about-container">
         <p>About me.</p>
       </div>
-    )
+    );
   }
 }
 
-export default AboutPage
+export default AboutPage;
 ```
 
 ### Page template components
@@ -92,22 +92,22 @@ introduction to programmatically creating pages.
 Example:
 
 ```jsx
-import React from "react"
+import React from "react";
 
 class BlogPostTemplate extends React.Component {
   render() {
-    const post = this.props.data.markdownRemark
+    const post = this.props.data.markdownRemark;
 
     return (
       <div>
         <h1>{post.frontmatter.title}</h1>
         <div dangerouslySetInnerHTML={{ __html: post.html }} />
       </div>
-    )
+    );
   }
 }
 
-export default BlogPostTemplate
+export default BlogPostTemplate;
 
 export const pageQuery = graphql`
   query BlogPostBySlug($slug: String!) {
@@ -118,7 +118,7 @@ export const pageQuery = graphql`
       }
     }
   }
-`
+`;
 ```
 
 ### Layout components
@@ -129,12 +129,12 @@ portions of pages that are shared across pages like headers and footers.
 Example:
 
 ```jsx
-import React from "react"
-import Navigation from "../components/Navigation/Navigation.jsx"
+import React from "react";
+import Navigation from "../components/Navigation/Navigation.jsx";
 
 export default class Template extends React.Component {
   render() {
-    return <Navigation>{this.props.children()}</Navigation>
+    return <Navigation>{this.props.children()}</Navigation>;
   }
 }
 ```
@@ -154,28 +154,28 @@ have an html.js.
 Example:
 
 ```jsx
-import React from "react"
-import favicon from "./favicon.png"
+import React from "react";
+import favicon from "./favicon.png";
 
-let inlinedStyles = ""
+let inlinedStyles = "";
 if (process.env.NODE_ENV === "production") {
   try {
-    inlinedStyles = require("!raw-loader!../public/styles.css")
+    inlinedStyles = require("!raw-loader!../public/styles.css");
   } catch (e) {
-    console.log(e)
+    console.log(e);
   }
 }
 
 export default class HTML extends React.Component {
   render() {
-    let css
+    let css;
     if (process.env.NODE_ENV === "production") {
       css = (
         <style
           id="gatsby-inlined-css"
           dangerouslySetInnerHTML={{ __html: inlinedStyles }}
         />
-      )
+      );
     }
     return (
       <html lang="en">
@@ -197,7 +197,7 @@ export default class HTML extends React.Component {
           {this.props.postBodyComponents}
         </body>
       </html>
-    )
+    );
   }
 }
 ```
diff --git a/docs/docs/create-source-plugin.md b/docs/docs/create-source-plugin.md
index cca1613e8657f..8d6fc65527a43 100644
--- a/docs/docs/create-source-plugin.md
+++ b/docs/docs/create-source-plugin.md
@@ -61,17 +61,17 @@ Your `gatsby-node.js` should look something like:
 
 ```javascript
 exports.sourceNodes = async ({ boundActionCreators }) => {
-  const { createNode } = boundActionCreators
+  const { createNode } = boundActionCreators;
   // Create nodes here, generally by downloading data
   // from a remote API.
-  const data = await fetch(REMOTE_API)
+  const data = await fetch(REMOTE_API);
 
   // Process data into nodes.
-  data.forEach(datum => createNode(processDatum(datum)))
+  data.forEach(datum => createNode(processDatum(datum)));
 
   // We're done, return.
-  return
-}
+  return;
+};
 ```
 
 Puruse the [`sourceNodes`](/docs/node-apis/#sourceNodes) and
diff --git a/docs/docs/creating-and-modifying-pages.md b/docs/docs/creating-and-modifying-pages.md
index 5c8ae4b15ca4b..933885cd021f5 100644
--- a/docs/docs/creating-and-modifying-pages.md
+++ b/docs/docs/creating-and-modifying-pages.md
@@ -53,10 +53,10 @@ of the markdown file.
 // Implement the Gatsby API “createPages”. This is called once the
 // data layer is bootstrapped to let plugins create pages from data.
 exports.createPages = ({ boundActionCreators, graphql }) => {
-  const { createPage } = boundActionCreators
+  const { createPage } = boundActionCreators;
 
   return new Promise((resolve, reject) => {
-    const blogPostTemplate = path.resolve(`src/templates/blog-post.js`)
+    const blogPostTemplate = path.resolve(`src/templates/blog-post.js`);
     // Query for markdown nodes to use in creating pages.
     resolve(
       graphql(
@@ -75,12 +75,12 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
         `
       ).then(result => {
         if (result.errors) {
-          reject(result.errors)
+          reject(result.errors);
         }
 
         // Create pages for each markdown file.
         result.data.allMarkdownRemark.edges.forEach(({ node }) => {
-          const path = node.frontmatter.path
+          const path = node.frontmatter.path;
           createPage({
             path,
             component: blogPostTemplate,
@@ -91,12 +91,12 @@ exports.createPages = ({ boundActionCreators, graphql }) => {
             context: {
               path,
             },
-          })
-        })
+          });
+        });
       })
-    )
-  })
-}
+    );
+  });
+};
 ```
 
 ## Modifying pages created by core or plugins
@@ -116,24 +116,24 @@ To do this, in your site's `gatsby-node.js` add code similar to the following:
 // Implement the Gatsby API “onCreatePage”. This is
 // called after every page is created.
 exports.onCreatePage = ({ page, boundActionCreators }) => {
-  const { createPage, deletePage } = boundActionCreators
+  const { createPage, deletePage } = boundActionCreators;
 
   return new Promise((resolve, reject) => {
     // Remove trailing slash
     const newPage = Object.assign({}, page, {
       path: page.path === `/` ? page.path : page.path.replace(/\/$/, ``),
-    })
+    });
 
     if (newPage.path !== page.path) {
       // Remove the old page
-      deletePage(page)
+      deletePage(page);
       // Add the new page
-      createPage(newPage)
+      createPage(newPage);
     }
 
-    resolve()
-  })
-}
+    resolve();
+  });
+};
 ```
 
 ### Creating client-only routes
@@ -147,17 +147,17 @@ like the following:
 // Implement the Gatsby API “onCreatePage”. This is
 // called after every page is created.
 exports.onCreatePage = async ({ page, boundActionCreators }) => {
-  const { createPage } = boundActionCreators
+  const { createPage } = boundActionCreators;
 
   // page.matchPath is a special key that's used for matching pages
   // only on the client.
   if (page.path.match(/^\/app/)) {
-    page.matchPath = "/app/:path"
+    page.matchPath = "/app/:path";
 
     // Update the page.
-    createPage(page)
+    createPage(page);
   }
-}
+};
 ```
 
 ### Choosing the page layout
@@ -174,18 +174,18 @@ components in the `/layouts/` directory are automatically available.
 // Implement the Gatsby API “onCreatePage”. This is
 // called after every page is created.
 exports.onCreatePage = async ({ page, boundActionCreators }) => {
-  const { createPage } = boundActionCreators
+  const { createPage } = boundActionCreators;
 
   return new Promise((resolve, reject) => {
     if (page.path.match(/^\/landing-page/)) {
       // It's assumed that `landingPage.js` exists in the `/layouts/` directory
-      page.layout = "landingPage"
+      page.layout = "landingPage";
 
       // Update the page.
-      createPage(page)
+      createPage(page);
     }
 
-    resolve()
-  })
-}
+    resolve();
+  });
+};
 ```
diff --git a/docs/docs/custom-html.md b/docs/docs/custom-html.md
index b4dfbaa331c02..405e60227df5e 100644
--- a/docs/docs/custom-html.md
+++ b/docs/docs/custom-html.md
@@ -34,9 +34,9 @@ If you see this error: `Uncaught Error: _registerComponent(...): Target containe
 `___gatsby` like:
 
 ```jsx
-;<div
+<div
   key={`body`}
   id="___gatsby"
   dangerouslySetInnerHTML={{ __html: this.props.body }}
-/>
+/>;
 ```
diff --git a/docs/docs/debugging-html-builds.md b/docs/docs/debugging-html-builds.md
index 5cf7fb2fe14f3..a932ac6f4c8b9 100644
--- a/docs/docs/debugging-html-builds.md
+++ b/docs/docs/debugging-html-builds.md
@@ -26,11 +26,11 @@ Errors while building static HTML files generally happen for two reasons.
 ```javascript
 // Requiring function causes error during builds
 // as the code tries to reference window
-const module = require("module") // Error
+const module = require("module"); // Error
 
 // Wrap the require in check for window
 if (typeof window !== `undefined`) {
-  const module = require("module") // Error
+  const module = require("module"); // Error
 }
 ```
 
@@ -52,7 +52,7 @@ exports.modifyWebpackConfig = ({ config, stage }) => {
     config.loader("null", {
       test: /bad-module/,
       loader: "null-loader",
-    })
+    });
   }
-}
+};
 ```
diff --git a/docs/docs/gatsby-style-guide.md b/docs/docs/gatsby-style-guide.md
index ba9576aa15f40..963cd32cc84c8 100644
--- a/docs/docs/gatsby-style-guide.md
+++ b/docs/docs/gatsby-style-guide.md
@@ -218,7 +218,7 @@ Here are specific formatting guidelines for any code:
 
   ```javascript
   function logTheThings(stuff) {
-    console.log(stuff)
+    console.log(stuff);
   }
   ```
 
diff --git a/docs/docs/migrating-from-v0-to-v1.md b/docs/docs/migrating-from-v0-to-v1.md
index 95f3ac70d504e..9a8a950552664 100644
--- a/docs/docs/migrating-from-v0-to-v1.md
+++ b/docs/docs/migrating-from-v0-to-v1.md
@@ -67,7 +67,7 @@ module.exports = {
   siteMetadata: {
     title: `My Sweet Gatsby Site!`,
   },
-}
+};
 ```
 
 and a minimal query would look like
@@ -162,7 +162,7 @@ module.exports = {
     },
     `gatsby-plugin-sharp`,
   ],
-}
+};
 ```
 
 ### Create slugs for markdown files
@@ -174,26 +174,26 @@ Here's how you do that.
 
 ```javascript
 // In your gatsby-node.js
-const path = require("path")
+const path = require("path");
 
 exports.onCreateNode = ({ node, boundActionCreators, getNode }) => {
-  const { createNodeField } = boundActionCreators
-  let slug
+  const { createNodeField } = boundActionCreators;
+  let slug;
   if (node.internal.type === `MarkdownRemark`) {
-    const fileNode = getNode(node.parent)
-    const parsedFilePath = path.parse(fileNode.relativePath)
+    const fileNode = getNode(node.parent);
+    const parsedFilePath = path.parse(fileNode.relativePath);
     if (parsedFilePath.name !== `index` && parsedFilePath.dir !== ``) {
-      slug = `/${parsedFilePath.dir}/${parsedFilePath.name}/`
+      slug = `/${parsedFilePath.dir}/${parsedFilePath.name}/`;
     } else if (parsedFilePath.dir === ``) {
-      slug = `/${parsedFilePath.name}/`
+      slug = `/${parsedFilePath.name}/`;
     } else {
-      slug = `/${parsedFilePath.dir}/`
+      slug = `/${parsedFilePath.dir}/`;
     }
 
     // Add slug as a field on the node.
-    createNodeField({ node, name: `slug`, value: slug })
+    createNodeField({ node, name: `slug`, value: slug });
   }
-}
+};
 ```
 
 Now we can create pages for each markdown file using our slug. In the same
@@ -201,11 +201,11 @@ Now we can create pages for each markdown file using our slug. In the same
 
 ```javascript
 exports.createPages = ({ graphql, boundActionCreators }) => {
-  const { createPage } = boundActionCreators
+  const { createPage } = boundActionCreators;
 
   return new Promise((resolve, reject) => {
-    const pages = []
-    const blogPost = path.resolve("src/templates/blog-post.js")
+    const pages = [];
+    const blogPost = path.resolve("src/templates/blog-post.js");
     // Query for all markdown "nodes" and for the slug we previously created.
     resolve(
       graphql(
@@ -224,8 +224,8 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
         `
       ).then(result => {
         if (result.errors) {
-          console.log(result.errors)
-          reject(result.errors)
+          console.log(result.errors);
+          reject(result.errors);
         }
 
         // Create blog posts pages.
@@ -236,14 +236,14 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
             context: {
               slug: edge.node.fields.slug,
             },
-          })
-        })
+          });
+        });
 
-        return
+        return;
       })
-    )
-  })
-}
+    );
+  });
+};
 ```
 
 So we've now generated the pathname or slug for each markdown page as well as
@@ -258,22 +258,22 @@ specifying the data needs of the component. As a start, make the component look
 like the following. You can make it more complex once the basics are working.
 
 ```javascript
-import React from "react"
+import React from "react";
 
 class BlogPostTemplate extends React.Component {
   render() {
-    const post = this.props.data.markdownRemark
+    const post = this.props.data.markdownRemark;
 
     return (
       <div>
         <h1>{post.frontmatter.title}</h1>
         <div dangerouslySetInnerHTML={{ __html: post.html }} />
       </div>
-    )
+    );
   }
 }
 
-export default BlogPostTemplate
+export default BlogPostTemplate;
 
 export const pageQuery = graphql`
   query BlogPostBySlug($slug: String!) {
@@ -284,7 +284,7 @@ export const pageQuery = graphql`
       }
     }
   }
-`
+`;
 ```
 
 At the bottom of the file you'll notice the graphql query. This is how pages and
@@ -313,10 +313,10 @@ Also the target div now must have an id of `___gatsby`. So the body section of
 your `html.js` should look like:
 
 ```jsx
-;<body>
+<body>
   <div id="___gatsby" dangerouslySetInnerHTML={{ __html: this.props.body }} />
   {this.props.postBodyComponents}
-</body>
+</body>;
 ```
 
 ## \_template.js is now src/layouts/index.js
diff --git a/docs/docs/path-prefix.md b/docs/docs/path-prefix.md
index 758b6abbf8ca4..6f14aaf36e1dd 100644
--- a/docs/docs/path-prefix.md
+++ b/docs/docs/path-prefix.md
@@ -34,7 +34,7 @@ First define the prefix in your site's `gatsby-config.js`.
 module.exports = {
   // Note: it must *not* have a trailing slash.
   pathPrefix: `/blog`,
-}
+};
 ```
 
 Then pass `--prefix-paths` cmd option to Gatsby.
diff --git a/docs/docs/plugins.md b/docs/docs/plugins.md
index 3739828bbcb64..0048b6543173d 100644
--- a/docs/docs/plugins.md
+++ b/docs/docs/plugins.md
@@ -32,7 +32,7 @@ to the plugins array like:
 ```javascript
 module.exports = {
   plugins: [`gatsby-transformer-json`],
-}
+};
 ```
 
 Plugins can take options. See each plugin page below for more detailed
diff --git a/docs/tutorial/part-four/index.md b/docs/tutorial/part-four/index.md
index 31e59751f73bf..7918142a6e051 100644
--- a/docs/tutorial/part-four/index.md
+++ b/docs/tutorial/part-four/index.md
@@ -97,7 +97,7 @@ component and two page components.
 `src/pages/index.js`
 
 ```jsx
-import React from "react"
+import React from "react";
 
 export default () => (
   <div>
@@ -109,13 +109,13 @@ export default () => (
       />
     </div>
   </div>
-)
+);
 ```
 
 `src/pages/about.js`
 
 ```jsx
-import React from "react"
+import React from "react";
 
 export default () => (
   <div>
@@ -125,20 +125,20 @@ export default () => (
       photos and videos of pandas eating lots of food.
     </p>
   </div>
-)
+);
 ```
 
 `src/layouts/index.js`
 
 ```jsx
-import React from "react"
-import g from "glamorous"
-import { css } from "glamor"
-import Link from "gatsby-link"
+import React from "react";
+import g from "glamorous";
+import { css } from "glamor";
+import Link from "gatsby-link";
 
-import { rhythm } from "../utils/typography"
+import { rhythm } from "../utils/typography";
 
-const linkStyle = css({ float: `right` })
+const linkStyle = css({ float: `right` });
 
 export default ({ children }) => (
   <g.Div
@@ -161,18 +161,18 @@ export default ({ children }) => (
     </Link>
     {children()}
   </g.Div>
-)
+);
 ```
 
 `src/utils/typography.js`
 
 ```javascript
-import Typography from "typography"
-import kirkhamTheme from "typography-theme-kirkham"
+import Typography from "typography";
+import kirkhamTheme from "typography-theme-kirkham";
 
-const typography = new Typography(kirkhamTheme)
+const typography = new Typography(kirkhamTheme);
 
-module.exports = typography
+module.exports = typography;
 ```
 
 `gatsby-config.js` (must be in the root of your project, not under src)
@@ -188,7 +188,7 @@ module.exports = {
       },
     },
   ],
-}
+};
 ```
 
 Add the above files and then run `gatsby develop` like normal and you should see
@@ -650,13 +650,13 @@ Like with the `src/pages/my-files.js` page, replace `src/pages/index.js` with
 the following to add a query with some initial HTML and styling.
 
 ```jsx
-import React from "react"
-import g from "glamorous"
+import React from "react";
+import g from "glamorous";
 
-import { rhythm } from "../utils/typography"
+import { rhythm } from "../utils/typography";
 
 export default ({ data }) => {
-  console.log(data)
+  console.log(data);
   return (
     <div>
       <g.H1 display={"inline-block"} borderBottom={"1px solid"}>
@@ -673,8 +673,8 @@ export default ({ data }) => {
         </div>
       ))}
     </div>
-  )
-}
+  );
+};
 
 export const query = graphql`
   query IndexQuery {
@@ -692,7 +692,7 @@ export const query = graphql`
       }
     }
   }
-`
+`;
 ```
 
 Now the frontpage should look like:
@@ -763,8 +763,8 @@ Gatsby whenever a new node is created (or updated).
 
 ```javascript
 exports.onCreateNode = ({ node }) => {
-  console.log(node.internal.type)
-}
+  console.log(node.internal.type);
+};
 ```
 
 Stop and restart the development server. As you do, you'll see quite a few newly
@@ -924,11 +924,11 @@ Create a directory at `src/templates` and then add the following in a file named
 `src/templates/blog-post.js`.
 
 ```jsx
-import React from "react"
+import React from "react";
 
 export default () => {
-  return <div>Hello blog post</div>
-}
+  return <div>Hello blog post</div>;
+};
 ```
 
 Then update `gatsby-node.js`
@@ -996,17 +996,17 @@ Which is a bit boring. Let's pull in data from our markdown post. Change
 `src/templates/blog-post.js` to:
 
 ```jsx
-import React from "react"
+import React from "react";
 
 export default ({ data }) => {
-  const post = data.markdownRemark
+  const post = data.markdownRemark;
   return (
     <div>
       <h1>{post.frontmatter.title}</h1>
       <div dangerouslySetInnerHTML={{ __html: post.html }} />
     </div>
-  )
-}
+  );
+};
 
 export const query = graphql`
   query BlogPostQuery($slug: String!) {
@@ -1017,7 +1017,7 @@ export const query = graphql`
       }
     }
   }
-`
+`;
 ```
 
 And…
diff --git a/docs/tutorial/part-one/index.md b/docs/tutorial/part-one/index.md
index cb101a80e3ede..b86e222c1ddd8 100644
--- a/docs/tutorial/part-one/index.md
+++ b/docs/tutorial/part-one/index.md
@@ -107,9 +107,9 @@ Try some other tricks, like the ones below:
    Try making your page component look like this:
 
 ```jsx
-import React from "react"
+import React from "react";
 
-export default () => <div style={{ color: `blue` }}>Hello Gatsby!</div>
+export default () => <div style={{ color: `blue` }}>Hello Gatsby!</div>;
 ```
 
 Change the color to "pink". Then to "tomato".
@@ -185,15 +185,15 @@ and create a React.js page component at `src/pages/page-2.js`.
 Make the second page component look something like:
 
 ```jsx
-import React from "react"
-import Link from "gatsby-link"
+import React from "react";
+import Link from "gatsby-link";
 
 export default () => (
   <div>
     <p>Hello world from my second Gatsby page</p>
     <Link to="/">back home</Link>
   </div>
-)
+);
 ```
 
 Save that and now you should be able to click back and forth between the two
@@ -239,15 +239,15 @@ for `/counter/` as before. But instead of using the "functional component" form
 as we did before, we'll create a "class" component.
 
 ```jsx
-import React from "react"
+import React from "react";
 
 class Counter extends React.Component {
   render() {
-    return <div>Hello Class Component</div>
+    return <div>Hello Class Component</div>;
   }
 }
 
-export default Counter
+export default Counter;
 ```
 
 The class form of React allows us to have component state. We'll need that for
diff --git a/docs/tutorial/part-three/index.md b/docs/tutorial/part-three/index.md
index 1bbf11ebfad66..844c56601de51 100644
--- a/docs/tutorial/part-three/index.md
+++ b/docs/tutorial/part-three/index.md
@@ -30,12 +30,12 @@ npm install --save gatsby-plugin-typography typography-theme-fairy-gates
 Create the typography config file at `src/utils/typography.js`
 
 ```javascript
-import Typography from "typography"
-import fairyGateTheme from "typography-theme-fairy-gates"
+import Typography from "typography";
+import fairyGateTheme from "typography-theme-fairy-gates";
 
-const typography = new Typography(fairyGateTheme)
+const typography = new Typography(fairyGateTheme);
 
-export default typography
+export default typography;
 ```
 
 Then our site's `gatsby-config.js`
@@ -50,7 +50,7 @@ module.exports = {
       },
     },
   ],
-}
+};
 ```
 
 Now, let's add a few different pages: a front page, an about page, and a contact
@@ -59,7 +59,7 @@ page.
 `src/pages/index.js`
 
 ```jsx
-import React from "react"
+import React from "react";
 
 export default () => (
   <div>
@@ -69,26 +69,26 @@ export default () => (
       websites.
     </p>
   </div>
-)
+);
 ```
 
 `src/pages/about.js`
 
 ```jsx
-import React from "react"
+import React from "react";
 
 export default () => (
   <div>
     <h1>About me</h1>
     <p>I’m good enough, I’m smart enough, and gosh darn it, people like me!</p>
   </div>
-)
+);
 ```
 
 `src/pages/contact.js`
 
 ```jsx
-import React from "react"
+import React from "react";
 
 export default () => (
   <div>
@@ -97,7 +97,7 @@ export default () => (
       <a href="mailto:me@example.com">me@example.com</a>
     </p>
   </div>
-)
+);
 ```
 
 ![no-layout](no-layout.png)
@@ -119,13 +119,13 @@ in this directory.
 Let's create a very simple layout component at `src/layouts/index.js`
 
 ```jsx
-import React from "react"
+import React from "react";
 
 export default ({ children }) => (
   <div style={{ margin: `0 auto`, maxWidth: 650, padding: `0 1rem` }}>
     {children()}
   </div>
-)
+);
 ```
 
 _Notice that unlike most `children` props, the `children` prop passed to layout
diff --git a/docs/tutorial/part-two/index.md b/docs/tutorial/part-two/index.md
index 215a630755297..96f75635a2d4d 100644
--- a/docs/tutorial/part-two/index.md
+++ b/docs/tutorial/part-two/index.md
@@ -67,7 +67,7 @@ having to directly modify the dozens of CSS rules.
 Using it looks something like this:
 
 ```javascript
-import Typography from "typography"
+import Typography from "typography";
 
 const typography = new Typography({
   baseFontSize: "18px",
@@ -81,7 +81,7 @@ const typography = new Typography({
     "sans-serif",
   ],
   bodyFontFamily: ["Georgia", "serif"],
-})
+});
 ```
 
 ## Gatsby plugins
@@ -141,7 +141,7 @@ Copy the following into `gatsby-config.js`
 ```javascript
 module.exports = {
   plugins: [`gatsby-plugin-typography`],
-}
+};
 ```
 
 Gatsby reads the site's config file when starting. Here we tell it to look for a
@@ -158,7 +158,7 @@ Copy the following into your `src/pages/index.js` so we can better see the
 effect of the typography CSS generated by Typography.js.
 
 ```jsx
-import React from "react"
+import React from "react";
 
 export default () => (
   <div>
@@ -183,7 +183,7 @@ export default () => (
     </div>
     <p>Posted April 09, 2011</p>
   </div>
-)
+);
 ```
 
 Your site should now look like this:
@@ -233,11 +233,11 @@ In your site, create a new directory at `src/utils`. There create a file named
 `typography.js`. In it, add the following code.
 
 ```javascript
-import Typography from "typography"
+import Typography from "typography";
 
-const typography = new Typography({ baseFontSize: "18px" })
+const typography = new Typography({ baseFontSize: "18px" });
 
-export default typography
+export default typography;
 ```
 
 Then set this module to be used by `gatsby-plugin-typography` as its config in
@@ -357,27 +357,27 @@ then, in this directory, create a file named `container.js` and paste the
 following.
 
 ```javascript
-import React from "react"
+import React from "react";
 
 export default ({ children }) => (
   <div style={{ margin: "3rem auto", maxWidth: 600 }}>{children}</div>
-)
+);
 ```
 
 Then create a new component page by creating a file at
 `src/pages/about-css-modules.js`:
 
 ```javascript
-import React from "react"
+import React from "react";
 
-import Container from "../components/container"
+import Container from "../components/container";
 
 export default () => (
   <Container>
     <h1>About CSS Modules</h1>
     <p>CSS Modules are cool</p>
   </Container>
-)
+);
 ```
 
 You'll notice we imported the `Container` component we just created.
@@ -432,8 +432,8 @@ Now import that file into the `about-css-modules.js` page we created earlier.
 Also log the resulting import so we can see what the processed file looks like.
 
 ```javascript
-import styles from "./about-css-modules.module.css"
-console.log(styles)
+import styles from "./about-css-modules.module.css";
+console.log(styles);
 ```
 
 If you open the developer console in your browser you'll see:
@@ -531,16 +531,16 @@ Restart `gatsby develop` again to enable the Glamor plugin.
 Now create the Glamor page at `src/pages/about-glamor.js`
 
 ```jsx
-import React from "react"
+import React from "react";
 
-import Container from "../components/container"
+import Container from "../components/container";
 
 export default () => (
   <Container>
     <h1>About Glamor</h1>
     <p>Glamor is cool</p>
   </Container>
-)
+);
 ```
 
 Let's add the same inline `User` component but this time using Glamor's `css`
@@ -631,10 +631,10 @@ module.exports = {
 Then at `src/pages/about-styled-components.js` create:
 
 ```jsx
-import React from "react"
-import styled from "styled-components"
+import React from "react";
+import styled from "styled-components";
 
-import Container from "../components/container"
+import Container from "../components/container";
 
 const UserWrapper = styled.div`
   display: flex;
@@ -643,29 +643,29 @@ const UserWrapper = styled.div`
   &:last-child {
     margin-bottom: 0;
   }
-`
+`;
 
 const Avatar = styled.img`
   flex: 0 0 96px;
   width: 96px;
   height: 96px;
   margin: 0;
-`
+`;
 
 const Description = styled.div`
   flex: 1;
   margin-left: 18px;
   padding: 12px;
-`
+`;
 
 const Username = styled.h2`
   margin: 0 0 12px 0;
   padding: 0;
-`
+`;
 
 const Excerpt = styled.p`
   margin: 0;
-`
+`;
 
 const User = props => (
   <UserWrapper>
@@ -675,7 +675,7 @@ const User = props => (
       <Excerpt>{props.excerpt}</Excerpt>
     </Description>
   </UserWrapper>
-)
+);
 
 export default () => (
   <Container>
@@ -692,7 +692,7 @@ export default () => (
       excerpt="I'm Bob smith, a vertically aligned type of guy. Lorem ipsum dolor sit amet, consectetur adipisicing elit."
     />
   </Container>
-)
+);
 ```
 
 ### Other CSS options
diff --git a/examples/using-emotion-prismjs/src/pages/2017-10-17-code-highlighting-with-line-highlight/index.md b/examples/using-emotion-prismjs/src/pages/2017-10-17-code-highlighting-with-line-highlight/index.md
index cb590a2ac0a45..b0c15a82245d5 100644
--- a/examples/using-emotion-prismjs/src/pages/2017-10-17-code-highlighting-with-line-highlight/index.md
+++ b/examples/using-emotion-prismjs/src/pages/2017-10-17-code-highlighting-with-line-highlight/index.md
@@ -10,16 +10,16 @@ theme and is the same one used in the official React documentation.
 
 ```jsx
 function NumberList(props) {
-  const numbers = props.numbers
+  const numbers = props.numbers;
   const listItems = numbers.map(number => (
     <li key={number.toString()}>{number}</li>
-  ))
-  return <ul>{listItems}</ul>
+  ));
+  return <ul>{listItems}</ul>;
 }
 
-const numbers = [1, 2, 3, 4, 5]
+const numbers = [1, 2, 3, 4, 5];
 ReactDOM.render(
   <NumberList numbers={numbers} />,
   document.getElementById("root")
-)
+);
 ```
diff --git a/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/_choropleth.md b/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/_choropleth.md
index 8fabe30800236..87a35b4382b72 100644
--- a/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/_choropleth.md
+++ b/examples/using-javascript-transforms/src/articles/2017-03-09-choropleth-on-d3v4/_choropleth.md
@@ -39,10 +39,10 @@ graph.setup = (selection, measurements) => {
   let svg = selection
     .append("svg")
     .attr("width", measurements.width)
-    .attr("height", measurements.width / 1.6)
+    .attr("height", measurements.width / 1.6);
 
-  return svg
-}
+  return svg;
+};
 ```
 
 Nullam id mollis justo. Sed malesuada interdum purus id commodo. Fusce finibus
diff --git a/examples/using-remark/src/pages/2017-04-04---code-and-syntax-highlighting/index.md b/examples/using-remark/src/pages/2017-04-04---code-and-syntax-highlighting/index.md
index d8d39f670d788..959b45423cb9b 100644
--- a/examples/using-remark/src/pages/2017-04-04---code-and-syntax-highlighting/index.md
+++ b/examples/using-remark/src/pages/2017-04-04---code-and-syntax-highlighting/index.md
@@ -50,8 +50,8 @@ names, see the [PrismJS homepage][3].
     ```
 
 ```javascript
-var s = "JavaScript syntax highlighting"
-alert(s)
+var s = "JavaScript syntax highlighting";
+alert(s);
 ```
 
 ```python
diff --git a/package.json b/package.json
index accfd0693bdca..e48eae5975697 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
     "format-examples": "prettier-eslint --write \"examples/**/gatsby-node.js\" \"examples/**/gatsby-config.js\" \"examples/**/src/**/*.js\"",
     "format-packages": "prettier-eslint --write \"packages/*/src/**/*.js\"",
     "format-scripts": "prettier-eslint --write \"scripts/**/*.js\"",
-    "format-markdown": "prettier --write \"**/*.md\"",
+    "format-markdown": "prettier --write \"**/*.md\" --semi",
     "format-www": "prettier-eslint --write \"www/*.js\" \"www/src/**/*.js\"",
     "jest": "jest",
     "lerna": "lerna",
diff --git a/packages/gatsby-1-config-css-modules/README.md b/packages/gatsby-1-config-css-modules/README.md
index 95624de0cded9..d8324c7aff004 100644
--- a/packages/gatsby-1-config-css-modules/README.md
+++ b/packages/gatsby-1-config-css-modules/README.md
@@ -12,12 +12,12 @@ Example from [`gatsby-plugin-sass`](../gatsby-plugin-sass/):
 
 ```javascript
 // in gatsby-node.js
-const { cssModulesConfig } = require("gatsby-1-config-css-modules")
+const { cssModulesConfig } = require("gatsby-1-config-css-modules");
 
 exports.modifyWebpackConfig = ({ config, stage }, { precision }) => {
-  const sassFiles = /\.s[ac]ss$/
-  const sassModulesFiles = /\.module\.s[ac]ss$/
-  const sassLoader = precision ? `sass?precision=${precision}` : `sass`
+  const sassFiles = /\.s[ac]ss$/;
+  const sassModulesFiles = /\.module\.s[ac]ss$/;
+  const sassLoader = precision ? `sass?precision=${precision}` : `sass`;
 
   switch (stage) {
     case `develop`: {
@@ -25,16 +25,16 @@ exports.modifyWebpackConfig = ({ config, stage }, { precision }) => {
         test: sassFiles,
         exclude: sassModulesFiles,
         loaders: [`style`, `css`, sassLoader],
-      })
+      });
 
       config.loader(`sassModules`, {
         test: sassModulesFiles,
         loaders: [`style`, cssModulesConfig(stage), sassLoader],
-      })
-      return config
+      });
+      return config;
     }
 
     // etc.
   }
-}
+};
 ```
diff --git a/packages/gatsby-image/README.md b/packages/gatsby-image/README.md
index 5f45b468e427c..bc64b9c9f5c55 100644
--- a/packages/gatsby-image/README.md
+++ b/packages/gatsby-image/README.md
@@ -59,15 +59,15 @@ effect as well as lazy loading of images further down the screen.
 This is what a component using `gatsby-images` looks like.
 
 ```jsx
-import React from "react"
-import Img from "gatsby-image"
+import React from "react";
+import Img from "gatsby-image";
 
 export default ({ data }) => (
   <div>
     <h1>Hello gatsby-image</h1>
     <Img resolutions={data.file.childImageSharp.resolutions} />
   </div>
-)
+);
 
 export const query = graphql`
   query GatsbyImageSampleQuery {
@@ -81,7 +81,7 @@ export const query = graphql`
       }
     }
   }
-`
+`;
 ```
 
 ## Two types of responsive images
diff --git a/packages/gatsby-link/README.md b/packages/gatsby-link/README.md
index 8234efb3eeb8f..10346a79aebee 100644
--- a/packages/gatsby-link/README.md
+++ b/packages/gatsby-link/README.md
@@ -80,16 +80,16 @@ This is only for pathnames you're constructing manually. The `<Link>` component
 handles prefixing automatically.
 
 ```jsx
-import { withPrefix } from "gatsby-link"
+import { withPrefix } from "gatsby-link";
 
 const IndexLayout = ({ children, location }) => {
-  const isHomepage = location.pathname === withPrefix("/")
+  const isHomepage = location.pathname === withPrefix("/");
 
   return (
     <div>
       <h1>Welcome {isHomepage ? "home" : "aboard"}!</h1>
       {children()}
     </div>
-  )
-}
+  );
+};
 ```
diff --git a/packages/gatsby-plugin-canonical-urls/README.md b/packages/gatsby-plugin-canonical-urls/README.md
index 78a653d642936..1ab9bcfee4158 100644
--- a/packages/gatsby-plugin-canonical-urls/README.md
+++ b/packages/gatsby-plugin-canonical-urls/README.md
@@ -21,7 +21,7 @@ plugins: [
       siteUrl: `https://www.example.com`,
     },
   },
-]
+];
 ```
 
 With the above configuration, the plugin will add to the head of every HTML page
diff --git a/packages/gatsby-plugin-catch-links/README.md b/packages/gatsby-plugin-catch-links/README.md
index 8fb77f5804ebd..0b3bef99c8b68 100644
--- a/packages/gatsby-plugin-catch-links/README.md
+++ b/packages/gatsby-plugin-catch-links/README.md
@@ -11,5 +11,5 @@ client-side pushState to avoid the browser having to refresh the page.
 
 ```javascript
 // In your gatsby-config.js
-plugins: [`gatsby-plugin-catch-links`]
+plugins: [`gatsby-plugin-catch-links`];
 ```
diff --git a/packages/gatsby-plugin-coffeescript/README.md b/packages/gatsby-plugin-coffeescript/README.md
index 451aff5777ff0..f9f3e45df59a3 100644
--- a/packages/gatsby-plugin-coffeescript/README.md
+++ b/packages/gatsby-plugin-coffeescript/README.md
@@ -22,7 +22,7 @@ plugins: [
     // options are passed directly to the compiler
     options: {},
   },
-]
+];
 ```
 
 ## Notes
@@ -40,5 +40,5 @@ CoffeeScript@next is being loaded. The very first line of source in the former's
 `index.js` should be the following: note the lack of dash.
 
 ```js
-var coffee = require("coffeescript")
+var coffee = require("coffeescript");
 ```
diff --git a/packages/gatsby-plugin-emotion/README.md b/packages/gatsby-plugin-emotion/README.md
index f36db2bf25abd..1edf144ecbf95 100644
--- a/packages/gatsby-plugin-emotion/README.md
+++ b/packages/gatsby-plugin-emotion/README.md
@@ -15,5 +15,5 @@ npm install --save gatsby-plugin-emotion emotion emotion-server
 Add the plugin to your `gatsby-config.js`.
 
 ```js
-plugins: ["gatsby-plugin-emotion"]
+plugins: ["gatsby-plugin-emotion"];
 ```
diff --git a/packages/gatsby-plugin-feed/README.md b/packages/gatsby-plugin-feed/README.md
index 90945042780aa..7e9ead5275583 100644
--- a/packages/gatsby-plugin-feed/README.md
+++ b/packages/gatsby-plugin-feed/README.md
@@ -52,8 +52,8 @@ plugins: [
                 url: site.siteMetadata.siteUrl + edge.node.fields.slug,
                 guid: site.siteMetadata.siteUrl + edge.node.fields.slug,
                 custom_elements: [{ "content:encoded": edge.node.html }],
-              })
-            })
+              });
+            });
           },
           query: `
             {
@@ -81,5 +81,5 @@ plugins: [
       ],
     },
   },
-]
+];
 ```
diff --git a/packages/gatsby-plugin-glamor/README.md b/packages/gatsby-plugin-glamor/README.md
index e2d9c949c4a75..3193564262bc1 100644
--- a/packages/gatsby-plugin-glamor/README.md
+++ b/packages/gatsby-plugin-glamor/README.md
@@ -17,7 +17,7 @@ rendering and start writing React components that carry their styles with them.
 First add the plugin to your `gatsby-config.js`.
 
 ```javascript
-plugins: [`gatsby-plugin-glamor`]
+plugins: [`gatsby-plugin-glamor`];
 ```
 
 Glamor
diff --git a/packages/gatsby-plugin-google-analytics/README.md b/packages/gatsby-plugin-google-analytics/README.md
index 75b8f237668c5..1661e20fdebb7 100644
--- a/packages/gatsby-plugin-google-analytics/README.md
+++ b/packages/gatsby-plugin-google-analytics/README.md
@@ -19,7 +19,7 @@ plugins: [
       anonymize: true,
     },
   },
-]
+];
 ```
 
 ## The "anonymize" option
diff --git a/packages/gatsby-plugin-google-tagmanager/README.md b/packages/gatsby-plugin-google-tagmanager/README.md
index b34931affa56c..dd7208b25c5c9 100644
--- a/packages/gatsby-plugin-google-tagmanager/README.md
+++ b/packages/gatsby-plugin-google-tagmanager/README.md
@@ -20,5 +20,5 @@ plugins: [
       includeInDevelopment: false,
     },
   },
-]
+];
 ```
diff --git a/packages/gatsby-plugin-jss/README.md b/packages/gatsby-plugin-jss/README.md
index 863a1e5412614..97d2f3f0ba03f 100644
--- a/packages/gatsby-plugin-jss/README.md
+++ b/packages/gatsby-plugin-jss/README.md
@@ -12,7 +12,7 @@ Provide drop-in support for using the css-in-js library
 Simply add the plugin to your `gatsby-config.js`.
 
 ```javascript
-plugins: [`gatsby-plugin-jss`]
+plugins: [`gatsby-plugin-jss`];
 ```
 
 ## Example
diff --git a/packages/gatsby-plugin-lodash/README.md b/packages/gatsby-plugin-lodash/README.md
index 206802d90caaa..21d63f66cc174 100644
--- a/packages/gatsby-plugin-lodash/README.md
+++ b/packages/gatsby-plugin-lodash/README.md
@@ -11,7 +11,7 @@ Adds the Lodash webpack & Babel plugins for easy modular, small Lodash builds.
 Simply add the plugin to your `gatsby-config.js`.
 
 ```javascript
-plugins: [`gatsby-plugin-lodash`]
+plugins: [`gatsby-plugin-lodash`];
 ```
 
 By default this plugin enables all
@@ -27,5 +27,5 @@ plugins: [
       disabledFeatures: [`shorthands`, `cloning`],
     },
   },
-]
+];
 ```
diff --git a/packages/gatsby-plugin-manifest/README.md b/packages/gatsby-plugin-manifest/README.md
index 7e88d6cdb7712..bd2239b437334 100644
--- a/packages/gatsby-plugin-manifest/README.md
+++ b/packages/gatsby-plugin-manifest/README.md
@@ -49,7 +49,7 @@ plugins: [
       ],
     },
   },
-]
+];
 ```
 
 To create `manifest.json`, you need to run `gatsby build`.
diff --git a/packages/gatsby-plugin-netlify/README.md b/packages/gatsby-plugin-netlify/README.md
index 13765b5cd5a8b..75c55912db3ca 100644
--- a/packages/gatsby-plugin-netlify/README.md
+++ b/packages/gatsby-plugin-netlify/README.md
@@ -20,7 +20,7 @@ config.
 // In your gatsby-config.js
 plugins: [
   `gatsby-plugin-netlify`, // make sure to put last in the array
-]
+];
 ```
 
 ## Configuration
@@ -43,7 +43,7 @@ plugins: [
       transformHeaders: (headers, path) => headers, // optional transform for manipulating headers under each path (e.g.sorting), etc.
     },
   },
-]
+];
 ```
 
 ### Headers
diff --git a/packages/gatsby-plugin-nprogress/README.md b/packages/gatsby-plugin-nprogress/README.md
index de24d11dbab60..8908e301e8a71 100644
--- a/packages/gatsby-plugin-nprogress/README.md
+++ b/packages/gatsby-plugin-nprogress/README.md
@@ -22,7 +22,7 @@ plugins: [
       showSpinner: false,
     },
   },
-]
+];
 ```
 
 In addition to `color` – a configuration option specific to
diff --git a/packages/gatsby-plugin-offline/README.md b/packages/gatsby-plugin-offline/README.md
index f681e93cb5255..33aa0d2c595fd 100644
--- a/packages/gatsby-plugin-offline/README.md
+++ b/packages/gatsby-plugin-offline/README.md
@@ -16,7 +16,7 @@ in the service worker.
 
 ```javascript
 // In your gatsby-config.js
-plugins: [`gatsby-plugin-offline`]
+plugins: [`gatsby-plugin-offline`];
 ```
 
 ## Overriding options
@@ -55,5 +55,5 @@ const options = {
     },
   ],
   skipWaiting: false,
-}
+};
 ```
diff --git a/packages/gatsby-plugin-postcss-sass/README.md b/packages/gatsby-plugin-postcss-sass/README.md
index 10cc006aa035f..305d505e94e4a 100644
--- a/packages/gatsby-plugin-postcss-sass/README.md
+++ b/packages/gatsby-plugin-postcss-sass/README.md
@@ -23,5 +23,5 @@ plugins: [
       precision: 8, // SASS default: 5
     },
   },
-]
+];
 ```
diff --git a/packages/gatsby-plugin-preact/README.md b/packages/gatsby-plugin-preact/README.md
index c5b419ae10282..68ddf04f92eb0 100644
--- a/packages/gatsby-plugin-preact/README.md
+++ b/packages/gatsby-plugin-preact/README.md
@@ -14,5 +14,5 @@ React.
 
 ```javascript
 // In your gatsby-config.js
-plugins: [`gatsby-plugin-preact`]
+plugins: [`gatsby-plugin-preact`];
 ```
diff --git a/packages/gatsby-plugin-react-css-modules/README.md b/packages/gatsby-plugin-react-css-modules/README.md
index 0ea72703e1c30..a7ac1e9338531 100644
--- a/packages/gatsby-plugin-react-css-modules/README.md
+++ b/packages/gatsby-plugin-react-css-modules/README.md
@@ -29,7 +29,7 @@ plugins: [
       exclude: `\/global\/`,
     },
   },
-]
+];
 ```
 
 Files must be named using the pattern `filename.module.css` for Gatsby to treat
diff --git a/packages/gatsby-plugin-react-helmet/README.md b/packages/gatsby-plugin-react-helmet/README.md
index 9cc020aca8031..462d9a4709efe 100644
--- a/packages/gatsby-plugin-react-helmet/README.md
+++ b/packages/gatsby-plugin-react-helmet/README.md
@@ -18,5 +18,5 @@ attributes, etc. will get added to the static HTML pages Gatsby builds.
 Just add the plugin to the plugins array in your `gatsby-config.js`
 
 ```javascript
-plugins: [`gatsby-plugin-react-helmet`]
+plugins: [`gatsby-plugin-react-helmet`];
 ```
diff --git a/packages/gatsby-plugin-react-next/README.md b/packages/gatsby-plugin-react-next/README.md
index f083623024ec7..a4c994950a529 100644
--- a/packages/gatsby-plugin-react-next/README.md
+++ b/packages/gatsby-plugin-react-next/README.md
@@ -14,5 +14,5 @@ site is drop-in upgrade to React 16.
 Simply add the plugin to your `gatsby-config.js`.
 
 ```javascript
-plugins: [`gatsby-plugin-react-next`]
+plugins: [`gatsby-plugin-react-next`];
 ```
diff --git a/packages/gatsby-plugin-sass/README.md b/packages/gatsby-plugin-sass/README.md
index 1437810a1d290..3d346bb347461 100644
--- a/packages/gatsby-plugin-sass/README.md
+++ b/packages/gatsby-plugin-sass/README.md
@@ -13,7 +13,7 @@ Provides drop-in support for SASS/SCSS stylesheets
 
 ```javascript
 // in gatsby-config.js
-plugins: [`gatsby-plugin-sass`]
+plugins: [`gatsby-plugin-sass`];
 ```
 
 ## Options
@@ -33,5 +33,5 @@ plugins: [
       precision: 8,
     },
   },
-]
+];
 ```
diff --git a/packages/gatsby-plugin-sharp/README.md b/packages/gatsby-plugin-sharp/README.md
index 513c3733a58ea..4e2e3d005c84c 100644
--- a/packages/gatsby-plugin-sharp/README.md
+++ b/packages/gatsby-plugin-sharp/README.md
@@ -22,7 +22,7 @@ images. By default it uses a quality setting of [50-75].
 
 ```javascript
 // In your gatsby-config.js
-plugins: [`gatsby-plugin-sharp`]
+plugins: [`gatsby-plugin-sharp`];
 ```
 
 ## Methods
diff --git a/packages/gatsby-plugin-styled-components/README.md b/packages/gatsby-plugin-styled-components/README.md
index 2129d1d0ac7c4..3f14d326dccf7 100644
--- a/packages/gatsby-plugin-styled-components/README.md
+++ b/packages/gatsby-plugin-styled-components/README.md
@@ -13,7 +13,7 @@ built-in server-side rendering support.
 Edit `gatsby-config.js`
 
 ```javascript
-plugins: [`gatsby-plugin-styled-components`]
+plugins: [`gatsby-plugin-styled-components`];
 ```
 
 ### Breaking changes history
diff --git a/packages/gatsby-plugin-styled-jsx/README.md b/packages/gatsby-plugin-styled-jsx/README.md
index f0f6aff769834..a14e5b0923787 100644
--- a/packages/gatsby-plugin-styled-jsx/README.md
+++ b/packages/gatsby-plugin-styled-jsx/README.md
@@ -11,5 +11,5 @@ Provides drop-in support for [styled-jsx](https://github.com/zeit/styled-jsx).
 Add the plugin to the plugins array in your `gatsby-config.js` and use `<style jsx>` tags in your component files.
 
 ```javascript
-plugins: [`gatsby-plugin-styled-jsx`]
+plugins: [`gatsby-plugin-styled-jsx`];
 ```
diff --git a/packages/gatsby-plugin-styletron/README.md b/packages/gatsby-plugin-styletron/README.md
index daaf4d8e3d075..87bf3d673dd5f 100644
--- a/packages/gatsby-plugin-styletron/README.md
+++ b/packages/gatsby-plugin-styletron/README.md
@@ -13,5 +13,5 @@ rendering support.
 Edit `gatsby-config.js`
 
 ```javascript
-plugins: [`gatsby-plugin-styletron`]
+plugins: [`gatsby-plugin-styletron`];
 ```
diff --git a/packages/gatsby-plugin-stylus/README.md b/packages/gatsby-plugin-stylus/README.md
index d0258909ab877..d96aaca9725cd 100644
--- a/packages/gatsby-plugin-stylus/README.md
+++ b/packages/gatsby-plugin-stylus/README.md
@@ -15,7 +15,7 @@ Provides drop-in support for Stylus with or without CSS Modules
 
 ```javascript
 // in gatsby-config.js
-plugins: [`gatsby-plugin-stylus`]
+plugins: [`gatsby-plugin-stylus`];
 ```
 
 ### With CSS Modules
@@ -32,7 +32,7 @@ means you can add stylus plugins with `use`:
 
 ```javascript
 // in gatsby-config.js
-const rupture = require("rupture")
+const rupture = require("rupture");
 
 module.exports = {
   plugins: [
@@ -43,5 +43,5 @@ module.exports = {
       },
     },
   ],
-}
+};
 ```
diff --git a/packages/gatsby-plugin-twitter/README.md b/packages/gatsby-plugin-twitter/README.md
index 80c031997dd4d..16661682e7626 100644
--- a/packages/gatsby-plugin-twitter/README.md
+++ b/packages/gatsby-plugin-twitter/README.md
@@ -14,5 +14,5 @@ script.
 
 ```javascript
 // In your gatsby-config.js
-plugins: [`gatsby-plugin-twitter`]
+plugins: [`gatsby-plugin-twitter`];
 ```
diff --git a/packages/gatsby-plugin-typescript/README.md b/packages/gatsby-plugin-typescript/README.md
index 3532794f4f2a5..b3492cab0ace9 100644
--- a/packages/gatsby-plugin-typescript/README.md
+++ b/packages/gatsby-plugin-typescript/README.md
@@ -16,7 +16,7 @@ Provides drop-in support for TypeScript and TSX.
 `gatsby-config.js`
 
 ```javascript
-plugins: [`gatsby-plugin-typescript`]
+plugins: [`gatsby-plugin-typescript`];
 ```
 
 Or with optional configuration:
@@ -34,7 +34,7 @@ plugins: [
       }, // default
     },
   },
-]
+];
 ```
 
 `tsconfig.json`
diff --git a/packages/gatsby-remark-autolink-headers/README.md b/packages/gatsby-remark-autolink-headers/README.md
index 230496491b3bd..7fc839d778efa 100644
--- a/packages/gatsby-remark-autolink-headers/README.md
+++ b/packages/gatsby-remark-autolink-headers/README.md
@@ -17,5 +17,5 @@ plugins: [
       plugins: [`gatsby-remark-autolink-headers`],
     },
   },
-]
+];
 ```
diff --git a/packages/gatsby-remark-copy-linked-files/README.md b/packages/gatsby-remark-copy-linked-files/README.md
index 496ca0f57b246..e2d46330ab0b4 100644
--- a/packages/gatsby-remark-copy-linked-files/README.md
+++ b/packages/gatsby-remark-copy-linked-files/README.md
@@ -19,7 +19,7 @@ plugins: [
       plugins: ["gatsby-remark-copy-linked-files"],
     },
   },
-]
+];
 ```
 
 ### How to change the directory the files are added to.
@@ -74,7 +74,7 @@ plugins: [
       ],
     },
   },
-]
+];
 ```
 
 Then in your Markdown files, simply link to the file you desire to reference.
diff --git a/packages/gatsby-remark-embed-snippet/README.md b/packages/gatsby-remark-embed-snippet/README.md
index 35a497113f1ac..dbc6f2f0d4561 100644
--- a/packages/gatsby-remark-embed-snippet/README.md
+++ b/packages/gatsby-remark-embed-snippet/README.md
@@ -58,10 +58,10 @@ range of lines to highlight, relative to a `highlight-range` comment.
 #### JavaScript example
 
 ```js
-import React from "react"
-import ReactDOM from "react-dom"
+import React from "react";
+import ReactDOM from "react-dom";
 
-const name = "Brian" // highlight-line
+const name = "Brian"; // highlight-line
 
 ReactDOM.render(
   <div>
@@ -69,7 +69,7 @@ ReactDOM.render(
     <h1>Hello, ${name}!</h1>
   </div>,
   document.getElementById("root")
-)
+);
 ```
 
 #### CSS example
diff --git a/packages/gatsby-remark-images/README.md b/packages/gatsby-remark-images/README.md
index 2875e05e29f78..7b099b208576b 100644
--- a/packages/gatsby-remark-images/README.md
+++ b/packages/gatsby-remark-images/README.md
@@ -54,7 +54,7 @@ plugins: [
       ],
     },
   },
-]
+];
 ```
 
 [1]: https://jmperezperez.com/medium-image-progressive-loading-placeholder/
diff --git a/packages/gatsby-remark-prismjs/README.md b/packages/gatsby-remark-prismjs/README.md
index 7bfe447cd38c5..81b138b989d14 100644
--- a/packages/gatsby-remark-prismjs/README.md
+++ b/packages/gatsby-remark-prismjs/README.md
@@ -32,7 +32,7 @@ plugins: [
       ],
     },
   },
-]
+];
 ```
 
 ### Include CSS
@@ -48,7 +48,7 @@ To load a theme, just require its CSS file in your `layouts/index.js` file, e.g.
 
 ```javascript
 // layouts/index.js
-require("prismjs/themes/prism-solarizedlight.css")
+require("prismjs/themes/prism-solarizedlight.css");
 ```
 
 #### Optional: Add line highlighting styles
diff --git a/packages/gatsby-remark-responsive-iframe/README.md b/packages/gatsby-remark-responsive-iframe/README.md
index 184dfcb975205..20de0fc4d47a3 100644
--- a/packages/gatsby-remark-responsive-iframe/README.md
+++ b/packages/gatsby-remark-responsive-iframe/README.md
@@ -20,7 +20,7 @@ plugins: [
       plugins: [`gatsby-remark-responsive-iframe`],
     },
   },
-]
+];
 ```
 
 ### Usage in Markdown
diff --git a/packages/gatsby-remark-smartypants/README.md b/packages/gatsby-remark-smartypants/README.md
index fa0c476a16e5e..d6530865c80d2 100644
--- a/packages/gatsby-remark-smartypants/README.md
+++ b/packages/gatsby-remark-smartypants/README.md
@@ -18,7 +18,7 @@ plugins: [
       plugins: [`gatsby-remark-smartypants`],
     },
   },
-]
+];
 ```
 
 ### Options
@@ -43,5 +43,5 @@ plugins: [
       ],
     },
   },
-]
+];
 ```
diff --git a/packages/gatsby-source-contentful/README.md b/packages/gatsby-source-contentful/README.md
index 07987db76335a..3651fd2420d99 100644
--- a/packages/gatsby-source-contentful/README.md
+++ b/packages/gatsby-source-contentful/README.md
@@ -25,7 +25,7 @@ plugins: [
       accessToken: `your_access_token`,
     },
   },
-]
+];
 ```
 
 ### Using Preview API
@@ -41,7 +41,7 @@ plugins: [
       host: `preview.contentful.com`,
     },
   },
-]
+];
 ```
 
 ## How to query
diff --git a/packages/gatsby-source-drupal/README.md b/packages/gatsby-source-drupal/README.md
index b89844c45f4de..a159e3306b1b4 100644
--- a/packages/gatsby-source-drupal/README.md
+++ b/packages/gatsby-source-drupal/README.md
@@ -22,7 +22,7 @@ plugins: [
     resolve: `gatsby-source-drupal`,
     options: { baseUrl: `https://live-contentacms.pantheonsite.io/` },
   },
-]
+];
 ```
 
 ## How to query
diff --git a/packages/gatsby-source-filesystem/README.md b/packages/gatsby-source-filesystem/README.md
index f005ceb5476d9..5d3ebb225d796 100644
--- a/packages/gatsby-source-filesystem/README.md
+++ b/packages/gatsby-source-filesystem/README.md
@@ -36,7 +36,7 @@ plugins: [
       path: `${__dirname}/src/data/`,
     },
   },
-]
+];
 ```
 
 ## How to query
diff --git a/packages/gatsby-source-hacker-news/README.md b/packages/gatsby-source-hacker-news/README.md
index aa7da643116bd..92addf6e44180 100644
--- a/packages/gatsby-source-hacker-news/README.md
+++ b/packages/gatsby-source-hacker-news/README.md
@@ -11,7 +11,7 @@ Source plugin for pulling data into Gatsby from the
 
 ```javascript
 // In your gatsby-config.js
-plugins: [`gatsby-source-hacker-news`]
+plugins: [`gatsby-source-hacker-news`];
 ```
 
 ## How to query
diff --git a/packages/gatsby-source-lever/README.md b/packages/gatsby-source-lever/README.md
index e20f80faedf49..ae7bfd5ff13aa 100644
--- a/packages/gatsby-source-lever/README.md
+++ b/packages/gatsby-source-lever/README.md
@@ -28,7 +28,7 @@ plugins: [
       verboseOutput: false,
     },
   },
-]
+];
 ```
 
 ### GraphQL Query to get all jobs
@@ -67,13 +67,13 @@ If you wish to create Gatsby Pages for each Lever.co jobs, you can modify your
 `gatsby-node.js`.
 
 ```javascript
-const _ = require(`lodash`)
-const Promise = require(`bluebird`)
-const path = require(`path`)
-const slash = require(`slash`)
+const _ = require(`lodash`);
+const Promise = require(`bluebird`);
+const path = require(`path`);
+const slash = require(`slash`);
 
 exports.createPages = ({ graphql, boundActionCreators }) => {
-  const { createPage } = boundActionCreators
+  const { createPage } = boundActionCreators;
   return new Promise((resolve, reject) => {
     // The “graphql” function allows us to run arbitrary
     // queries against the local WordPress graphql schema. Think of
@@ -96,12 +96,12 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
     )
       .then(result => {
         if (result.errors) {
-          console.log(result.errors)
-          reject(result.errors)
+          console.log(result.errors);
+          reject(result.errors);
         }
 
         // Create Lever pages.
-        const pageTemplate = path.resolve("./src/templates/page.js")
+        const pageTemplate = path.resolve("./src/templates/page.js");
         // We want to create a detailed page for each
         // lever node. We'll just use the ID for the slug.
         _.each(result.data.allLever.edges, edge => {
@@ -118,13 +118,13 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
             context: {
               id: edge.node.id,
             },
-          })
-        })
+          });
+        });
       })
       // ==== END PAGES ====
 
       // resolve() must be called at the end so Gatsby knows that we're done add pages.
-      .then(resolve())
-  })
-}
+      .then(resolve());
+  });
+};
 ```
diff --git a/packages/gatsby-source-medium/README.md b/packages/gatsby-source-medium/README.md
index e78ca7c943eca..e15fed0489ff0 100644
--- a/packages/gatsby-source-medium/README.md
+++ b/packages/gatsby-source-medium/README.md
@@ -21,7 +21,7 @@ plugins: [
       username: `username/publication`,
     },
   },
-]
+];
 ```
 
 ## How to query
diff --git a/packages/gatsby-source-mongodb/README.md b/packages/gatsby-source-mongodb/README.md
index faf67aab115fc..a39149c1ac2cd 100644
--- a/packages/gatsby-source-mongodb/README.md
+++ b/packages/gatsby-source-mongodb/README.md
@@ -18,7 +18,7 @@ module.exports = {
       options: { dbName: `local`, collection: `documents` },
     },
   ],
-}
+};
 ```
 
 ### multiple collections
@@ -32,7 +32,7 @@ module.exports = {
       options: { dbName: `local`, collection: [`documents`, `vehicles`] },
     },
   ],
-}
+};
 ```
 
 ## Plugin options
diff --git a/packages/gatsby-source-wordpress/README.md b/packages/gatsby-source-wordpress/README.md
index fd6753d69f802..22646851e170d 100644
--- a/packages/gatsby-source-wordpress/README.md
+++ b/packages/gatsby-source-wordpress/README.md
@@ -85,7 +85,7 @@ plugins: [
       verboseOutput: false,
     },
   },
-]
+];
 ```
 
 ## WordPress Plugins
@@ -399,10 +399,10 @@ To learn more about image processing check
 ## Site's `gatsby-node.js` example
 
 ```javascript
-const _ = require(`lodash`)
-const Promise = require(`bluebird`)
-const path = require(`path`)
-const slash = require(`slash`)
+const _ = require(`lodash`);
+const Promise = require(`bluebird`);
+const path = require(`path`);
+const slash = require(`slash`);
 
 // Implement the Gatsby API “createPages”. This is
 // called after the Gatsby bootstrap is finished so you have
@@ -411,7 +411,7 @@ const slash = require(`slash`)
 // Will create pages for WordPress pages (route : /{slug})
 // Will create pages for WordPress posts (route : /post/{slug})
 exports.createPages = ({ graphql, boundActionCreators }) => {
-  const { createPage } = boundActionCreators
+  const { createPage } = boundActionCreators;
   return new Promise((resolve, reject) => {
     // The “graphql” function allows us to run arbitrary
     // queries against the local WordPress graphql schema. Think of
@@ -437,12 +437,12 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
     )
       .then(result => {
         if (result.errors) {
-          console.log(result.errors)
-          reject(result.errors)
+          console.log(result.errors);
+          reject(result.errors);
         }
 
         // Create Page pages.
-        const pageTemplate = path.resolve("./src/templates/page.js")
+        const pageTemplate = path.resolve("./src/templates/page.js");
         // We want to create a detailed page for each
         // page node. We'll just use the WordPress Slug for the slug.
         // The Page ID is prefixed with 'PAGE_'
@@ -460,8 +460,8 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
             context: {
               id: edge.node.id,
             },
-          })
-        })
+          });
+        });
       })
       // ==== END PAGES ====
 
@@ -485,10 +485,10 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
           `
         ).then(result => {
           if (result.errors) {
-            console.log(result.errors)
-            reject(result.errors)
+            console.log(result.errors);
+            reject(result.errors);
           }
-          const postTemplate = path.resolve("./src/templates/post.js")
+          const postTemplate = path.resolve("./src/templates/post.js");
           // We want to create a detailed page for each
           // post node. We'll just use the WordPress Slug for the slug.
           // The Post ID is prefixed with 'POST_'
@@ -499,12 +499,12 @@ exports.createPages = ({ graphql, boundActionCreators }) => {
               context: {
                 id: edge.node.id,
               },
-            })
-          })
-          resolve()
-        })
-      })
+            });
+          });
+          resolve();
+        });
+      });
     // ==== END POSTS ====
-  })
-}
+  });
+};
 ```
diff --git a/packages/gatsby-transformer-csv/README.md b/packages/gatsby-transformer-csv/README.md
index 8e266457ceb27..71e92de5f0362 100644
--- a/packages/gatsby-transformer-csv/README.md
+++ b/packages/gatsby-transformer-csv/README.md
@@ -10,7 +10,7 @@ Parses CSV files into JSON arrays.
 
 ```javascript
 // In your gatsby-config.js
-plugins: [`gatsby-transformer-csv`]
+plugins: [`gatsby-transformer-csv`];
 ```
 
 Above is the minimal configuration required to begin working. Additional
@@ -26,7 +26,7 @@ plugins: [
       noheader: true,
     },
   },
-]
+];
 ```
 
 ## Parsing algorithm
@@ -45,11 +45,11 @@ c,67
 the following three nodes would be created.
 
 ```javascript
-;[
+[
   { letter: "a", value: 65, type: "LettersCsv" },
   { letter: "b", value: 66, type: "LettersCsv" },
   { letter: "c", value: 67, type: "LettersCsv" },
-]
+];
 ```
 
 ## How to query
diff --git a/packages/gatsby-transformer-documentationjs/README.md b/packages/gatsby-transformer-documentationjs/README.md
index 84e45a855c418..90791d0664e0b 100644
--- a/packages/gatsby-transformer-documentationjs/README.md
+++ b/packages/gatsby-transformer-documentationjs/README.md
@@ -16,7 +16,7 @@ https://www.gatsbyjs.org/docs/node-apis/
 Add the plugin to your `gatsby-config.js`.
 
 ```javascript
-plugins: [`gatsby-transformer-documentationjs`]
+plugins: [`gatsby-transformer-documentationjs`];
 ```
 
 Ensure that there's an instance of `gatsby-source-filesystem` that's pointed at
@@ -32,7 +32,7 @@ plugins: [
       path: `${__dirname}/../src/`,
     },
   },
-]
+];
 ```
 
 Then you can write GraphQL queries pulling out JSDoc comments like:
diff --git a/packages/gatsby-transformer-excel/README.md b/packages/gatsby-transformer-excel/README.md
index c0509bd2069e5..bc9b008b430cf 100644
--- a/packages/gatsby-transformer-excel/README.md
+++ b/packages/gatsby-transformer-excel/README.md
@@ -10,7 +10,7 @@ Parses Excel files into JSON arrays.
 
 ```javascript
 // In your gatsby-config.js
-plugins: [`gatsby-transformer-excel`]
+plugins: [`gatsby-transformer-excel`];
 ```
 
 ## Parsing algorithm
@@ -44,12 +44,12 @@ So if your project has a `letters.xlsx` with two worksheets:
 the following nodes would be created:
 
 ```javascript
-;[
+[
   { letter: "a", value: 97, type: "LettersXlsxSheet1" },
   { letter: "b", value: 98, type: "LettersXlsxSheet1" },
   { letter: "A", value: 65, type: "LettersXlsxSheet2" },
   { letter: "B", value: 66, type: "LettersXlsxSheet2" },
-]
+];
 ```
 
 ## How to query
diff --git a/packages/gatsby-transformer-hjson/README.md b/packages/gatsby-transformer-hjson/README.md
index 46761bc06eb8c..57cb2b4a61ef1 100644
--- a/packages/gatsby-transformer-hjson/README.md
+++ b/packages/gatsby-transformer-hjson/README.md
@@ -14,7 +14,7 @@ points to your files.
 
 ```javascript
 // In your gatsby-config.js
-plugins: [`gatsby-transformer-hjson`]
+plugins: [`gatsby-transformer-hjson`];
 ```
 
 ## Parsing algorithm
@@ -29,11 +29,11 @@ The algorithm for arrays is to convert each item in the array into a node.
 So if your project has a `letters.hjson` with `[{ value: a } { value: b } { value: c }]` then the following three nodes would be created.
 
 ```javascript
-;[
+[
   { value: "a", type: "Letters" },
   { value: "b", type: "Letters" },
   { value: "c", type: "Letters" },
-]
+];
 ```
 
 ### Single Object
@@ -67,7 +67,7 @@ value: c
 Then the following three nodes would be created.
 
 ```javascript
-;[
+[
   {
     value: "a",
     type: "Letters",
@@ -80,7 +80,7 @@ Then the following three nodes would be created.
     value: "c",
     type: "Letters",
   },
-]
+];
 ```
 
 ## How to query
@@ -121,7 +121,7 @@ Which would return:
           value: "c",
         },
       },
-    ]
+    ];
   }
 }
 ```
diff --git a/packages/gatsby-transformer-javascript-static-exports/README.md b/packages/gatsby-transformer-javascript-static-exports/README.md
index 4b7971e1e38cf..13ecd1f050d1a 100644
--- a/packages/gatsby-transformer-javascript-static-exports/README.md
+++ b/packages/gatsby-transformer-javascript-static-exports/README.md
@@ -10,7 +10,7 @@ Parses JavaScript files to extract data from exports.
 
 ```javascript
 // In your gatsby-config.js
-plugins: [`gatsby-transformer-javascript-static-exports`]
+plugins: [`gatsby-transformer-javascript-static-exports`];
 ```
 
 ## Parsing algorithm
@@ -45,7 +45,7 @@ export const data = {
   path: "choropleth-on-d3v4",
   category: "data science",
   description: "Things about the choropleth.",
-}
+};
 ```
 
 ## How to query
diff --git a/packages/gatsby-transformer-json/README.md b/packages/gatsby-transformer-json/README.md
index ab93bc4c85f28..30b41e8931c80 100644
--- a/packages/gatsby-transformer-json/README.md
+++ b/packages/gatsby-transformer-json/README.md
@@ -14,7 +14,7 @@ points to your files.
 
 ```javascript
 // In your gatsby-config.js
-plugins: [`gatsby-transformer-json`]
+plugins: [`gatsby-transformer-json`];
 ```
 
 ## Parsing algorithm
@@ -29,11 +29,11 @@ The algorithm for arrays is to convert each item in the array into a node.
 So if your project has a `letters.json` with `[{ "value": "a" }, { "value": "b" }, { "value": "c" }]` then the following three nodes would be created.
 
 ```javascript
-;[
+[
   { value: "a", type: "Letters" },
   { value: "b", type: "Letters" },
   { value: "c", type: "Letters" },
-]
+];
 ```
 
 ### Single Object
@@ -69,7 +69,7 @@ Where each of `a.json`, `b.json` and `c.json` look like:
 Then the following three nodes would be created.
 
 ```javascript
-;[
+[
   {
     value: "a",
     type: "Letters",
@@ -82,7 +82,7 @@ Then the following three nodes would be created.
     value: "c",
     type: "Letters",
   },
-]
+];
 ```
 
 ## How to query
@@ -123,7 +123,7 @@ Which would return:
           value: "c",
         },
       },
-    ]
+    ];
   }
 }
 ```
diff --git a/packages/gatsby-transformer-remark/README.md b/packages/gatsby-transformer-remark/README.md
index 046541b03e13c..348d9c2a2f59d 100644
--- a/packages/gatsby-transformer-remark/README.md
+++ b/packages/gatsby-transformer-remark/README.md
@@ -10,7 +10,7 @@ Parses Markdown files using [Remark](http://remark.js.org/).
 
 ```javascript
 // In your gatsby-config.js
-plugins: [`gatsby-transformer-remark`]
+plugins: [`gatsby-transformer-remark`];
 ```
 
 A full explanation of how to use markdown in Gatsby can be found here:
diff --git a/packages/gatsby-transformer-sharp/README.md b/packages/gatsby-transformer-sharp/README.md
index 85a6f3446715e..c915fe9868457 100644
--- a/packages/gatsby-transformer-sharp/README.md
+++ b/packages/gatsby-transformer-sharp/README.md
@@ -16,7 +16,7 @@ including resizing, cropping, and creating responsive images.
 
 ```javascript
 // In your gatsby-config.js
-plugins: [`gatsby-transformer-sharp`]
+plugins: [`gatsby-transformer-sharp`];
 ```
 
 ## Parsing algorithm
diff --git a/packages/gatsby-transformer-toml/README.md b/packages/gatsby-transformer-toml/README.md
index bd964edfdba35..9696896e394ae 100644
--- a/packages/gatsby-transformer-toml/README.md
+++ b/packages/gatsby-transformer-toml/README.md
@@ -10,7 +10,7 @@ Parses TOML files.
 
 ```javascript
 // In your gatsby-config.js
-plugins: [`gatsby-transformer-toml`]
+plugins: [`gatsby-transformer-toml`];
 ```
 
 ## Parsing algorithm
diff --git a/packages/gatsby-transformer-xml/README.md b/packages/gatsby-transformer-xml/README.md
index 1fc8f05532667..cf3db8e75b988 100644
--- a/packages/gatsby-transformer-xml/README.md
+++ b/packages/gatsby-transformer-xml/README.md
@@ -10,7 +10,7 @@ Parses XML files. It supports also attributes
 
 ```javascript
 // In your gatsby-config.js
-plugins: [`gatsby-transformer-xml`]
+plugins: [`gatsby-transformer-xml`];
 ```
 
 ## Parsing algorithm
diff --git a/packages/gatsby-transformer-yaml/README.md b/packages/gatsby-transformer-yaml/README.md
index 1c502bd8b6409..46b5a00960b97 100644
--- a/packages/gatsby-transformer-yaml/README.md
+++ b/packages/gatsby-transformer-yaml/README.md
@@ -13,7 +13,7 @@ points to your files.
 
 ```javascript
 // In your gatsby-config.js
-plugins: [`gatsby-transformer-yaml`]
+plugins: [`gatsby-transformer-yaml`];
 ```
 
 ## Parsing algorithm
@@ -37,7 +37,7 @@ So if your project has a `letters.yaml` which looks like:
 Then the following three nodes would be created.
 
 ```javascript
-;[
+[
   {
     value: "a",
     type: "Letters",
@@ -50,7 +50,7 @@ Then the following three nodes would be created.
     value: "c",
     type: "Letters",
   },
-]
+];
 ```
 
 ### Single Object
@@ -86,7 +86,7 @@ value: c
 Then the following three nodes would be created.
 
 ```javascript
-;[
+[
   {
     value: "a",
     type: "Letters",
@@ -99,7 +99,7 @@ Then the following three nodes would be created.
     value: "c",
     type: "Letters",
   },
-]
+];
 ```
 
 ## How to query
@@ -140,7 +140,7 @@ Which would return:
           value: "c",
         },
       },
-    ]
+    ];
   }
 }
 ```