ESLint: enforce trailing commas and html indentation

.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,45 @@ module.exports = {
   rules: {
     'comma-dangle': [
       'error',
+      commaDangle,
+    ],
+    'vue/comma-dangle': [
+      'error',
+      commaDangle,
+    ],
+    'vue/html-indent': [
+      'error',
+      2,
       {
-        arrays: 'only-multiline',
-        objects: 'only-multiline',
-        imports: 'only-multiline',
-        exports: 'only-multiline',
-        functions: 'only-multiline',
+        alignAttributesVertically: false,
       },
     ],
     '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/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

@@ -60,7 +60,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         <v-tooltip
           activator="#version-chip"
           location="top"
-          >
+        >
           <div
             class="d-flex flex-column align-center"
             style="pointer-events: visible;"
@@ -96,7 +96,7 @@ export const minWidth = 150
 export default {
   components: {
     Workflows,
-    'c-header': Header
+    'c-header': Header,
   },
 
   setup () {
@@ -148,7 +148,7 @@ export default {
     const versionChipProps = computed(() => import.meta.env.MODE === 'production'
       ? {
           text: `Cylc ${cylcVersionInfo.value?.['cylc-flow'] ?? ''}`,
-          variant: 'text'
+          variant: 'text',
         }
       : {
           text: import.meta.env.MODE.toUpperCase(),

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

@@ -31,7 +31,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
       stroke-width="8px"
       stroke="grey"
       stroke-dasharray="50 50"
-      />
+    />
     <text
       :x="labelXPosition"
       :y="labelYPosition"
@@ -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>

src/components/cylc/Header.vue

@@ -45,7 +45,7 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
         VCombobox: {
           bgColor: 'white',
           rules: [(val) => Boolean(val) || 'Required'],
-        }
+        },
       }">
         <!-- Owner combobox -->
         <v-combobox
@@ -122,7 +122,7 @@ import { computed, ref } from 'vue'
 import { useStore } from 'vuex'
 import { useLocalStorage } from '@vueuse/core'
 import {
-  mdiClose
+  mdiClose,
 } from '@mdi/js'
 
 const store = useStore()

src/components/cylc/Info.vue

@@ -226,13 +226,13 @@ export default {
     completion () {
       // Task output completion expression stuff.
       return this.task?.node?.runtime.completion
-    }
+    },
 
   },
 
   methods: {
     formatCompletion,
-  }
+  },
 
 }
 </script>

src/components/cylc/Job.vue

@@ -43,7 +43,7 @@ const Job = (props, context) => {
       height: width,
       rx: '15',
       ry: '15',
-      'stroke-width': '10'
+      'stroke-width': '10',
     }
   )
   // the job icon SVG
@@ -63,7 +63,7 @@ const Job = (props, context) => {
         rx: '15',
         ry: '15',
         opacity: '50%',
-        'stroke-width': '10'
+        'stroke-width': '10',
       }
     )
     jobIconChildren.splice(0, 0, previousStateIconSvg)
@@ -73,15 +73,15 @@ const Job = (props, context) => {
       'g',
       { class: cJobClass },
       [
-        h('g', { class: 'job' }, jobIconChildren)
+        h('g', { class: 'job' }, jobIconChildren),
       ]
     )
   }
   const jobIconSvg = h(
     'svg',
     {
       class: 'job',
-      viewBox: '0 0 100 100'
+      viewBox: '0 0 100 100',
     },
     jobIconChildren
   )
@@ -99,13 +99,13 @@ Job.props = {
   },
   previousState: {
     type: String,
-    required: false
+    required: false,
   },
   svg: {
     type: Boolean,
     required: false,
-    default: false
-  }
+    default: false,
+  },
 }
 
 export default Job