Add prettier / Update eslint / Fix lint errors

Author: stephane-monnot

.editorconfig

@@ -1,21 +1,12 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
 root = true
 
-
 [*]
-
-# Change these settings to your own preference
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
 indent_style = space
 indent_size = 2
-
-# We recommend you to keep these unchanged
-end_of_line = lf
-charset = utf-8
 trim_trailing_whitespace = true
-insert_final_newline = true
 
 [*.md]
-trim_trailing_whitespace = false
+trim_trailing_whitespace = false

.eslintrc.js

@@ -0,0 +1,107 @@
+{
+  "parser": "babel-eslint",
+  "extends": [
+    "airbnb",
+    "prettier"
+  ],
+  "env": {
+    "browser": true,
+    "node": true,
+    "jest": true,
+    "es6": true
+  },
+  "plugins": [
+    "react",
+    "jsx-a11y",
+    "prettier"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 6,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "rules": {
+    "arrow-parens": [
+      "error",
+      "as-needed"
+    ],
+    "arrow-body-style": [
+      2,
+      "as-needed"
+    ],
+    "class-methods-use-this": 0,
+    "comma-dangle": [
+      2,
+      "always-multiline"
+    ],
+    "import/imports-first": 0,
+    "import/newline-after-import": 0,
+    "import/no-dynamic-require": 0,
+    "import/no-extraneous-dependencies": 0,
+    "import/no-named-as-default": 0,
+    "import/no-unresolved": 2,
+    "import/no-webpack-loader-syntax": 0,
+    "import/prefer-default-export": 0,
+    "indent": [
+      2,
+      2,
+      {
+        "SwitchCase": 1
+      }
+    ],
+    "jsx-a11y/anchor-is-valid": [
+      "error",
+      {
+        "components": [
+          "Link"
+        ],
+        "specialLink": [
+          "to",
+          "hrefLeft",
+          "hrefRight"
+        ],
+        "aspects": [
+          "noHref",
+          "invalidHref",
+          "preferButton"
+        ]
+      }
+    ],
+    "jsx-a11y/aria-props": 2,
+    "jsx-a11y/heading-has-content": 0,
+    "jsx-a11y/click-events-have-key-events": 0,
+    "jsx-a11y/no-static-element-interactions": 0,
+    "jsx-a11y/label-has-for": 2,
+    "jsx-a11y/mouse-events-have-key-events": 2,
+    "jsx-a11y/role-has-required-aria-props": 2,
+    "jsx-a11y/role-supports-aria-props": 2,
+    "max-len": 0,
+    "newline-per-chained-call": 0,
+    "no-confusing-arrow": 0,
+    "no-console": 1,
+    "no-use-before-define": 0,
+    "prefer-template": 2,
+    "prettier/prettier": "error",
+    "react/forbid-prop-types": 0,
+    "react/jsx-first-prop-new-line": [
+      2,
+      "multiline"
+    ],
+    "react/jsx-filename-extension": 0,
+    "react/jsx-no-target-blank": 0,
+    "react/require-default-props": 0,
+    "react/require-extension": 0,
+    "react/self-closing-comp": 0,
+    "require-yield": 0,
+    "linebreak-style": 0
+  },
+  "settings": {
+    "import/resolver": {
+      "webpack": {
+        "config": "./internals/webpack/webpack.prod.babel.js"
+      }
+    }
+  }
+}

.eslintrc.json

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "trailingComma": "all"
+}

.prettierrc

@@ -2,39 +2,57 @@ import React from 'react';
 import {
   renderIntoDocument,
   findRenderedDOMComponentWithClass,
-  scryRenderedDOMComponentsWithClass
+  scryRenderedDOMComponentsWithClass,
 } from 'react-dom/test-utils';
 import VerticalTimelineElement from '../src/VerticalTimelineElement';
 
