Add prettier to CI

Author: raymond-lam

.travis.yml

@@ -7,6 +7,7 @@ jobs:
   include:
     - stage: test
       script: npm run-s test:lint
+    - script: npm run-s test:prettier
     - script: npm run-s test:flow
 
     - script: npm run-s test:unit

CONTRIBUTING.md

@@ -20,6 +20,8 @@ Library definitions for [Flow type annotations](https://flow.org/en/docs/types/)
 
 The `src` directory also contains testing files written for the [jest](https://jestjs.io/en/) test harness. The tests use [Enzyme](https://github.com/enzymejs/enzyme) for component and DOM manipulation and traversal. These tests are run in the CI/CD pipeline, and must pass before a branch can be merged into the 'main' branch. Changes may be needed to the test harness to accommodate new features or fixes.
 
+The CI/CD pipeline also runs `prettier`, `eslint`, and `flow` checks which must pass before a branch can be merged into 'main'. You can run `npm run prettier` to auto-format code to pass `prettier` standards, and `npm test` to run all of these tests to ensure that they will pass in the CI/CD pipeline.
+
 Test coverage is [tracked in coveralls.io](https://coveralls.io/github/ginkgobioworks/react-json-schema-form-builder) to make sure that test coverage is maintained or increased as time goes on.
 
 ## Documentation

example/package.json

@@ -8,6 +8,8 @@
     "build": "node ../node_modules/react-scripts/bin/react-scripts.js build",
     "test": "node ../node_modules/react-scripts/bin/react-scripts.js test",
     "eject": "node ../node_modules/react-scripts/bin/react-scripts.js eject",
+    "prettier": "prettier -w src",
+    "prettier:check": "prettier -c src",
     "flow": "flow",
     "lint": "eslint .",
     "clean": "rimraf node_modules build"

example/src/JsonSchemaFormSuite.js

@@ -10,7 +10,10 @@ import {
 } from 'reactstrap';
 import { withTheme } from '@rjsf/core';
 import { Theme as Bootstrap4Theme } from '@rjsf/bootstrap-4';
-import { FormBuilder, PredefinedGallery } from '@ginkgo-bioworks/react-json-schema-form-builder';
+import {
+  FormBuilder,
+  PredefinedGallery,
+} from '@ginkgo-bioworks/react-json-schema-form-builder';
 import Tabs from './tabs/Tabs';
 import JSONInput from 'react-json-editor-ajrm';
 import locale from 'react-json-editor-ajrm/locale/en';

example/src/PlaygroundContainer.js

@@ -23,7 +23,7 @@ export default function PlaygroundContainer({ title }: { title: string }) {
   const [uischema, setUischema] = React.useState('{}');
   const classes = useStyles();
   return (
-    <div className="playground">
+    <div className='playground'>
       <div className={classes.header}>
         <h1>{title}</h1>
         <p>

package.json

@@ -25,11 +25,13 @@
     "clean": "rimraf node_modules coverage dist",
     "build": "microbundle-crl --no-compress --format modern,cjs",
     "start": "microbundle-crl watch --no-compress --format modern,cjs",
+    "prettier": "prettier -w src && prettier -w example/src",
     "flow": "flow",
     "flow:install-types": "flow-typed install",
-    "test": "run-s test:unit test:lint test:flow",
+    "test": "run-s test:unit test:prettier test:lint test:flow",
     "test:flow": "flow",
     "test:lint": "eslint .",
+    "test:prettier": "prettier -c src && prettier -c example/src",
     "test:unit": "cross-env CI=1 react-scripts test --env=jsdom --coverage --coverageDirectory=coverage/",
     "test:watch": "react-scripts test --env=jsdom"
   },