trailingComma

Author: David-Desmaisons

.eslintrc.js

@@ -1,14 +1,14 @@
 module.exports = {
   root: true,
   env: {
-    node: true,
+    node: true
   },
   extends: ["plugin:vue/essential", "@vue/prettier"],
   rules: {
     "no-console": process.env.NODE_ENV === "production" ? "error" : "off",
-    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
   },
   parserOptions: {
-    parser: "babel-eslint",
-  },
+    parser: "babel-eslint"
+  }
 };

.prettierrc

@@ -1,7 +1,7 @@
 {
   "semi": true,
   "singleQuote": false,
-  "trailingComma":"all",
+  "trailingComma":"none",
   "printWidth": 150,
   "bracketSpacing": true,
   "jsxBracketSameLine": true,

babel.config.js

@@ -1,3 +1,3 @@
 module.exports = {
-  presets: ["@vue/cli-plugin-babel/preset"],
+  presets: ["@vue/cli-plugin-babel/preset"]
 };

jest.config.js

@@ -3,16 +3,16 @@ module.exports = {
   transform: {
     "^.+\\.vue$": "vue-jest",
     ".+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$": "jest-transform-stub",
-    "^.+\\.jsx?$": "babel-jest",
+    "^.+\\.jsx?$": "babel-jest"
   },
   transformIgnorePatterns: ["/node_modules/"],
   moduleNameMapper: {
     "^@/(.*)$": "<rootDir>/src/$1",
-    "^plotly.js$": "<rootDir>/tests/mocks/plotly.js",
+    "^plotly.js$": "<rootDir>/tests/mocks/plotly.js"
   },
   snapshotSerializers: ["jest-serializer-vue"],
   testMatch: ["**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
   collectCoverageFrom: ["<rootDir>/src/**/*.*"],
   testURL: "http://localhost/",
-  setupFiles: ["jest-canvas-mock", "<rootDir>/tests/helpers/mockUrl.js"],
+  setupFiles: ["jest-canvas-mock", "<rootDir>/tests/helpers/mockUrl.js"]
 };

postcss.config.js

@@ -1,5 +1,5 @@
 module.exports = {
   plugins: {
-    autoprefixer: {},
-  },
+    autoprefixer: {}
+  }
 };

src/components/Plotly.vue

@@ -17,21 +17,21 @@ export default {
   directives,
   props: {
     data: {
-      type: Array,
+      type: Array
     },
     layout: {
-      type: Object,
+      type: Object
     },
     id: {
       type: String,
       required: false,
-      default: null,
-    },
+      default: null
+    }
   },
   data() {
     return {
       scheduled: null,
-      innerLayout: { ...this.layout },
+      innerLayout: { ...this.layout }
     };
   },
   mounted() {
@@ -45,7 +45,7 @@ export default {
       handler() {
         this.schedule({ replot: true });
       },
-      deep: true,
+      deep: true
     },
     options: {
       handler(value, old) {
@@ -54,12 +54,12 @@ export default {
         }
         this.schedule({ replot: true });
       },
-      deep: true,
+      deep: true
     },
     layout(layout) {
       this.innerLayout = { ...layout };
       this.schedule({ replot: false });
-    },
+    }
   },
   computed: {
     options() {
@@ -69,9 +69,9 @@ export default {
       }, {});
       return {
         responsive: false, // default
-        ...optionsFromAttrs, // overrides if specified
+        ...optionsFromAttrs // overrides if specified
       };
-    },
+    }
   },
   beforeDestroy() {
     events.forEach(event => this.$el.removeAllListeners(event.completeName));
@@ -91,7 +91,7 @@ export default {
       this.scheduled = context;
       this.$nextTick(() => {
         const {
-          scheduled: { replot },
+          scheduled: { replot }
         } = this;
         this.scheduled = null;
         if (replot) {
@@ -115,12 +115,12 @@ export default {
       return {
         format: "png",
         width: $el.clientWidth,
-        height: $el.clientHeight,
+        height: $el.clientHeight
       };
     },
     react() {
       Plotly.react(this.$el, this.data, this.innerLayout, this.options);
-    },
-  },
+    }
+  }
 };
 </script>

src/components/events.js

@@ -25,7 +25,7 @@ const eventsName = [
   "SliderStart",
   "Transitioning",
   "TransitionInterrupted",
-  "Unhover",
+  "Unhover"
 ];
 
 const events = eventsName
@@ -34,7 +34,7 @@ const events = eventsName
     completeName: "plotly_" + eventName,
     handler: context => (...args) => {
       context.$emit.apply(context, [eventName, ...args]);
-    },
+    }
   }));
 
 export default events;

tests/.eslintrc.js

@@ -1,5 +1,5 @@
 module.exports = {
   env: {
-    jest: true,
-  },
+    jest: true
+  }
 };

tests/mocks/plotly.js

@@ -1,6 +1,6 @@
 export default {
   Plots: {
-    resize: jest.fn(),
+    resize: jest.fn()
   },
   plot: jest.fn(),
   newPlot: jest.fn(element => {
@@ -18,5 +18,5 @@ export default {
   extendTraces: jest.fn(),
   prependTraces: jest.fn(),
   toImage: jest.fn(),
-  downloadImage: jest.fn(),
+  downloadImage: jest.fn()
 };

tests/unit/helper.spec.js

@@ -7,7 +7,7 @@ describe("camelize", () => {
     ["kebab-case", "kebabCase"],
     ["multi-hyphen-string", "multiHyphenString"],
     ["drag-class", "dragClass"],
-    ["test-", "test-"],
+    ["test-", "test-"]
   ])("transform %s into %s", (value, expected) => {
     const actual = camelize(value);
     expect(actual).toEqual(expected);