Format JavaScript with Prettier through ESLint (#1906)

This is a stepping stone towards retiring TSLint and using ESLint for all source files.
elastic · May 13, 2019 · 75fee43 · 75fee43
1 parent eae5417
commit 75fee43
Show file tree

Hide file tree

Showing 1,172 changed files with 26,742 additions and 22,309 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+es
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,31 @@
+module.exports = {
+  settings: {
+    "import/resolver": {
+       node: {
+        extensions: [".js"]
+      },
+      webpack: {
+        config: "./src-docs/webpack.config.js"
+      }
+    }
+  },
+  extends: [
+    "@elastic/eslint-config-kibana",
+    // Prettier options need to come last, in order to override other style
+    // rules.
+    "prettier/react",
+    "prettier/standard",
+    "plugin:prettier/recommended"
+  ],
+  plugins: [
+    "prettier",
+    "local"
+  ],
+  rules: {
+    "prefer-template": "error",
+    "local/i18n": "error"
+  },
+  env: {
+    jest: true
+  }
+};
diff --git a/.eslintrc.json b/.eslintrc.json
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 - Converted `pretty_interval` to TS ([#1920](https://github.com/elastic/eui/pull/1920))
 - Converted `relative_options` to TS ([#1921](https://github.com/elastic/eui/pull/1921))
 - Added width to `EuiFlexItem` when gutter in `EuiFlexGrid` is set to none. ([#1941](https://github.com/elastic/eui/pull/1941))
+- Format all JavaScript files with Prettier through ESLint ([#1906](https://github.com/elastic/eui/pull/1906))
 
 **Bug fixes**
 

diff --git a/package.json b/package.json
@@ -115,7 +115,7 @@
     "enzyme-adapter-react-16": "^1.9.1",
     "enzyme-to-json": "^3.3.0",
     "eslint": "^4.9.0",
-    "eslint-config-prettier": "^2.9.0",
+    "eslint-config-prettier": "^4.2.0",
     "eslint-import-resolver-webpack": "^0.8.3",
     "eslint-plugin-babel": "^4.1.2",
     "eslint-plugin-import": "^2.8.0",
@@ -124,7 +124,7 @@
     "eslint-plugin-local": "^1.0.0",
     "eslint-plugin-mocha": "^4.11.0",
     "eslint-plugin-prefer-object-spread": "^1.2.1",
-    "eslint-plugin-prettier": "^2.6.0",
+    "eslint-plugin-prettier": "^3.0.1",
     "eslint-plugin-react": "^7.4.0",
     "file-loader": "^1.1.11",
     "findup": "^0.1.5",
@@ -146,7 +146,7 @@
     "postcss-inline-svg": "^3.0.0",
     "postcss-loader": "^2.0.8",
     "pre-commit": "^1.2.2",
-    "prettier": "^1.16.4",
+    "prettier": "^1.17.0",
     "prompt": "^1.0.0",
     "prop-types": "^15.6.0",
     "raw-loader": "^0.5.1",

diff --git a/src-docs/postcss.config.js b/src-docs/postcss.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   plugins: [
     require('autoprefixer')({ browsers: ['last 2 versions'] }),
-    require('postcss-inline-svg')({ relative: true, path: __dirname })
-  ]
+    require('postcss-inline-svg')({ relative: true, path: __dirname }),
+  ],
 };
diff --git a/src-docs/src/actions/index.js b/src-docs/src/actions/index.js
@@ -1,7 +1,3 @@
-export {
-  toggleTheme,
-} from './theme_actions';
+export { toggleTheme } from './theme_actions';
 
-export {
-  toggleLocale,
-} from './locale_actions';
+export { toggleLocale } from './locale_actions';
diff --git a/src-docs/src/components/guide_locale_selector/guide_locale_selector.js b/src-docs/src/components/guide_locale_selector/guide_locale_selector.js
@@ -1,21 +1,17 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import {
-  EuiSwitch,
-  EuiFormRow,
-} from '../../../../src/components';
+import { EuiSwitch, EuiFormRow } from '../../../../src/components';
 
 export const GuideLocaleSelector = ({ selectedLocale, onToggleLocale }) => {
-
   return (
-    <EuiFormRow
-      label="Translations for development"
-    >
+    <EuiFormRow label="Translations for development">
       <EuiSwitch
         label="Activate babelfish"
         checked={selectedLocale === 'en-xa'}
-        onChange={() => onToggleLocale(selectedLocale === 'en' ? 'en-xa' : 'en')}
+        onChange={() =>
+          onToggleLocale(selectedLocale === 'en' ? 'en-xa' : 'en')
+        }
         compressed={true}
       />
     </EuiFormRow>

diff --git a/src-docs/src/components/guide_page/guide_page.js b/src-docs/src/components/guide_page/guide_page.js
@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Fragment } from 'react';
 
-import {
-  Link,
-} from 'react-router';
+import { Link } from 'react-router';
 
 import {
   EuiTitle,
@@ -14,31 +12,40 @@ import {
   EuiBetaBadge,
 } from '../../../../src/components';
 
-export const GuidePage = ({ children, title, intro, componentLinkTo, isBeta }) => {
-  const betaBadge = isBeta ?
-    (<EuiBetaBadge
+export const GuidePage = ({
+  children,
+  title,
+  intro,
+  componentLinkTo,
+  isBeta,
+}) => {
+  const betaBadge = isBeta ? (
+    <EuiBetaBadge
       label="Beta"
       tooltipContent="This component is still under development and may contain breaking changes in the nearby future."
-    />) : undefined;
+    />
+  ) : (
+    undefined
+  );
 
   return (
     <Fragment>
       <div className="guideSection__text">
         <EuiFlexGroup>
           <EuiFlexItem>
             <EuiTitle size="l">
-              <h1>{title} {betaBadge}</h1>
+              <h1>
+                {title} {betaBadge}
+              </h1>
             </EuiTitle>
           </EuiFlexItem>
-          { componentLinkTo &&
+          {componentLinkTo && (
             <EuiFlexItem grow={false}>
               <Link to={componentLinkTo}>
-                <EuiButton>
-                  View component code
-                </EuiButton>
+                <EuiButton>View component code</EuiButton>
               </Link>
             </EuiFlexItem>
-          }
+          )}
         </EuiFlexGroup>
         <EuiSpacer />
         {intro}

diff --git a/src-docs/src/components/guide_page/guide_page_chrome.js b/src-docs/src/components/guide_page/guide_page_chrome.js
@@ -2,9 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import $ from 'jquery';
 
-import {
-  Link,
-} from 'react-router';
+import { Link } from 'react-router';
 
 import {
   EuiFieldSearch,
@@ -19,12 +17,8 @@ import {
   EuiPopoverTitle,
 } from '../../../../src/components';
 
-import {
-  GuideLocaleSelector,
-} from '../guide_locale_selector';
-import {
-  GuideThemeSelector,
-} from '../guide_theme_selector';
+import { GuideLocaleSelector } from '../guide_locale_selector';
+import { GuideThemeSelector } from '../guide_theme_selector';
 
 export class GuidePageChrome extends Component {
   constructor(props) {
@@ -51,9 +45,12 @@ export class GuidePageChrome extends Component {
   };
 
   scrollTo = position => {
-    $('html, body').animate({
-      scrollTop: position,
-    }, 250);
+    $('html, body').animate(
+      {
+        scrollTop: position,
+      },
+      250
+    );
   };
 
   onClickLink = id => {
@@ -86,7 +83,6 @@ export class GuidePageChrome extends Component {
   }
 
   renderIdentity() {
-
     const button = (
       <EuiButtonIcon
         iconType="gear"
@@ -96,59 +92,51 @@ export class GuidePageChrome extends Component {
       />
     );
     return (
-      <EuiFlexGroup alignItems="center" gutterSize="s" justifyContent="spaceBetween" responsive={false} wrap>
+      <EuiFlexGroup
+        alignItems="center"
+        gutterSize="s"
+        justifyContent="spaceBetween"
+        responsive={false}
+        wrap>
         <EuiFlexItem grow={false}>
-          <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false} wrap>
+          <EuiFlexGroup
+            alignItems="center"
+            gutterSize="s"
+            responsive={false}
+            wrap>
             <EuiFlexItem grow={false}>
-              <Link
-                to="/"
-                className="guideLogo"
-                aria-label="Go to home page"
-              >
+              <Link to="/" className="guideLogo" aria-label="Go to home page">
                 <EuiIcon type="logoElastic" size="l" />
               </Link>
             </EuiFlexItem>
             <EuiFlexItem grow={false}>
-              <Link
-                to="/"
-                aria-label="Go to home page"
-                className="euiLink"
-              >
-                <strong>
-                  Elastic UI
-                </strong>
+              <Link to="/" aria-label="Go to home page" className="euiLink">
+                <strong>Elastic UI</strong>
               </Link>
             </EuiFlexItem>
           </EuiFlexGroup>
         </EuiFlexItem>
 
         <EuiFlexItem grow={false}>
-
           <EuiPopover
             id="popover"
             button={button}
             isOpen={this.state.isPopoverOpen}
-            closePopover={this.closePopover.bind(this)}
-          >
-
+            closePopover={this.closePopover.bind(this)}>
             <EuiPopoverTitle>Docs options</EuiPopoverTitle>
             <div className="guideOptionsPopover">
               <GuideThemeSelector
                 onToggleTheme={this.props.onToggleTheme}
                 selectedTheme={this.props.selectedTheme}
               />
-              {
-                location.host === 'localhost:8030' // eslint-disable-line no-restricted-globals
-                  ? (
-                    <EuiFlexItem grow={false}>
-                      <GuideLocaleSelector
-                        onToggleLocale={this.props.onToggleLocale}
-                        selectedLocale={this.props.selectedLocale}
-                      />
-                    </EuiFlexItem>
-                  )
-                  : null
-              }
+              {location.host === 'localhost:8030' ? ( // eslint-disable-line no-restricted-globals
+                <EuiFlexItem grow={false}>
+                  <GuideLocaleSelector
+                    onToggleLocale={this.props.onToggleLocale}
+                    selectedLocale={this.props.selectedLocale}
+                  />
+                </EuiFlexItem>
+              ) : null}
             </div>
           </EuiPopover>
         </EuiFlexItem>
@@ -157,8 +145,7 @@ export class GuidePageChrome extends Component {
   }
 
   renderSubSections = (subSections = []) => {
-
-    const subSectionsWithTitles = subSections.filter(item => (item.title));
+    const subSectionsWithTitles = subSections.filter(item => item.title);
 
     if (subSectionsWithTitles.length <= 1) {
       return;
@@ -169,23 +156,21 @@ export class GuidePageChrome extends Component {
       name: title,
       onClick: this.onClickLink.bind(this, id),
     }));
-  }
+  };
 
   renderSideNav = sideNav => {
     // TODO: Add contents pages
     const sideNavSections = [];
 
     sideNav.forEach(section => {
-      const matchingItems = section.items.filter(item => (
-        item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !== -1 && item.hidden !== true
-      ));
+      const matchingItems = section.items.filter(
+        item =>
+          item.name.toLowerCase().indexOf(this.state.search.toLowerCase()) !==
+            -1 && item.hidden !== true
+      );
 
       const items = matchingItems.map(item => {
-        const {
-          name,
-          path,
-          sections,
-        } = item;
+        const { name, path, sections } = item;
 
         return {
           id: `${section.type}-${path}`,
@@ -249,9 +234,7 @@ export class GuidePageChrome extends Component {
           </div>
         </div>
 
-        <div className="guideSideNav__content">
-          {sideNavContent}
-        </div>
+        <div className="guideSideNav__content">{sideNavContent}</div>
       </div>
     );
   }

diff --git a/src-docs/src/components/guide_page/index.js b/src-docs/src/components/guide_page/index.js
@@ -1,7 +1,3 @@
-export {
-  GuidePage,
-} from './guide_page';
+export { GuidePage } from './guide_page';
 
-export {
-  GuidePageChrome,
-} from './guide_page_chrome';
+export { GuidePageChrome } from './guide_page_chrome';