diff --git a/packages/hammer-cli/src/commands/Generate/Generate.js b/packages/hammer-cli/src/commands/Generate/Generate.js
index 1d0acb083110..846ef12db2e4 100644
--- a/packages/hammer-cli/src/commands/Generate/Generate.js
+++ b/packages/hammer-cli/src/commands/Generate/Generate.js
@@ -1,10 +1,10 @@
-import path from 'path';
-import React from 'react';
-import { Box, Text, Color } from 'ink';
+import path from 'path'
+import React from 'react'
+import { Box, Text, Color } from 'ink'
 
-import { hammerWorkspaceDir, writeFile, bytes } from 'src/lib';
+import { hammerWorkspaceDir, writeFile, bytes } from 'src/lib'
 
-import component from './generators/component';
+import component from './generators/component'
 
 /**
  * A generator is a function that takes a name and returns a list of filenames
@@ -12,10 +12,10 @@ import component from './generators/component';
  */
 const DEFAULT_GENERATORS = {
   component,
-};
+}
 
 const DEFAULT_COMPONENT_DIR = () =>
-  path.join(hammerWorkspaceDir(), './web/src/components/');
+  path.join(hammerWorkspaceDir(), './web/src/components/')
 
 const Generate = ({
   args,
@@ -27,7 +27,7 @@ const Generate = ({
       <Color red>
         The `generate` command has to be run in your hammer project directory.
       </Color>
-    );
+    )
   }
 
   const [
@@ -35,9 +35,9 @@ const Generate = ({
     generatorName,
     name,
     targetDir = DEFAULT_COMPONENT_DIR(),
-  ] = args;
+  ] = args
 
-  const generator = generators[generatorName];
+  const generator = generators[generatorName]
 
   if (!generator || !name) {
     return (
@@ -61,35 +61,35 @@ const Generate = ({
           </Box>
         </Box>
       </>
-    );
+    )
   }
 
-  const files = generator(name);
-  const results = Object.keys(files).map(filename => {
-    const contents = files[filename];
+  const files = generator(name)
+  const results = Object.keys(files).map((filename) => {
+    const contents = files[filename]
     try {
-      fileWriter(path.join(targetDir, filename), contents);
+      fileWriter(path.join(targetDir, filename), contents)
       return (
         <Text key={`wrote-${filename}`}>
           Wrote {filename} {bytes(contents)} bytes
         </Text>
-      );
+      )
     } catch (e) {
       return (
         <Text key={`error-${filename}`}>
           <Color red>{e}</Color>
         </Text>
-      );
+      )
     }
-  });
+  })
 
-  return results;
-};
+  return results
+}
 
 export const commandProps = {
   name: 'generate',
   alias: 'g',
   description: 'Save time by generating boilerplate code',
-};
+}
 
-export default Generate;
+export default Generate
diff --git a/packages/hammer-cli/src/commands/Generate/Generate.test.js b/packages/hammer-cli/src/commands/Generate/Generate.test.js
index b77876bfe354..f94207670478 100644
--- a/packages/hammer-cli/src/commands/Generate/Generate.test.js
+++ b/packages/hammer-cli/src/commands/Generate/Generate.test.js
@@ -1,19 +1,19 @@
-import React from 'react';
-import { render } from 'ink-testing-library';
+import React from 'react'
+import { render } from 'ink-testing-library'
 
