Use prettier

Author: brampersandon

README.md

@@ -11,3 +11,9 @@ Run `npm run develop` and access the dev server at the address it reports.
 Run `npm build`, and a built version will be written to `/dist`. This will
 also update the markdown files that define our code of conduct, speaker
 questionnaire, and sponsorship levels from the [admin repository](https://github.com/javascriptmn/javascriptmn)
+
+## Style
+This repository is configured to use [prettier](https://prettier.io/) on commit.
+
+It will lint and format your changes automatically, so don't worry about following
+format standards (so long as your code passes the lint-staged step).

components/Meetup.js

@@ -9,73 +9,85 @@ export default class Meetup extends React.Component {
   state = {
     name: '',
     time: Date.now(),
-    venue: {name: ''},
+    venue: { name: '' },
     loading: false,
     error: false
   }
 
-  componentDidMount () {
+  componentDidMount() {
     this.setState({
       loading: true,
       error: false
     })
-    window.fetch(NEXT_MEETUP_URI)
-      .then((res) => {
+    window
+      .fetch(NEXT_MEETUP_URI)
+      .then(res => {
         // Gotta love network errors...
         if (!res.ok) throw Error(response.statusText)
         return response
       })
-      .then((res) => res.json())
-      .then((json) => this.setState({
-        ...json,
-        loading: false
-      }))
-      .catch(_ => this.setState({loading: false, error: true}))
+      .then(res => res.json())
+      .then(json =>
+        this.setState({
+          ...json,
+          loading: false
+        })
+      )
+      .catch(_ => this.setState({ loading: false, error: true }))
   }
 
-  render () {
+  render() {
     const meetupStyles = {
-        container: {
-          textAlign: 'center',
-          border: '1px solid black',
-          display: 'inline block',
-          margin: '8rem'
-        },
-        title: {
-          fontSize: '2rem',
-          margin: '1rem'
-        },
-        bug: {},
-        rsvpButton: {}
+      container: {
+        textAlign: 'center',
+        border: '1px solid black',
+        display: 'inline block',
+        margin: '8rem'
+      },
+      title: {
+        fontSize: '2rem',
+        margin: '1rem'
+      },
+      bug: {},
+      rsvpButton: {}
     }
 
-    const MeetupDescription = ({name, time, venue}) => (<div className="next-event">
+    const MeetupDescription = ({ name, time, venue }) => (
+      <div className="next-event">
         <div className="next-event-tagline">
           <strong>Next Event:</strong>
-          <div className="event-name">
-            {name}
-          </div>
-          {
-            (time && venue && venue.name) &&
-            (<span className="next-event-timestamp">{format(new Date(time), 'dddd, MMMM Do, YYYY')} at <strong>{ venue.name }</strong></span>)
-          }
+          <div className="event-name">{name}</div>
+          {time &&
+            venue &&
+            venue.name && (
+              <span className="next-event-timestamp">
+                {format(new Date(time), 'dddd, MMMM Do, YYYY')} at{' '}
+                <strong>{venue.name}</strong>
+              </span>
+            )}
         </div>
-      </div>)
+      </div>
+    )
 
-    if (this.state.loading)
-      return (<MeetupDescription
-          name={'Loading...'}
-         />)
+    if (this.state.loading) return <MeetupDescription name={'Loading...'} />
 
     if (this.state.error)
-      return (<MeetupDescription
-          name={(<a href='https://meetup.com/javascriptmn'>Check Meetup.com for updates</a>)}
-         />)
+      return (
+        <MeetupDescription
+          name={
+            <a href="https://meetup.com/javascriptmn">
+              Check Meetup.com for updates
+            </a>
+          }
+        />
+      )
 
-    return (<MeetupDescription
+    return (
+      <MeetupDescription
         name={this.state.name}
         time={this.state.time}
         venue={this.state.venue}
-      />)
+      />
+    )
   }
 }

css/markdown-styles.css

@@ -1,10 +1,10 @@
 .warning {
-  color: #9F6000;
-  background-color: #FEEFB3;
+  color: #9f6000;
+  background-color: #feefb3;
   padding: 18px;
 }
 .warning:before {
-  content:'\26A0';
+  content: '\26A0';
   margin-right: 9px;
 }
 

package.json

@@ -3,21 +3,24 @@
   "description": "JavaScriptMN website",
   "version": "1.0.0",
   "private": true,
-  "author": "JavaScriptMN Organizers <javascriptmn@gmail.com",
+  "author": "JavaScriptMN Organizers <javascriptmn@gmail.com>",
   "dependencies": {
     "date-fns": "^1.28.5",
     "front-matter": "^2.1.1",
     "gatsby": "^0.12.20",
     "highlight.js": "^9.8.0",
     "history": "^2.0.2",
+    "husky": "^0.14.3",
     "js-yaml": "^3.7.0",
+    "lint-staged": "^6.0.0",
     "markdown-it": "^7.0.1",
     "markdown-it-abbr": "^1.0.3",
     "markdown-it-attrs": "^0.6.3",
     "markdown-it-deflist": "^2.0.1",
     "markdown-it-footnote": "^3.0.1",
     "markdown-it-sub": "^1.0.0",
     "object-assign": "^4.1.0",
+    "prettier": "^1.8.2",
     "react-headroom": "^2.1.2",
     "react-helmet": "^3.2.2",
     "react-responsive-grid": "^0.3.3",
@@ -36,6 +39,10 @@
     "build": "gatsby build",
     "deploy": "gatsby build --prefix-links && gh-pages -a -d public -b master",
     "develop": "gatsby develop",
+    "precommit": "lint-staged",
     "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "lint-staged": {
+    "{pages,components,css}/**/*.{js,json,css}": ["prettier --write --no-semi --single-quote", "git add"]
   }
 }

pages/styles.css

@@ -9,7 +9,9 @@
     list-style: none;
   }
 
-  & li { display: inline-block; }
+  & li {
+    display: inline-block;
+  }
 
   & a {
     background: var(--color);
@@ -24,5 +26,3 @@
 .the-postcss-class {
   text-decoration: underline;
 }
-
-