Add eslint & prettier

.eslintrc.json

@@ -0,0 +1,15 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "parser": "babel-eslint",
+  "extends": [
+    "plugin:prettier/recommended"
+  ],
+  "rules": {
+    "prettier/prettier": [2, {
+      "singleQuote": true
+    }]
+  }
+}

package.json

@@ -18,11 +18,15 @@
   "devDependencies": {
     "autoprefixer": "^8.4.1",
     "babel-core": "^6.26.3",
+    "babel-eslint": "^8.2.3",
     "babel-plugin-external-helpers": "^6.22.0",
     "babel-plugin-transform-object-assign": "^6.22.0",
     "babel-preset-env": "^1.7.0",
     "cssnano": "^3.10.0",
     "cypress": "^2.1.0",
+    "eslint": "^4.19.1",
+    "eslint-config-prettier": "^2.9.0",
+    "eslint-plugin-prettier": "^2.6.0",
     "live-server": "tapio/live-server#master",
     "node-sass": "^4.9.0",
     "npm-run-all": "^4.1.3",
@@ -45,6 +49,7 @@
     "dev": "npm-run-all --parallel serve watch",
     "test": "NODE_ENV=test node ./scripts/run-cypress-tests.js",
     "test:dev": "cypress open",
+    "lint": "eslint src",
     "prepare": "npm run build"
   },
   "files": [

src/js/aos.js

@@ -41,7 +41,7 @@ let options = {
   startEvent: 'DOMContentLoaded',
   animatedClassName: 'aos-animate',
   initClassName: 'aos-init',
-  useClassNames: false,
+  useClassNames: false
 };
 
 /**
@@ -91,16 +91,17 @@ const disable = function() {
   });
 };
 
-
 /**
  * Check if AOS should be disabled based on provided setting
  */
 const isDisabled = function(optionDisable) {
-  return optionDisable === true ||
-  (optionDisable === 'mobile' && detect.mobile()) ||
-  (optionDisable === 'phone' && detect.phone()) ||
-  (optionDisable === 'tablet' && detect.tablet()) ||
-  (typeof optionDisable === 'function' && optionDisable() === true);
+  return (
+    optionDisable === true ||
+    (optionDisable === 'mobile' && detect.mobile()) ||
+    (optionDisable === 'phone' && detect.phone()) ||
+    (optionDisable === 'tablet' && detect.tablet()) ||
+    (typeof optionDisable === 'function' && optionDisable() === true)
+  );
 };
 
 /**
@@ -130,15 +131,23 @@ const init = function init(settings) {
    * Set global settings on body, based on options
    * so CSS can use it
    */
-  document.querySelector('body').setAttribute('data-aos-easing', options.easing);
-  document.querySelector('body').setAttribute('data-aos-duration', options.duration);
+  document
+    .querySelector('body')
+    .setAttribute('data-aos-easing', options.easing);
+
+  document
+    .querySelector('body')
+    .setAttribute('data-aos-duration', options.duration);
+
   document.querySelector('body').setAttribute('data-aos-delay', options.delay);
 
   /**
    * Handle initializing
    */
-  if (options.startEvent === 'DOMContentLoaded' &&
-    ['complete', 'interactive'].indexOf(document.readyState) > -1) {
+  if (
+    options.startEvent === 'DOMContentLoaded' &&
+    ['complete', 'interactive'].indexOf(document.readyState) > -1
+  ) {
     // Initialize AOS if default startEvent was already fired
     refresh(true);
   } else if (options.startEvent === 'load') {
@@ -162,9 +171,12 @@ const init = function init(settings) {
   /**
    * Handle scroll event to animate elements on scroll
    */
-  window.addEventListener('scroll', throttle(() => {
-    handleScroll($aosElements, options.once)
-  }, 99));
+  window.addEventListener(
+    'scroll',
+    throttle(() => {
+      handleScroll($aosElements, options.once);
+    }, 99)
+  );
 
   /**
    * Observe [aos] elements

src/js/helpers/getInlineOption.js

@@ -19,4 +19,4 @@ export default (el, key, fallback) => {
   }
 
   return attr || fallback;
-}
+};

src/js/helpers/handleScroll.js

@@ -16,10 +16,10 @@ const removeClasses = (node, classes) =>
 
 const fireEvent = (eventName, data) => {
   const customEvent = new CustomEvent(eventName, {
-    detail: data,
+    detail: data
   });
   return document.dispatchEvent(customEvent);
-}
+};
 
 /**
  * Set or remove aos-animate class
@@ -70,9 +70,7 @@ const applyClasses = (el, top) => {
  * @param  {array} $elements         array of elements nodes
  * @return {void}
  */
-const handleScroll = ($elements) =>
-  $elements.forEach((el, i) =>
-    applyClasses(el, window.pageYOffset)
-  );
+const handleScroll = $elements =>
+  $elements.forEach((el, i) => applyClasses(el, window.pageYOffset));
 
 export default handleScroll;

src/js/helpers/offsetCalculator.js

@@ -15,7 +15,9 @@ export const getPositionIn = (el, defaultOffset) => {
   const windowHeight = window.innerHeight;
   const anchor = getInlineOption(el, 'anchor');
   const anchorPlacement = getInlineOption(el, 'anchor-placement');
-  const additionalOffset = Number(getInlineOption(el, 'offset', anchorPlacement ? 0 : defaultOffset));
+  const additionalOffset = Number(
+    getInlineOption(el, 'offset', anchorPlacement ? 0 : defaultOffset)
+  );
   let finalEl = el;
 
   if (anchor && document.querySelectorAll(anchor)) {

src/js/helpers/prepare.js

@@ -3,12 +3,13 @@
 import { getPositionIn, getPositionOut } from './offsetCalculator';
 import getInlineOption from './getInlineOption';
 
-const prepare = function ($elements, options) {
+const prepare = function($elements, options) {
   $elements.forEach((el, i) => {
     const mirror = getInlineOption(el.node, 'mirror', options.mirror);
     const once = getInlineOption(el.node, 'once', options.once);
     const id = getInlineOption(el.node, 'id');
-    const customClassNames = options.useClassNames && el.node.getAttribute('data-aos');
+    const customClassNames =
+      options.useClassNames && el.node.getAttribute('data-aos');
 
     const animatedClassNames = [
       options.animatedClassName,
@@ -21,21 +22,20 @@ const prepare = function ($elements, options) {
 
     el.position = {
       in: getPositionIn(el.node, options.offset),
-      out: mirror && getPositionOut(el.node, options.offset),
+      out: mirror && getPositionOut(el.node, options.offset)
     };
 
-    el.data = el.node.getAttributeNames()
-      .reduce((acc, attr) => {
-        return Object.assign({}, acc, {
-          [attr]: el.node.getAttribute(attr),
-        });
-      }, {});
+    el.data = el.node.getAttributeNames().reduce((acc, attr) => {
+      return Object.assign({}, acc, {
+        [attr]: el.node.getAttribute(attr)
+      });
+    }, {});
 
     el.options = {
       once,
       mirror,
       animatedClassNames,
-      id,
+      id
     };
   });
 

src/js/libs/observer.js

@@ -26,8 +26,7 @@ function check(mutations) {
 
     const anyAOSElementAdded = addedNodes
       .concat(removedNodes)
-      .filter(el => el.hasAttribute && el.hasAttribute('data-aos'))
-      .length;
+      .filter(el => el.hasAttribute && el.hasAttribute('data-aos')).length;
 
     if (anyAOSElementAdded) {
       callback();

src/js/libs/offset.js

@@ -5,7 +5,7 @@
  * @param  {Node} el [DOM element]
  * @return {Object} [top and left offset]
  */
-const offset = function (el) {
+const offset = function(el) {
   let _x = 0;
   let _y = 0;