enable prettier (#4518)

* enable prettier

* fix prop

* fix lint staged

* run prettier

* prettify more files

Author: chenxsan

.eslintrc.js

@@ -1,6 +1,6 @@
 module.exports = {
   root: true,
-  extends: ['eslint:recommended', 'plugin:react/recommended'],
+  extends: ['eslint:recommended', 'plugin:react/recommended', 'prettier'],
   parser: '@babel/eslint-parser',
   env: {
     browser: true,

.markdownlint.json

@@ -2,7 +2,7 @@
   "default": true,
   "MD002": false,
   "MD004": { "style": "dash" },
-  "MD007": { "indent": 4 },
+  "MD007": { "indent": 2 },
   "MD013": { "line_length": 600 },
   "MD026": false,
   "MD029": { "style": "ordered" },
@@ -11,6 +11,5 @@
   "MD036": false,
   "MD041": false,
   "no-hard-tabs": false,
-  "whitespace": false,
-  "emphasis-style": { "style": "_" }
+  "whitespace": false
 }

.prettierignore

@@ -8,9 +8,7 @@
   "issues": "https://github.com/errata-ai/proselint/issues/new",
   "license": "BSD-3-Clause",
   "name": "proselint",
-  "sources": [
-    "https://github.com/amperser/proselint"
-  ],
+  "sources": ["https://github.com/amperser/proselint"],
   "vale_version": ">=1.0.0",
   "coverage": 0.0,
   "version": "0.1.0"

.vale/proselint/meta.json

@@ -1,6 +1,6 @@
 const sizes = ['iphone-6', 'macbook-15'];
 describe('Scroll Test', () => {
-  sizes.forEach(size => {
+  sizes.forEach((size) => {
     it(`scroll to top when accessing new page on ${size}`, () => {
       cy.viewport(size);
       cy.visit('/guides/getting-started');

cypress/integration/scroll_spec.js

@@ -1,5 +1,5 @@
-Cypress.Commands.add('isNotInViewport', element => {
-  cy.get(element).then($el => {
+Cypress.Commands.add('isNotInViewport', (element) => {
+  cy.get(element).then(($el) => {
     // we won't have horizontal scollbar
     const rect = $el[0].getBoundingClientRect();
     if (rect.top < 0) {
@@ -10,8 +10,8 @@ Cypress.Commands.add('isNotInViewport', element => {
   });
 });
 
-Cypress.Commands.add('isInViewport', element => {
-  cy.get(element).then($el => {
+Cypress.Commands.add('isInViewport', (element) => {
+  cy.get(element).then(($el) => {
     const rect = $el[0].getBoundingClientRect();
 
     expect(rect.top).to.be.at.least(0);

cypress/support/commands.js

@@ -44,7 +44,7 @@
     "lint:js": "npm run lint-js .",
     "lint-js": "eslint --cache --cache-location .cache/.eslintcache",
     "lint:markdown": "npm run lint-markdown *.md ./src/content/**/*.md",
-    "lint-markdown": "markdownlint --rules markdownlint-rule-emphasis-style --config ./.markdownlint.json --ignore './src/content/**/_*.md' --ignore '.vale/**/*.md' --ignore '.github/**/*.md'",
+    "lint-markdown": "markdownlint --config ./.markdownlint.json --ignore './src/content/**/_*.md' --ignore '.vale/**/*.md' --ignore '.github/**/*.md'",
     "lint:social": "alex . -q",
     "lint:prose": "vale --config='.vale.ini' src/content",
     "lint:links": "hyperlink -c 8 --root dist -r dist/index.html --canonicalroot https://webpack.js.org/ --internal --skip /plugins/extract-text-webpack-plugin/ --skip /printable --skip https:// --skip http:// --skip sw.js > internal-links.tap; cat internal-links.tap | tap-spot",
@@ -55,7 +55,8 @@
     "jest": "jest",
     "cypress:open": "cypress open",
     "cypress:run": "cypress run",
-    "cypress:ci": "start-server-and-test build-test http://localhost:4200 cypress:run"
+    "cypress:ci": "start-server-and-test build-test http://localhost:4200 cypress:run",
+    "prettier": "prettier --write 'src/**/*.{js,jsx,css,scss,md,mdx}' '**/*.{js,json}'"
   },
   "husky": {
     "hooks": {
@@ -68,6 +69,9 @@
     ],
     "*.md": [
       "npm run lint-markdown"
+    ],
+    "*.{js,jsx,css,scss,md,mdx,json}": [
+      "prettier --write"
     ]
   },
   "devDependencies": {
@@ -92,6 +96,7 @@
     "directory-tree-webpack-plugin": "^1.0.2",
     "duplexer": "^0.1.1",
     "eslint": "^7.19.0",
+    "eslint-config-prettier": "^7.2.0",
     "eslint-plugin-cypress": "^2.11.2",
     "eslint-plugin-markdown": "^2.0.0-rc.2",
     "eslint-plugin-react": "^7.22.0",
@@ -106,14 +111,14 @@
     "lodash": "^4.17.19",
     "markdownlint": "^0.22.0",
     "markdownlint-cli": "^0.26.0",
-    "markdownlint-rule-emphasis-style": "^1.0.0",
     "mini-css-extract-plugin": "^1.3.5",
     "mkdirp": "^1.0.4",
     "modularscale-sass": "^3.0.3",
     "node-fetch": "^2.6.1",
     "npm-run-all": "^4.1.1",
     "postcss": "^8.2.4",
     "postcss-loader": "^5.0.0",
+    "prettier": "^2.2.1",
     "react-refresh": "^0.9.0",
     "redirect-webpack-plugin": "^1.0.0",
     "remark": "^13.0.0",

package.json

@@ -0,0 +1,5 @@
+module.exports = {
+  singleQuote: true,
+  semi: true,
+  trailingComma: 'es5',
+};

prettier.config.js

@@ -1,5 +1,5 @@
 [
-	"app-shell/index.html",
+  "app-shell/index.html",
   "appcache/manifest.html",
   "printable/index.html",
   "api/printable/index.html",

sitemap-ignore.json

@@ -1,23 +1,79 @@
 import { Children, isValidElement } from 'react';
 import { Details } from './components';
 
-const detailComponentsList = ['link', 'mode', 'entry', 'path', 'filename', 'publicPath', 'library', 'libraryType', 'libraryName', 'advancedLibrary', 'advancedOutput', 'expertOutput', 'expertOutputB', 'expert', 'advancedConditions', 'moduleType', 'advancedActions', 'advancedModule', 'modules', 'alias', 'advancedResolve', 'expertResolve', 'hints', 'devtool', 'target', 'externals', 'externalsType', 'externalsPresets', 'ignoreWarnings', 'stats', 'preset', 'advancedGlobal', 'advancedAssets', 'advancedChunkGroups', 'advancedChunks', 'advancedModules', 'expertModules', 'advancedStatsOptimization', 'advancedOptimization', 'cacheGroupAdvancedSelectors', 'cacheGroupAdvancedEffects', 'advancedSelectors', 'advancedEffects', 'fallbackCacheGroup', 'advanced', 'advancedCaching', 'advancedBuild'];
-export const Pre = props => {
+const detailComponentsList = [
+  'link',
+  'mode',
+  'entry',
+  'path',
+  'filename',
+  'publicPath',
+  'library',
+  'libraryType',
+  'libraryName',
+  'advancedLibrary',
+  'advancedOutput',
+  'expertOutput',
+  'expertOutputB',
+  'expert',
+  'advancedConditions',
+  'moduleType',
+  'advancedActions',
+  'advancedModule',
+  'modules',
+  'alias',
+  'advancedResolve',
+  'expertResolve',
+  'hints',
+  'devtool',
+  'target',
+  'externals',
+  'externalsType',
+  'externalsPresets',
+  'ignoreWarnings',
+  'stats',
+  'preset',
+  'advancedGlobal',
+  'advancedAssets',
+  'advancedChunkGroups',
+  'advancedChunks',
+  'advancedModules',
+  'expertModules',
+  'advancedStatsOptimization',
+  'advancedOptimization',
+  'cacheGroupAdvancedSelectors',
+  'cacheGroupAdvancedEffects',
+  'advancedSelectors',
+  'advancedEffects',
+  'fallbackCacheGroup',
+  'advanced',
+  'advancedCaching',
+  'advancedBuild',
+];
+export const Pre = (props) => {
   // eslint-disable-next-line
-  const newChildren = Children.map(props.children.props.children, child => {
+  const newChildren = Children.map(props.children.props.children, (child) => {
     if (isValidElement(child)) {
       if (child.props.className.includes('keyword')) {
-        if (!detailComponentsList.includes(child.props.componentname)) return child;
-        // eslint-disable-next-line
-        return <Details children={child.props.children.slice(4, Children.count(child.props.children) - 4)} url={child.props.url} />;
+        if (!detailComponentsList.includes(child.props.componentname))
+          return child;
+        return (
+          <Details
+            myChilds={child.props.children.slice(
+              4,
+              Children.count(child.props.children) - 4
+            )}
+            url={child.props.url}
+          />
+        );
       }
     }
 
     return child;
   });
 
   const newProps = {
-    children: newChildren
+    children: newChildren,
   };
 
   return (
@@ -26,6 +82,4 @@ export const Pre = props => {
     </pre>
   );
 };
-Pre.propTypes = {
-
-};
+Pre.propTypes = {};

src/components/Configuration/Configuration.jsx

@@ -5,9 +5,9 @@ import PropTypes from 'prop-types';
 
 const DEFAULT_CHILDREN_SIZE = 4;
 
-const isFirstChild = child => typeof child === 'string' && child !== ' ';
+const isFirstChild = (child) => typeof child === 'string' && child !== ' ';
 
-const removeSpaces = child => (isFirstChild(child) ? child.trim() : child);
+const removeSpaces = (child) => (isFirstChild(child) ? child.trim() : child);
 
 const addLink = (child, i, url) => {
   return isFirstChild(child) ? (
@@ -28,17 +28,17 @@ const Card = ({ body }) => {
   );
 };
 Card.propTypes = {
-  body: PropTypes.node
+  body: PropTypes.node,
 };
 export class Details extends Component {
   static propTypes = {
     url: PropTypes.string,
-    children: PropTypes.arrayOf(PropTypes.node)
-  }
+    myChilds: PropTypes.arrayOf(PropTypes.node),
+  };
   constructor(props) {
     super(props);
     this.state = {
-      open: false
+      open: false,
     };
   }
 
@@ -51,10 +51,10 @@ export class Details extends Component {
   };
 
   render() {
-    const { children, url } = this.props;
+    const { myChilds, url } = this.props;
 
     // Find the index of </default>
-    const closeDefaultTagIndex = children.findIndex(child => {
+    const closeDefaultTagIndex = myChilds.findIndex((child) => {
       if (isValidElement(child)) {
         return (
           child.props.className.includes('tag') &&
@@ -63,7 +63,7 @@ export class Details extends Component {
       }
     });
 
-    const content = children.slice();
+    const content = myChilds.slice();
 
     // Summary is the part of the snippet that would be shown in the code snippet,
     // to get it we need to cut the <default></default> enclosing tags
@@ -85,7 +85,7 @@ export class Details extends Component {
         content={<Card body={content} />}
       >
         <span
-          className='code-details-summary-span'
+          className="code-details-summary-span"
           onClick={this.toggleVisibility}
         >
           {summary}

src/components/Configuration/components.js

@@ -2,14 +2,10 @@ import './Container.scss';
 import PropTypes from 'prop-types';
 Container.propTypes = {
   className: PropTypes.string,
-  children: PropTypes.node
+  children: PropTypes.node,
 };
-export default function Container (props = {}) {
+export default function Container(props = {}) {
   let { className = '' } = props;
 
-  return (
-    <div className={ `container ${className}` }>
-      { props.children }
-    </div>
-  );
+  return <div className={`container ${className}`}>{props.children}</div>;
 }

src/components/Container/Container.jsx

@@ -6,18 +6,18 @@ import PropTypes from 'prop-types';
 
 export default class Contributors extends Component {
   static propTypes = {
-    contributors: PropTypes.array
-  }
+    contributors: PropTypes.array,
+  };
   state = {
-    inView: false
-  }
+    inView: false,
+  };
 
   handleInView = (inView) => {
     if (!inView) {
       return;
     }
     this.setState({ inView });
-  }
+  };
 
   render() {
     const { inView } = this.state;
@@ -28,23 +28,31 @@ export default class Contributors extends Component {
     }
 
     return (
-      <VisibilitySensor delayedCall
+      <VisibilitySensor
+        delayedCall
         partialVisibility
-        intervalDelay={ 300 }
-        onChange={ this.handleInView }>
+        intervalDelay={300}
+        onChange={this.handleInView}
+      >
         <div className="contributors">
           <div className="contributors__list">
-            {
-              contributors.map(contributor => (
-                <a key={ contributor }
-                  className="contributor"
-                  href={ `https://github.com/${contributor}` }>
-                  <img alt={ contributor }
-                    src={ inView ? `https://github.com/${contributor}.png?size=90` : SmallIcon } />
-                  <span className="contributor__name"> {contributor}</span>
-                </a>
-              ))
-            }
+            {contributors.map((contributor) => (
+              <a
+                key={contributor}
+                className="contributor"
+                href={`https://github.com/${contributor}`}
+              >
+                <img
+                  alt={contributor}
+                  src={
+                    inView
+                      ? `https://github.com/${contributor}.png?size=90`
+                      : SmallIcon
+                  }
+                />
+                <span className="contributor__name"> {contributor}</span>
+              </a>
+            ))}
           </div>
         </div>
       </VisibilitySensor>