-describe('VerticalTimeline', function () {
-  it('should have the vertical-timeline-element classname', function () {
+describe('VerticalTimeline', () => {
+  it('should have the vertical-timeline-element classname', () => {
     const component = renderIntoDocument(<VerticalTimelineElement />);
     findRenderedDOMComponentWithClass(component, 'vertical-timeline-element');
   });
 
-  it('should have the vertical-timeline-element--right classname', function () {
-    const component = renderIntoDocument(<VerticalTimelineElement position="right" />);
-    findRenderedDOMComponentWithClass(component, 'vertical-timeline-element--right');
+  it('should have the vertical-timeline-element--right classname', () => {
+    const component = renderIntoDocument(
+      <VerticalTimelineElement position="right" />,
+    );
+    findRenderedDOMComponentWithClass(
+      component,
+      'vertical-timeline-element--right',
+    );
   });
 
-  describe('when children is empty', function () {
-    it('should have the vertical-timeline-element--no-children classname', function () {
+  describe('when children is empty', () => {
+    it('should have the vertical-timeline-element--no-children classname', () => {
       const component = renderIntoDocument(<VerticalTimelineElement />);
-      findRenderedDOMComponentWithClass(component, 'vertical-timeline-element--no-children');
+      findRenderedDOMComponentWithClass(
+        component,
+        'vertical-timeline-element--no-children',
+      );
     });
 
-    it('should have the vertical-timeline-element--no-children classname', function () {
-      const componentWithDate = renderIntoDocument(<VerticalTimelineElement date="2018" />);
-      findRenderedDOMComponentWithClass(componentWithDate, 'vertical-timeline-element--no-children');
+    it('should have the vertical-timeline-element--no-children classname', () => {
+      const componentWithDate = renderIntoDocument(
+        <VerticalTimelineElement date="2018" />,
+      );
+      findRenderedDOMComponentWithClass(
+        componentWithDate,
+        'vertical-timeline-element--no-children',
+      );
     });
 
-    it('should not have the vertical-timeline-element--no-children classname', function () {
+    it('should not have the vertical-timeline-element--no-children classname', () => {
       const component = renderIntoDocument(
         <VerticalTimelineElement>
           <div>My Child</div>
-        </VerticalTimelineElement>
+        </VerticalTimelineElement>,
       );
-      expect(scryRenderedDOMComponentsWithClass(component, 'vertical-timeline-element--no-children').length).toBe(0);
+      expect(
+        scryRenderedDOMComponentsWithClass(
+          component,
+          'vertical-timeline-element--no-children',
+        ).length,
+      ).toBe(0);
     });
   });
 });

__tests__/VerticalTimelineElement_test.js

@@ -4,25 +4,34 @@ import { expect } from 'chai';
 
 import VerticalTimeline from '../src/VerticalTimeline';
 
-describe('VerticalTimeline', function () {
-  it('should have the vertical-timeline classname', function () {
+describe('VerticalTimeline', () => {
+  it('should have the vertical-timeline classname', () => {
     const component = shallow(
-      <VerticalTimeline><div>test1</div><div>test2</div></VerticalTimeline>
+      <VerticalTimeline>
+        <div>test1</div>
+        <div>test2</div>
+      </VerticalTimeline>,
     );
-    expect(component.hasClass('vertical-timeline')).to.be.true;
+    expect(component.hasClass('vertical-timeline')).to.equal(true);
   });
 
-  it('should have the vertical-timeline--animate classname', function () {
+  it('should have the vertical-timeline--animate classname', () => {
     const component = shallow(
-      <VerticalTimeline><div>test1</div><div>test2</div></VerticalTimeline>
+      <VerticalTimeline>
+        <div>test1</div>
+        <div>test2</div>
+      </VerticalTimeline>,
     );
-    expect(component.hasClass('vertical-timeline--animate')).to.be.true;
+    expect(component.hasClass('vertical-timeline--animate')).to.equal(true);
   });
 
-  it('should not have the vertical-timeline--animate classname', function () {
+  it('should not have the vertical-timeline--animate classname', () => {
     const component = shallow(
-      <VerticalTimeline animate={false}><div>test1</div><div>test2</div></VerticalTimeline>
+      <VerticalTimeline animate={false}>
+        <div>test1</div>
+        <div>test2</div>
+      </VerticalTimeline>,
     );
-    expect(component.hasClass('vertical-timeline--animate')).to.be.false;
+    expect(component.hasClass('vertical-timeline--animate')).to.equal(false);
   });
 });

__tests__/VerticalTimeline_test.js

@@ -1,7 +1,7 @@
 /* eslint no-param-reassign: 0 */
 module.exports = {
-  webpack: (catalogWebpackConfig) => {
+  webpack: catalogWebpackConfig => {
     catalogWebpackConfig.output.publicPath = '';
     return catalogWebpackConfig;
-  }
+  },
 };