-import Generate from './Generate';
+import Generate from './Generate'
 
 describe('Command: Generate', () => {
   const generators = {
     testGenerator: () => ({ 'a.js': 'a', 'a.test.js': 'b' }),
-  };
+  }
 
   it('command usage is shown when no or a bad generator is selected', () => {
     const { lastFrame } = render(
       <Generate args={['generate']} generators={generators} />
-    );
-    expect(lastFrame()).toMatch(/Usage:/g);
-  });
+    )
+    expect(lastFrame()).toMatch(/Usage:/g)
+  })
 
   it('routes to the correct command', () => {
     const { lastFrame } = render(
@@ -22,7 +22,7 @@ describe('Command: Generate', () => {
         generators={generators}
         fileWriter={() => {}}
       />
-    );
-    expect(lastFrame()).toMatch(/Wrote a.js/g);
-  });
-});
+    )
+    expect(lastFrame()).toMatch(/Wrote a.js/g)
+  })
+})
diff --git a/packages/hammer-cli/src/commands/Generate/generators/component.js b/packages/hammer-cli/src/commands/Generate/generators/component.js
index 757f44096b36..d84ebc0c1094 100644
--- a/packages/hammer-cli/src/commands/Generate/generators/component.js
+++ b/packages/hammer-cli/src/commands/Generate/generators/component.js
@@ -1,8 +1,8 @@
-import camelcase from 'camelcase';
+import camelcase from 'camelcase'
 
-const pascalCase = string => camelcase(string, { pascalCase: true });
+const pascalCase = (string) => camelcase(string, { pascalCase: true })
 
-const component = componentName => {
+const component = (componentName) => {
   return `
 /**
  * This amazing component does...
@@ -20,10 +20,10 @@ ${componentName}.queryProps = {
 };
 
 export default ${componentName};
-`;
-};
+`
+}
 
-const test = componentName => {
+const test = (componentName) => {
   return `
 import React from 'react';
 import { fireEvent, cleanup } from '@testing-library/react';
@@ -42,10 +42,10 @@ describe('${componentName}', () => {
     expect(true).toBe(false);
   })
 })
-`;
-};
+`
+}
 
