Add prettier formatter with basic configuration options

.prettierrc.json

@@ -0,0 +1,7 @@
+{
+    "semi": false,
+    "singleQuote": true,
+    "tabWidth": 4,
+    "trailingComma": "es5",
+    "useTabs": false
+}

assets/scripts/app.js

@@ -1,60 +1,79 @@
-import modular from 'modujs';
-import * as modules from './modules';
-import globals from './globals';
-import { html } from './utils/environment';
+import modular from 'modujs'
+import * as modules from './modules'
+import globals from './globals'
+import { html } from './utils/environment'
 import config from './config'
-import { isFontLoadingAPIAvailable, loadFonts } from './utils/fonts';
+import { isFontLoadingAPIAvailable, loadFonts } from './utils/fonts'
 
 const app = new modular({
     modules: modules,
-});
+})
 
 window.onload = (event) => {
-    const $style = document.getElementById('main-css');
+    const $style = document.getElementById('main-css')
 
     if ($style) {
         if ($style.isLoaded) {
-            init();
+            init()
         } else {
             $style.addEventListener('load', (event) => {
-                init();
-            });
+                init()
+            })
         }
     } else {
-        console.warn('The "main-css" stylesheet not found');
+        console.warn('The "main-css" stylesheet not found')
     }
-};
+}
 
 export const EAGER_FONTS = [
     { family: 'Source Sans', style: 'normal', weight: 400 },
     { family: 'Source Sans', style: 'normal', weight: 700 },
-];
+]
 
 function init() {
-    globals();
+    globals()
 
-    app.init(app);
+    app.init(app)
 
-    html.classList.add('is-loaded');
-    html.classList.add('is-ready');
-    html.classList.remove('is-loading');
+    html.classList.add('is-loaded')
+    html.classList.add('is-ready')
+    html.classList.remove('is-loading')
 
     /**
      * Eagerly load the following fonts.
      */
     if (isFontLoadingAPIAvailable) {
         loadFonts(EAGER_FONTS, config.IS_DEV).then((eagerFonts) => {
-            html.classList.add('fonts-loaded');
+            html.classList.add('fonts-loaded')
 
             if (config.IS_DEV) {
-                console.group('Eager fonts loaded!', eagerFonts.length, '/', document.fonts.size);
+                console.group(
+                    'Eager fonts loaded!',
+                    eagerFonts.length,
+                    '/',
+                    document.fonts.size
+                )
                 console.group('State of eager fonts:')
-                eagerFonts.forEach((font) => console.log(font.family, font.style, font.weight, font.status/*, font*/))
+                eagerFonts.forEach((font) =>
+                    console.log(
+                        font.family,
+                        font.style,
+                        font.weight,
+                        font.status /*, font*/
+                    )
+                )
                 console.groupEnd()
                 console.group('State of all fonts:')
-                document.fonts.forEach((font) => console.log(font.family, font.style, font.weight, font.status/*, font*/))
+                document.fonts.forEach((font) =>
+                    console.log(
+                        font.family,
+                        font.style,
+                        font.weight,
+                        font.status /*, font*/
+                    )
+                )
                 console.groupEnd()
             }
-        });
+        })
     }
 }

assets/scripts/globals.js

@@ -1,23 +1,23 @@
-import svg4everybody from 'svg4everybody';
-import config from './config';
+import svg4everybody from 'svg4everybody'
+import config from './config'
 
 // Dynamic imports for development mode only
-let gridHelper;
-(async () => {
+let gridHelper
+;(async () => {
     if (config.IS_DEV) {
-        const gridHelperModule = await import('./utils/grid-helper');
-        gridHelper = gridHelperModule?.gridHelper;
+        const gridHelperModule = await import('./utils/grid-helper')
+        gridHelper = gridHelperModule?.gridHelper
     }
-})();
+})()
 
 export default function () {
     /**
      * Use external SVG spritemaps
      */
-    svg4everybody();
+    svg4everybody()
 
     /**
      * Add grid helper
      */
-    gridHelper?.();
+    gridHelper?.()
 }

