import prettier

.eslintrc

@@ -2,7 +2,9 @@
 	"parser": "babel-eslint",
   "extends": [
     "airbnb",
-    "plugin:react/recommended"
+    "plugin:react/recommended",
+    "prettier",
+    "prettier/react"
   ],
   "plugins": [
     "jest"
@@ -17,31 +19,26 @@
     "no-console": 1,
     "react/jsx-indent-props": 0,
     "linebreak-style": 0,
-    "comma-dangle": 1,
     "react/forbid-prop-types": 0,
     "react/jsx-filename-extension": 0,
     "react/react-in-jsx-scope": 0,
     "react/jsx-boolean-value": 0,
     "react/prefer-stateless-function": 1,
-    "react/jsx-indent": 1,
     "react/jsx-no-bind": 2,
     "react/no-multi-comp": 0,
     "react/jsx-closing-tag-location": 0,
     "react/jsx-one-expression-per-line": 0,
     "arrow-body-style": 0,
     "prefer-arrow-callback": 0,
-    "semi": 1,
     "prefer-template":1,
     "react/prop-types": 2,
-    "indent": 1,
     "func-names": 0,
     "jsx-a11y/href-no-hash": 0,
     "no-param-reassign": 0,
     "no-irregular-whitespace": 0,
     "import/no-dynamic-require": 0,
     "global-require": 0,
     "import/no-extraneous-dependencies": [2, { "peerDependencies": false }],
-    "max-len": [2, 140],
     "no-underscore-dangle": 0,
     "class-methods-use-this": 0,
     "react/no-danger": 0,

.gitignore

@@ -3,7 +3,6 @@ npm-debug.log
 yarn-error.log
 .next/
 dist/
-.vscode/
 
 # dependencies
 node_modules/

.prettierignore

@@ -0,0 +1,3 @@
+coverage/**
+dist/**
+node_modules/**

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "printWidth": 90,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all"
+}

.vscode/settings.json

@@ -0,0 +1,9 @@
+{
+  "editor.tabSize": 2,
+  "[javascript]": {
+    "editor.formatOnSave": true
+  },
+  "[json]": {
+    "editor.formatOnSave": true
+  }
+}

babel.config.js

@@ -6,28 +6,20 @@ const common = {
   plugins: [],
   env: {
     production: {
-      plugins: [
-        'transform-react-remove-prop-types',
-      ],
+      plugins: ['transform-react-remove-prop-types'],
     },
   },
   ignore: ['node_modules/**'],
 };
 
-
 let presets = [];
 let plugins = [];
 if (process.env.NODE_ENV !== 'production') {
   // besides production
-  presets = [
-    'next/babel',
-  ];
+  presets = ['next/babel'];
 } else {
   // production
-  presets = [
-    '@babel/env',
-    '@babel/react',
-  ];
+  presets = ['@babel/env', '@babel/react'];
 
   plugins = [
     'add-module-exports',

examples/simple/src/pages/index.js

@@ -1,10 +1,6 @@
 import React from 'react';
 import Button from '@material-ui/core/Button';
 
-const Page1 = () => (
-  <Button color="primary">
-    Hello World, Page1!
-  </Button>
-);
+const Page1 = () => <Button color="primary">Hello World, Page1!</Button>;
 
 export default Page1;

examples/withTheme/src/pages/index.js

@@ -6,9 +6,7 @@ import withAll from '../client/hoc/withAll';
 
 const Page1 = () => (
   <div>
-    <Button color="primary">
-      Hello World Page1!
-    </Button>
+    <Button color="primary">Hello World Page1!</Button>
     <div>
       <Link href="/page2">
         <Button>To Page2</Button>

examples/withTheme/src/pages/page2.js

@@ -6,9 +6,7 @@ import withAll from '../client/hoc/withAll';
 
 const Page2 = () => (
   <div>
-    <Button color="primary">
-      Hello World Page2!
-    </Button>
+    <Button color="primary">Hello World Page2!</Button>
     <div>
       <Link href="/">
         <Button>To Page1</Button>

examples/withThemeApp/src/pages/index.js

@@ -4,9 +4,7 @@ import Link from 'next/link';
 
 const Page1 = () => (
   <div>
-    <Button color="primary">
-      Hello World Page1!
-    </Button>
+    <Button color="primary">Hello World Page1!</Button>
     <div>
       <Link href="/page2">
         <Button>To Page2</Button>

examples/withThemeApp/src/pages/page2.js

@@ -4,9 +4,7 @@ import Link from 'next/link';
 
 const Page2 = () => (
   <div>
-    <Button color="primary">
-      Hello World Page2!
-    </Button>
+    <Button color="primary">Hello World Page2!</Button>
     <div>
       <Link href="/">
         <Button>To Page1</Button>

jsconfig.json

@@ -1,13 +1,11 @@
 {
-    "compilerOptions": {
-        "experimentalDecorators": true,
-        "baseUrl": ".",
-        "paths": {
-            "*": ["src/*"],
-            "material-ui": ["@material-ui/core"]
-        }
-    },
-    "exclude": [
-        "node_modules"
-    ]
+  "compilerOptions": {
+    "experimentalDecorators": true,
+    "baseUrl": ".",
+    "paths": {
+      "*": ["src/*"],
+      "material-ui": ["@material-ui/core"]
+    }
+  },
+  "exclude": ["node_modules"]
 }

package.json

@@ -7,6 +7,8 @@
     "build:rm": "rm -rf dist/",
     "build:cp": "node ./scripts/copyFiles dist/ package.json README.md CHANGELOG.md LICENSE",
     "build": "npm run build:rm && cross-env NODE_ENV=production babel src --out-dir ./dist --verbose && npm run build:cp",
+    "prettier": "prettier --write ./**/*.js ./**/*.json",
+    "eslint-check": "eslint --print-config . | eslint-config-prettier-check",
     "jest": "jest",
     "dev": "next",
     "test": "cross-env NODE_ENV=production npm run eslint && cross-env NODE_ENV=production npm run jest"
@@ -51,13 +53,15 @@
     "cross-env": "^5.2.0",
     "eslint": "^5.7.0",
     "eslint-config-airbnb": "^17.1.0",
+    "eslint-config-prettier": "^4.1.0",
     "eslint-config-react": "^1.1.7",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-jest": "^21.26.0",
     "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-react": "^7.11.1",
     "jest": "^23.6.0",
     "next": "^7.0.2",
+    "prettier": "^1.16.4",
     "prop-types": "^15.6.2",
     "react": "^16.6.0",
     "react-dom": "^16.6.0",

pages/_app.js

@@ -7,9 +7,7 @@ const Layout = ({ children, title }) => {
   return (
     <div>
       [Layout] -- {title}
-      <div>
-        {children}
-      </div>
+      <div>{children}</div>
     </div>
   );
 };

pages/page1.js

@@ -6,17 +6,17 @@ import Link from 'next/link';
 class Page1 extends React.PureComponent {
   state = {
     inputText: '',
-  }
+  };
 
   componentDidMount() {
     console.log('render only once');
   }
 
-  onTextFieldChange = (e) => {
+  onTextFieldChange = e => {
     this.setState({
       inputText: e.target.value,
     });
-  }
+  };
 
   render() {
     return (

scripts/copyFiles.js

@@ -8,7 +8,7 @@ if (argvs.length < 4) {
 }
 
 const destFolder = argvs[2];
-argvs.forEach(function (filePath, ind) {
+argvs.forEach(function(filePath, ind) {
   if (ind < 3) return;
 
   fs.createReadStream(filePath).pipe(fs.createWriteStream(`${destFolder}${filePath}`));

src/mui/withCssBaseline.js

@@ -8,8 +8,8 @@ import getDisplayName from '../util/getDisplayName';
 /**
  * inject Material-ui's default cssbaseline
  */
-const withCssBaseline = (BaseComponent) => {
-  const InjectMUICssBaseline = (props) => {
+const withCssBaseline = BaseComponent => {
+  const InjectMUICssBaseline = props => {
     const CssBaselineWrapper = CssBaseline;
 
     return (

src/mui/withLayout.js

@@ -7,10 +7,10 @@ import getDisplayName from '../util/getDisplayName';
 
 /**
  * inject Layout
- * @param {Component} Layout 
+ * @param {Component} Layout
  */
-const withLayout = Layout => ((BaseComponent) => {
-  const InjectLayout = (props) => {
+const withLayout = Layout => BaseComponent => {
+  const InjectLayout = props => {
     return (
       <Layout {...props}>
         <BaseComponent {...props} />
@@ -21,7 +21,7 @@ const withLayout = Layout => ((BaseComponent) => {
   // wrap displayName for easier debug
   InjectLayout.displayName = `withLayout(${getDisplayName(BaseComponent)})`;
 
-  InjectLayout.getInitialProps = async (context) => {
+  InjectLayout.getInitialProps = async context => {
     const props = await getInitialProps(BaseComponent, context);
 
     // Get menu info
@@ -41,6 +41,6 @@ const withLayout = Layout => ((BaseComponent) => {
   hoistStatics(InjectLayout, BaseComponent);
 
   return InjectLayout;
-});
+};
 
 export default withLayout;

src/mui/withMuiTheme.js

@@ -10,9 +10,9 @@ import getDisplayName from '../util/getDisplayName';
 
 /**
  * inject Mui Theme
- * @param {object} theme 
+ * @param {object} theme
  */
-const withMuiTheme = theme => ((BaseComponent) => {
+const withMuiTheme = theme => BaseComponent => {
   class InjectMuiTheme extends PureComponent {
     pageContext = null;
 
@@ -64,6 +64,6 @@ const withMuiTheme = theme => ((BaseComponent) => {
   hoistStatics(InjectMuiTheme, BaseComponent);
 
   return InjectMuiTheme;
-});
+};
 
 export default withMuiTheme;

src/mui/withParts.js

@@ -7,7 +7,12 @@ import withCssBaseline from './withCssBaseline';
 
 import defaultTheme from './defaultTheme';
 
-const withParts = (muiTheme = null, Layout = null, enableNProgress = false, enableDefaultCssBaseline = true) => {
+const withParts = (
+  muiTheme = null,
+  Layout = null,
+  enableNProgress = false,
+  enableDefaultCssBaseline = true,
+) => {
   const layoutHoc = Layout != null ? withLayout(Layout) : null;
 
   const muiThemeHoc = withMuiTheme(muiTheme || defaultTheme);

src/mui/withProgressBar.js

@@ -36,7 +36,9 @@ const styles = theme => ({
       '& .bar': {
         position: 'fixed',
         background:
-          theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white,
+          theme.palette.type === 'light'
+            ? theme.palette.common.black
+            : theme.palette.common.white,
         borderRadius: 1,
         zIndex: theme.zIndex.tooltip,
         top: 0,
@@ -49,7 +51,9 @@ const styles = theme => ({
         top: 0,
         height: 2,
         boxShadow: `${
-          theme.palette.type === 'light' ? theme.palette.common.black : theme.palette.common.white
+          theme.palette.type === 'light'
+            ? theme.palette.common.black
+            : theme.palette.common.white
         } 1px 0 6px 1px`,
         borderRadius: '100%',
         animation: 'nprogress-pulse 2s ease-out 0s infinite',
@@ -81,11 +85,10 @@ const styles = theme => ({
   },
 });
 
-
 /**
  * inject nprogress with NextJs.Router
  */
-const withProgressBar = (BaseComponent) => {
+const withProgressBar = BaseComponent => {
   const InjectProgressBar = props => <BaseComponent {...props} />;
 
   // wrap displayName for easier debug

src/nextjs/extendsWithMui.js

@@ -11,7 +11,7 @@ import getDisplayName from '../util/getDisplayName';
  * @param {MUITheme} theme
  * @param {next/document} DocumentComponent
  */
-const extendsWithMui = theme => ((DocumentComponent) => {
+const extendsWithMui = theme => DocumentComponent => {
   class ExtendsWithMui extends DocumentComponent {
     static displayName = `extendsWithMui(${getDisplayName(DocumentComponent)})`;
 
@@ -41,8 +41,8 @@ const extendsWithMui = theme => ((DocumentComponent) => {
 
       // inject theme by hoc
       let pageContext;
-      const page = ctx.renderPage((Component) => {
-        const WrappedComponent = (props) => {
+      const page = ctx.renderPage(Component => {
+        const WrappedComponent = props => {
           // pageContext = props.pageContext;
           // eslint-disable-next-line react/destructuring-assignment
           pageContext = props.pageContext || getContext(theme);
@@ -109,6 +109,6 @@ const extendsWithMui = theme => ((DocumentComponent) => {
   }
 
   return ExtendsWithMui;
-});
+};
 
 export default extendsWithMui;