-const mdx = componentName => {
+const mdx = (componentName) => {
   return `
 import ${componentName} from './'
 
@@ -53,15 +53,15 @@ import ${componentName} from './'
 
 - [ ] Document the props/ types
 - [ ] Allow user to play with the component
-  `;
-};
+  `
+}
 
-export default name => {
-  const componentName = pascalCase(name);
+export default (name) => {
+  const componentName = pascalCase(name)
 
   return {
     [`${componentName}/${componentName}.js`]: component(componentName),
     [`${componentName}/${componentName}.test.js`]: test(componentName),
     [`${componentName}/${componentName}.mdx`]: mdx(componentName),
-  };
-};
+  }
+}
diff --git a/packages/hammer-cli/src/components/CommandList.js b/packages/hammer-cli/src/components/CommandList.js
index d5fdef397ea9..a1e82f522464 100644
--- a/packages/hammer-cli/src/components/CommandList.js
+++ b/packages/hammer-cli/src/components/CommandList.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import { Text, Box } from 'ink';
+import React from 'react'
+import { Text, Box } from 'ink'
 
 const CommandList = ({ commands }) => {
   return (
@@ -17,10 +17,10 @@ const CommandList = ({ commands }) => {
             </Box>
             <Box flex={1}>{description}</Box>
           </Box>
-        );
+        )
       })}
     </Box>
-  );
-};
+  )
+}
 
-export default CommandList;
+export default CommandList
diff --git a/packages/hammer-cli/src/components/Header.js b/packages/hammer-cli/src/components/Header.js
index afc9da5e43ad..9e1dd112387c 100644
--- a/packages/hammer-cli/src/components/Header.js
+++ b/packages/hammer-cli/src/components/Header.js
@@ -1,13 +1,13 @@
-import React from 'react';
-import { Color, Text, Box } from 'ink';
+import React from 'react'
+import { Color, Text, Box } from 'ink'
 
-import { version } from '../../package.json';
+import { version } from '../../package.json'
 
-export default props => (
+export default (props) => (
   <Box {...props}>
     <Color hex="#FFD900">
       <Text bold>⚒ Hammer</Text> - Build something. (https://example.org)
     </Color>{' '}
     <Color hex="#999">| v{version}</Color>
   </Box>
-);
+)
diff --git a/packages/hammer-cli/src/components/index.js b/packages/hammer-cli/src/components/index.js
index 2ac4621c1607..c5b002431a3c 100644
--- a/packages/hammer-cli/src/components/index.js
+++ b/packages/hammer-cli/src/components/index.js
@@ -1,2 +1,2 @@
-export { default as Header } from './Header';
-export { default as CommandList } from './CommandList';
+export { default as Header } from './Header'
+export { default as CommandList } from './CommandList'
diff --git a/packages/hammer-cli/src/index.js b/packages/hammer-cli/src/index.js
index eebc1bb9d985..6fc4e9659aa6 100644
--- a/packages/hammer-cli/src/index.js
+++ b/packages/hammer-cli/src/index.js
@@ -1,17 +1,16 @@
 #!/usr/bin/env node
 
-import path from 'path';
-import React from 'react';
-import { render, Box } from 'ink';
+import React from 'react'
+import { render, Box } from 'ink'
 
-import { getCommands, parseArgs } from 'src/lib';
-import { Header, CommandList } from 'src/components';
+import { getCommands, parseArgs } from 'src/lib'
+import { Header, CommandList } from 'src/components'
 
 const Router = ({ commands, args = [] }) => {
-  const commandToRun = args[0];
+  const commandToRun = args[0]
   const command = commands.find(({ commandProps: { name, alias } }) =>
     [name, alias].includes(commandToRun)
-  );
+  )
 
   return (
     <Box flexDirection="column">
@@ -24,11 +23,11 @@ const Router = ({ commands, args = [] }) => {
         </>
       )}
     </Box>
-  );
-};
+  )
+}
 
 if (process.env.NODE_ENV !== 'test') {
-  render(<Router commands={getCommands()} args={parseArgs()} />);
+  render(<Router commands={getCommands()} args={parseArgs()} />)
 }
 
-export default Router;
+export default Router
diff --git a/packages/hammer-cli/src/index.test.js b/packages/hammer-cli/src/index.test.js
index 1c2ebc02647d..ecc3a9a3bf5d 100644
--- a/packages/hammer-cli/src/index.test.js
+++ b/packages/hammer-cli/src/index.test.js
@@ -1,7 +1,7 @@
-import React from 'react';
-import { render } from 'ink-testing-library';
+import React from 'react'
+import { render } from 'ink-testing-library'
 
-import Router from './';
+import Router from './'
 
 describe('Router', () => {
   const commands = [
@@ -22,20 +22,20 @@ describe('Router', () => {
           "the sound of the tyres on the road roared above that of it's engine.",
       },
     },
-  ];
+  ]
 
-  const renderComponent = props =>
-    render(<Router commands={commands} args={undefined} {...props} />);
+  const renderComponent = (props) =>
+    render(<Router commands={commands} args={undefined} {...props} />)
 
   it('the default menu is shown when no arguments are passed', () => {
-    const { lastFrame } = renderComponent();
-    expect(lastFrame()).toMatch(/Commands/g);
-  });
+    const { lastFrame } = renderComponent()
+    expect(lastFrame()).toMatch(/Commands/g)
+  })
 
   it('routes to the correct command when the name is matched ', () => {
     const { lastFrame } = renderComponent({
       args: ['command_a'],
-    });
-    expect(lastFrame()).toMatch(/I am the a/g);
-  });
-});
+    })
+    expect(lastFrame()).toMatch(/I am the a/g)
+  })
+})
diff --git a/packages/hammer-cli/src/lib/index.js b/packages/hammer-cli/src/lib/index.js
index c74edeed31c4..874b219be880 100644
--- a/packages/hammer-cli/src/lib/index.js
+++ b/packages/hammer-cli/src/lib/index.js
@@ -1,8 +1,8 @@
-import fs from 'fs';
-import path from 'path';
-import requireDir from 'require-dir';
-import parse from 'yargs-parser';
-import workspaceRoot from 'find-yarn-workspace-root';
+import fs from 'fs'
+import path from 'path'
+import requireDir from 'require-dir'
+import parse from 'yargs-parser'
+import workspaceRoot from 'find-yarn-workspace-root'
 
 export const writeFile = (
   target,
@@ -11,71 +11,71 @@ export const writeFile = (
 ) => {
   if (overwriteExisting === false) {
     if (fs.existsSync(target)) {
-      throw `${target} already exists`;
+      throw `${target} already exists`
     }
   }
-  const filename = path.basename(target);
-  const targetDir = target.replace(filename, '');
-  fs.mkdirSync(targetDir, { recursive: true });
-  fs.writeFileSync(target, contents);
-};
+  const filename = path.basename(target)
+  const targetDir = target.replace(filename, '')
+  fs.mkdirSync(targetDir, { recursive: true })
+  fs.writeFileSync(target, contents)
+}
 
-export const bytes = contents => Buffer.byteLength(contents, 'utf8');
+export const bytes = (contents) => Buffer.byteLength(contents, 'utf8')
 
 /**
  * This determines the root `yarn workspace` directory.
  * TODO: Don't rely on workspaces, find the hammer config or `.hammer`
  * directory.
  */
-export const hammerWorkspaceDir = () => workspaceRoot(process.cwd());
+export const hammerWorkspaceDir = () => workspaceRoot(process.cwd())
 
 const validateCommandExports = ({ commandProps, ...rest }) => {
   if (typeof rest.default !== 'function') {
-    throw 'you must export a default function';
+    throw 'you must export a default function'
   }
 
   if (!commandProps) {
-    throw 'you must export an object called `commandProps`';
+    throw 'you must export an object called `commandProps`'
   }
 
-  const { description } = commandProps;
+  const { description } = commandProps
   if (!description) {
-    throw 'you must add a `description` to  your `commandProps`';
+    throw 'you must add a `description` to  your `commandProps`'
   }
-};
+}
 
 // TODO: Throw on duplicate commands
 export const getCommands = (commandsPath = '../commands') => {
   const foundCommands = requireDir(commandsPath, {
     recurse: true,
     extensions: ['.js'],
-    filter: fullPath => {
-      return fullPath.indexOf('.test.js') === -1;
+    filter: (fullPath) => {
+      return fullPath.indexOf('.test.js') === -1
     },
-  });
+  })
 
   return Object.keys(foundCommands).reduce((newCommands, commandName) => {
-    let command = foundCommands[commandName];
+    let command = foundCommands[commandName]
     // is this a directory-named-modules? Eg: `/Generate/Generate.js`
     // NOTE: Improve this by looking at the file names before importing
     // everything.
     if (command.index && command.index.default) {
-      command = command.index;
+      command = command.index
     } else if (command[commandName] && command[commandName].default) {
-      command = command[commandName];
+      command = command[commandName]
     }
 
     try {
-      validateCommandExports(command);
+      validateCommandExports(command)
     } catch (e) {
-      throw `your "${commandName}" command is not exporting the correct requirements: ${e}`;
+      throw `your "${commandName}" command is not exporting the correct requirements: ${e}`
     }
 
-    const { commandProps, ...rest } = command;
+    const { commandProps, ...rest } = command
     const newCommandProps = {
       name: commandProps.name || commandName,
       ...commandProps,
-    };
+    }
 
     return [
       ...newCommands,
@@ -83,10 +83,10 @@ export const getCommands = (commandsPath = '../commands') => {
         commandProps: newCommandProps,
         ...rest,
       },
-    ];
-  }, []);
-};
+    ]
+  }, [])
+}
 
 export const parseArgs = () => {
-  return parse(process.argv.slice(2))._;
-};
+  return parse(process.argv.slice(2))._
+}
diff --git a/prettier.config.js b/prettier.config.js
index 831bb9079c9f..dce3eb3ac73b 100644
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -1,5 +1,9 @@
+// https://prettier.io/docs/en/options.html
 module.exports = {
   trailingComma: 'es5',
+  bracketSpacing: true,
   tabWidth: 2,
+  semi: false,
   singleQuote: true,
-};
+  arrowParens: 'always',
+}