ESLint: enforce trailing commas

Author: MetRonnie

.eslintrc.cjs

@@ -15,6 +15,14 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
+const commaDangle = {
+  arrays: 'always-multiline',
+  objects: 'always-multiline',
+  imports: 'always-multiline',
+  exports: 'always-multiline',
+  functions: 'only-multiline',
+}
+
 module.exports = {
   root: true,
   parserOptions: {
@@ -32,40 +40,38 @@ module.exports = {
   rules: {
     'comma-dangle': [
       'error',
-      {
-        arrays: 'only-multiline',
-        objects: 'only-multiline',
-        imports: 'only-multiline',
-        exports: 'only-multiline',
-        functions: 'only-multiline',
-      },
+      commaDangle,
+    ],
+    'vue/comma-dangle': [
+      'error',
+      commaDangle,
     ],
     'no-console': [
       'error',
       {
-        allow: ['warn', 'error']
-      }
+        allow: ['warn', 'error'],
+      },
     ],
     'template-curly-spacing': [
-      'off'
+      'off',
     ],
     'vue/multi-word-component-names': [
-      'off'
+      'off',
     ],
     'vue/valid-v-slot': [
       'error',
       {
-        allowModifiers: true
-      }
+        allowModifiers: true,
+      },
     ],
     'promise/param-names': [
-      'error'
+      'error',
     ],
     'promise/no-return-wrap': [
-      'error'
+      'error',
     ],
     'cypress/unsafe-to-chain-command': [
-      'off'
+      'off',
     ],
   },
 }

cypress.config.cjs

@@ -36,13 +36,13 @@ module.exports = defineConfig({
       return config
     },
     specPattern: 'tests/e2e/specs/**/*.cy.{js,jsx,ts,tsx}',
-    supportFile: 'tests/e2e/support/index.js'
+    supportFile: 'tests/e2e/support/index.js',
   },
 
   component: {
     devServer: {
       framework: 'vue',
-      bundler: 'vite'
+      bundler: 'vite',
     },
     setupNodeEvents (on, config) {
       // For test coverage
@@ -51,12 +51,12 @@ module.exports = defineConfig({
     },
     specPattern: 'tests/component/**/*.cy.{js,jsx,ts,tsx}',
     supportFile: 'tests/component/support/index.js',
-    indexHtmlFile: 'tests/component/support/component-index.html'
+    indexHtmlFile: 'tests/component/support/component-index.html',
   },
 
   env: {
     // eslint-disable-next-line no-unneeded-ternary
-    coverage: process.env.COVERAGE ? true : false
+    coverage: process.env.COVERAGE ? true : false,
   },
 
   morgan: false, // Disable XHR logging as it's very noisy

scripts/concurrently.cjs

@@ -8,28 +8,28 @@ const allCommands = {
   'serve:jupyterhub': {
     command: 'yarn run serve:jupyterhub',
     name: 'SERVER',
-    prefixColor: 'yellow'
+    prefixColor: 'yellow',
   },
   'serve:vue': {
     command: `yarn run serve:vue ${VITE_OPTIONS ?? ''}`,
     name: 'VITE',
-    prefixColor: 'blue'
+    prefixColor: 'blue',
   },
   preview: {
     command: `yarn run -B vite preview --mode offline ${VITE_OPTIONS ?? ''}`,
     name: 'VITE',
-    prefixColor: 'blue'
+    prefixColor: 'blue',
   },
   'e2e:open': {
     command: 'yarn run -B cypress open --e2e',
     name: 'TESTS',
-    prefixColor: 'magenta'
+    prefixColor: 'magenta',
   },
   'cy:run': {
     command: 'yarn run -B cypress run',
     name: 'TESTS',
-    prefixColor: 'cyan'
-  }
+    prefixColor: 'cyan',
+  },
 }
 
 concurrently(

src/App.vue

@@ -45,7 +45,7 @@ const vuetifyDefaults = computed(() => ({
   global: {
     transition: reducedAnimation.value ? 'no' : undefined,
     ripple: reducedAnimation.value ? false : undefined,
-  }
+  },
 }))
 
 onMounted(() => {

src/components/Markdown.vue

@@ -34,14 +34,14 @@ export default {
   props: {
     markdown: {
       type: String,
-      required: true
-    }
+      required: true,
+    },
   },
 
   computed: {
     html () {
       return md.render(this.markdown)
-    }
-  }
+    },
+  },
 }
 </script>

src/components/core/Alert.vue

@@ -46,7 +46,7 @@ export default {
   name: 'Alert',
 
   computed: {
-    ...mapState(['alert'])
+    ...mapState(['alert']),
   },
 
   methods: {
@@ -56,11 +56,11 @@ export default {
      */
     closeAlert () {
       this.setAlert(null)
-    }
+    },
   },
 
   icons: {
-    mdiClose
-  }
+    mdiClose,
+  },
 }
 </script>

src/components/cylc/ConnectionStatus.vue

@@ -46,8 +46,8 @@ export default {
      */
     isOffline: {
       type: Boolean,
-      required: true
-    }
+      required: true,
+    },
   },
 
   icons: {

src/components/cylc/Drawer.vue

@@ -74,7 +74,7 @@ export const minWidth = 150
 export default {
   components: {
     Workflows,
-    'c-header': Header
+    'c-header': Header,
   },
 
   setup () {

src/components/cylc/GraphNode.vue

@@ -95,30 +95,30 @@ export default {
   name: 'GraphNode',
   components: {
     SVGTask,
-    Job
+    Job,
   },
   props: {
     task: {
       type: Object,
-      required: true
+      required: true,
     },
     jobs: {
       type: Array,
-      required: true
+      required: true,
     },
     maxJobs: {
       // maximum number of jobs to display before using an overflow indicator
       default: 6,
-      required: false
+      required: false,
     },
     mostRecentJobScale: {
       // the size of the most recent job icon relative to any previos jobs
       default: 1.2,
-      required: false
+      required: false,
     },
     jobTheme: {
-      required: true
-    }
+      required: true,
+    },
   },
   computed: {
     nodeID () {
@@ -150,7 +150,7 @@ export default {
       // the most recent job is larger so all subsequent jobs need to be bumped
       // along a bit further to account for this
       return (this.mostRecentJobScale * 100) - 100 // y offset in px
-    }
-  }
+    },
+  },
 }
 </script>

src/components/cylc/GraphSubgraph.vue

@@ -54,8 +54,8 @@ export default {
   props: {
     subgraph: {
       type: Object,
-      required: true
-    }
+      required: true,
+    },
   },
   computed: {
     labelXPosition () {
@@ -67,6 +67,6 @@ export default {
       // Adding 90pt to the y position brings the label inside the rect
       return (parseInt(this.subgraph.y) + 90)
     },
-  }
+  },
 }
 </script>