Fixing an issue with prettier and eslint (#324)

* Fixing an issue with prettier and eslint

There is a conflict between arrow syntax rules in airbnb eslint
configuration and the way default prettier works in VSCode. These
additional setting should help anyone using VSCode with autoformat +
prettier to not run into problems building the library.

I am open to better ways of handling this of course!

(Note the changes in ImageClassifier are trivial and just testing).

* adding eslint-config-prettier as dev dependency

* trivial change to run tests again

Author: shiffman

.eslintrc.json

@@ -1,5 +1,5 @@
 {
-    "extends": "airbnb-base",
+    "extends": ["airbnb-base", "prettier"],
     "globals": {
         "fetch": false,
         "document": true

.gitignore

@@ -3,7 +3,6 @@ examples/es6/node_modules
 experiments/node_modules
 node_modules
 **/npm-debug.log
-.vscode
 *.DS_STORE
 experiments
 manual-test

.vscode/settings.json

@@ -0,0 +1,5 @@
+{
+  "prettier.trailingComma": "all",
+  "prettier.printWidth": 100,
+  "prettier.arrowParens": "avoid"
+}

package-lock.json

@@ -43,6 +43,7 @@
     "cz-conventional-changelog": "2.1.0",
     "eslint": "4.18.2",
     "eslint-config-airbnb-base": "12.1.0",
+    "eslint-config-prettier": "^4.1.0",
     "eslint-loader": "2.0.0",
     "eslint-plugin-import": "2.9.0",
     "extract-text-webpack-plugin": "4.0.0-beta.0",

package.json

@@ -1,4 +1,4 @@
-// Copyright (c) 2018 ml5
+// Copyright (c) 2019 ml5
 //
 // This software is released under the MIT License.
 // https://opensource.org/licenses/MIT
@@ -58,7 +58,7 @@ class ImageClassifier {
     await tf.nextFrame();
 
     if (this.video && this.video.readyState === 0) {
-      await new Promise((resolve) => {
+      await new Promise(resolve => {
         this.video.onloadeddata = () => resolve();
       });
     }
@@ -81,17 +81,28 @@ class ImageClassifier {
       numberOfClasses = inputNumOrCallback;
     } else if (inputNumOrCallback instanceof HTMLImageElement) {
       imgToPredict = inputNumOrCallback;
-    } else if (typeof inputNumOrCallback === 'object' && inputNumOrCallback.elt instanceof HTMLImageElement) {
+    } else if (
+      typeof inputNumOrCallback === 'object' &&
+      inputNumOrCallback.elt instanceof HTMLImageElement
+    ) {
       imgToPredict = inputNumOrCallback.elt; // Handle p5.js image
     } else if (inputNumOrCallback instanceof HTMLCanvasElement) {
       imgToPredict = inputNumOrCallback;
-    } else if (typeof inputNumOrCallback === 'object' && inputNumOrCallback.elt instanceof HTMLCanvasElement) {
+    } else if (
+      typeof inputNumOrCallback === 'object' &&
+      inputNumOrCallback.elt instanceof HTMLCanvasElement
+    ) {
       imgToPredict = inputNumOrCallback.elt; // Handle p5.js image
-    } else if (typeof inputNumOrCallback === 'object' && inputNumOrCallback.canvas instanceof HTMLCanvasElement) {
+    } else if (
+      typeof inputNumOrCallback === 'object' &&
+      inputNumOrCallback.canvas instanceof HTMLCanvasElement
+    ) {
       imgToPredict = inputNumOrCallback.canvas; // Handle p5.js image
     } else if (!(this.video instanceof HTMLVideoElement)) {
       // Handle unsupported input
-      throw new Error('No input image provided. If you want to classify a video, pass the video element in the constructor. ');
+      throw new Error(
+        'No input image provided. If you want to classify a video, pass the video element in the constructor. ',
+      );
     }
 
     if (typeof numOrCallback === 'number') {
@@ -126,7 +137,10 @@ const imageClassifier = (modelName, videoOrOptionsOrCallback, optionsOrCallback,
 
   if (videoOrOptionsOrCallback instanceof HTMLVideoElement) {
     video = videoOrOptionsOrCallback;
-  } else if (typeof videoOrOptionsOrCallback === 'object' && videoOrOptionsOrCallback.elt instanceof HTMLVideoElement) {
+  } else if (
+    typeof videoOrOptionsOrCallback === 'object' &&
+    videoOrOptionsOrCallback.elt instanceof HTMLVideoElement
+  ) {
     video = videoOrOptionsOrCallback.elt; // Handle a p5.js video element
   } else if (typeof videoOrOptionsOrCallback === 'object') {
     options = videoOrOptionsOrCallback;