assets/scripts/modules.js

@@ -1,3 +1,3 @@
-export {default as Example} from './modules/Example';
-export {default as Load} from './modules/Load';
-export {default as Scroll} from './modules/Scroll';
+export { default as Example } from './modules/Example'
+export { default as Load } from './modules/Load'
+export { default as Scroll } from './modules/Scroll'

assets/scripts/modules/Example.js

@@ -1,14 +1,14 @@
-import { module } from 'modujs';
-import { EAGER_FONTS } from '../app';
-import { whenReady } from '../utils/fonts';
+import { module as Module } from 'modujs'
+import { EAGER_FONTS } from '../app'
+import { whenReady } from '../utils/fonts'
 
-export default class extends module {
+export default class extends Module {
     constructor(m) {
-        super(m);
+        super(m)
     }
 
     init() {
-        whenReady(EAGER_FONTS).then((fonts) => this.onFontsLoaded(fonts));
+        whenReady(EAGER_FONTS).then((fonts) => this.onFontsLoaded(fonts))
     }
 
     onFontsLoaded(fonts) {

assets/scripts/modules/Load.js

@@ -1,22 +1,22 @@
-import { module } from 'modujs';
-import modularLoad from 'modularload';
+import { module as Module } from 'modujs'
+import modularLoad from 'modularload'
 
-export default class extends module {
+export default class extends Module {
     constructor(m) {
-        super(m);
+        super(m)
     }
 
     init() {
         const load = new modularLoad({
             enterDelay: 0,
             transitions: {
-                customTransition: {}
-            }
-        });
+                customTransition: {},
+            },
+        })
 
         load.on('loaded', (transition, oldContainer, newContainer) => {
-            this.call('destroy', oldContainer, 'app');
-            this.call('update', newContainer, 'app');
-        });
+            this.call('destroy', oldContainer, 'app')
+            this.call('update', newContainer, 'app')
+        })
     }
 }

assets/scripts/modules/Scroll.js

@@ -1,22 +1,22 @@
-import { module } from 'modujs';
-import { lazyLoadImage } from '../utils/image';
-import LocomotiveScroll from 'locomotive-scroll';
+import { module as Module } from 'modujs'
+import { lazyLoadImage } from '../utils/image'
+import LocomotiveScroll from 'locomotive-scroll'
 
-export default class extends module {
+export default class extends Module {
     constructor(m) {
-        super(m);
+        super(m)
     }
 
     init() {
         this.scroll = new LocomotiveScroll({
             el: this.el,
-            smooth: true
-        });
+            smooth: true,
+        })
 
         this.scroll.on('call', (func, way, obj, id) => {
             // Using modularJS
-            this.call(func[0], { way, obj }, func[1], func[2]);
-        });
+            this.call(func[0], { way, obj }, func[1], func[2])
+        })
 
         this.scroll.on('scroll', (args) => {
             // console.log(args.scroll);
@@ -47,6 +47,6 @@ export default class extends module {
     }
 
     destroy() {
-        this.scroll.destroy();
+        this.scroll.destroy()
     }
 }

assets/scripts/utils/environment.js

@@ -1,9 +1,8 @@
-const APP_NAME     = 'Boilerplate';
-const DATA_API_KEY = '.data-api';
+const APP_NAME = 'Boilerplate'
+const DATA_API_KEY = '.data-api'
 
-const html         = document.documentElement;
-const body         = document.body;
-const isDebug      = html.hasAttribute('data-debug');
+const html = document.documentElement
+const body = document.body
+const isDebug = html.hasAttribute('data-debug')
 
-
-export { APP_NAME, DATA_API_KEY, html, body, isDebug };
+export { APP_NAME, DATA_API_KEY, html, body, isDebug }