Update JS code formatter checks

eslint.config.mjs

@@ -3,6 +3,7 @@ import globals from 'globals';
 import pluginVue from 'eslint-plugin-vue';
 import pluginCypress from 'eslint-plugin-cypress';
 import pluginJest from 'eslint-plugin-jest';
+import stylistic from '@stylistic/eslint-plugin';
 import { defineConfig, globalIgnores } from 'eslint/config';
 
 export default defineConfig([
@@ -26,8 +27,86 @@ export default defineConfig([
         ...globals.browser,
       },
     },
+    plugins: {
+      '@stylistic': stylistic,
+    },
     rules: {
-      'indent': ['error', 2],
+      eqeqeq: ['error', 'always'],
+      curly: 'error',
+      'default-param-last': 'error',
+      'no-var': 'error',
+      'prefer-arrow-callback': 'error',
+      'prefer-const': 'error',
+      'prefer-template': 'error',
+
+      '@stylistic/array-bracket-newline': ['error', 'consistent'],
+      '@stylistic/array-bracket-spacing': 'error',
+      '@stylistic/array-element-newline': ['error', 'consistent'],
+      '@stylistic/arrow-parens': 'error',
+      '@stylistic/arrow-spacing': 'error',
+      '@stylistic/block-spacing': 'error',
+      '@stylistic/brace-style': 'error',
+      '@stylistic/comma-dangle': ['error', 'always-multiline'],
+      '@stylistic/comma-spacing': 'error',
+      '@stylistic/comma-style': 'error',
+      '@stylistic/computed-property-spacing': 'error',
+      '@stylistic/curly-newline': 'error',
+      '@stylistic/dot-location': ['error', 'property'],
+      '@stylistic/eol-last': 'error',
+      '@stylistic/function-call-argument-newline': ['error', 'consistent'],
+      '@stylistic/function-call-spacing': 'error',
+      '@stylistic/function-paren-newline': ['error', 'multiline-arguments'],
+      '@stylistic/generator-star-spacing': 'error',
+      '@stylistic/implicit-arrow-linebreak': 'error',
+      '@stylistic/indent': ['error', 2],
+      '@stylistic/indent-binary-ops': ['error', 2],
+      '@stylistic/key-spacing': 'error',
+      '@stylistic/keyword-spacing': 'error',
+      '@stylistic/linebreak-style': 'error',
+      '@stylistic/lines-between-class-members': 'error',
+      '@stylistic/max-statements-per-line': 'error',
+      '@stylistic/member-delimiter-style': 'error',
+      '@stylistic/new-parens': 'error',
+      '@stylistic/no-extra-semi': 'error',
+      '@stylistic/no-floating-decimal': 'error',
+      '@stylistic/no-mixed-operators': 'error',
+      '@stylistic/no-multi-spaces': 'error',
+      '@stylistic/no-multiple-empty-lines': 'error',
+      '@stylistic/no-tabs': 'error',
+      '@stylistic/no-trailing-spaces': 'error',
+      '@stylistic/no-whitespace-before-property': 'error',
+      '@stylistic/object-curly-newline': 'error',
+      '@stylistic/object-curly-spacing': ['error', 'always'],
+      '@stylistic/object-property-newline': ['error', { allowAllPropertiesOnSameLine: true }],
+      '@stylistic/one-var-declaration-per-line': 'error',
+      '@stylistic/operator-linebreak': ['error', 'before'],
+      '@stylistic/padded-blocks': ['error', 'never'],
+      '@stylistic/quote-props': ['error', 'as-needed'],
+      '@stylistic/quotes': ['error', 'single', { avoidEscape: true, allowTemplateLiterals: 'avoidEscape' }],
+      '@stylistic/rest-spread-spacing': 'error',
+      '@stylistic/semi': ['error', 'always'],
+      '@stylistic/semi-spacing': 'error',
+      '@stylistic/semi-style': 'error',
+      '@stylistic/space-before-blocks': 'error',
+      '@stylistic/space-before-function-paren': ['error', {
+        anonymous: 'always',
+        named: 'never',
+        asyncArrow: 'always',
+        catch: 'always',
+      }],
+      '@stylistic/space-in-parens': 'error',
+      '@stylistic/space-infix-ops': 'error',
+      '@stylistic/space-unary-ops': ['error', { words: true, nonwords: false }],
+      '@stylistic/spaced-comment': 'error',
+      '@stylistic/switch-colon-spacing': 'error',
+      '@stylistic/template-curly-spacing': 'error',
+      '@stylistic/template-tag-spacing': 'error',
+      '@stylistic/type-annotation-spacing': 'error',
+      '@stylistic/type-generic-spacing': 'error',
+      '@stylistic/type-named-tuple-spacing': 'error',
+      '@stylistic/wrap-regex': 'error',
+      '@stylistic/yield-star-spacing': 'error',
+
       'vue/component-name-in-template-casing': ['error', 'PascalCase'],
       'vue/no-v-html': 'off',
       'vue/require-v-for-key': 'off',
@@ -65,26 +144,6 @@ export default defineConfig([
       'vue/require-emit-validator': 'error',
       'vue/require-name-property': 'error',
       'vue/slot-name-casing': 'error',
-      'eqeqeq': ['error', 'always'],
-      'arrow-spacing': ['error'],
-      'block-spacing': ['error'],
-      'brace-style': ['error', 'stroustrup'],
-      'comma-dangle': ['error', 'always-multiline'],
-      'curly' : ['error'],
-      'default-param-last': ['error'],
-      'eol-last': ['error'],
-      'keyword-spacing': ['error', {'before': true, 'after': true}],
-      'space-before-blocks': ['error', 'always'],
-      'linebreak-style': ['error', 'unix'],
-      'no-trailing-spaces': ['error'],
-      'no-var': ['error'],
-      'prefer-arrow-callback': ['error'],
-      'prefer-const': ['error'],
-      'prefer-template': ['error'],
-      'quotes': ['error', 'single', {'avoidEscape': true}],
-      'semi': ['error', 'always'],
-      'semi-style': ['error', 'last'],
-      'template-curly-spacing': ['error', 'never'],
     },
   },
   {

package.json

@@ -60,6 +60,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
+    "@stylistic/eslint-plugin": "^5.10.0",
     "@vue/test-utils": "^2.4.11",
     "@vue/vue3-jest": "^29.2.6",
     "babel-core": "^7.0.0-bridge.0",

resources/js/vue/app.js

@@ -46,8 +46,7 @@ axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
 const token = document.head.querySelector('meta[name="csrf-token"]');
 if (token) {
   axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
-}
-else {
+} else {
   console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
 }
 

resources/js/vue/components/BuildBuildPage.vue

@@ -134,7 +134,7 @@ import {
   faCircleExclamation,
   faTriangleExclamation,
 } from '@fortawesome/free-solid-svg-icons';
-import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import BuildErrorList from './BuildBuildPage/BuildErrorList.vue';
 import CodeBox from './shared/CodeBox.vue';
 
@@ -271,9 +271,9 @@ export default {
       };
 
       if (this.previousBuildWithErrors) {
-        this.buildWithErrors.children.edges.forEach(({node: currentBuildNode}) => {
+        this.buildWithErrors.children.edges.forEach(({ node: currentBuildNode }) => {
           if (currentBuildNode.subProject) {
-            this.previousBuildWithErrors.children.edges.forEach(({node: previousBuildNode}) => {
+            this.previousBuildWithErrors.children.edges.forEach(({ node: previousBuildNode }) => {
               if (parseInt(currentBuildNode.subProject.id) === parseInt(previousBuildNode.subProject.id)) {
                 retVal[parseInt(currentBuildNode.id)] = parseInt(previousBuildNode.id);
               }

resources/js/vue/components/BuildBuildPage/BuildErrorItem.vue

@@ -101,13 +101,13 @@ import {
   faCircleExclamation,
   faTriangleExclamation,
 } from '@fortawesome/free-solid-svg-icons';
-import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
-import {getRepository} from '../shared/RepositoryIntegrations';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { getRepository } from '../shared/RepositoryIntegrations';
 import 'core-js/actual/regexp/escape';
 
 export default {
   name: 'BuildErrorItem',
-  components: {FontAwesomeIcon, CodeBox},
+  components: { FontAwesomeIcon, CodeBox },
 
   props: {
     buildError: {

resources/js/vue/components/BuildBuildPage/BuildErrorList.vue

@@ -121,7 +121,7 @@ const BUILD_QUERY = gql`
 
 export default {
   name: 'BuildErrorList',
-  components: {BuildErrorItem, LoadingIndicator},
+  components: { BuildErrorItem, LoadingIndicator },
 
   props: {
     buildId: {
@@ -215,15 +215,13 @@ export default {
         return currentErrorList.filter(({ node }) => {
           return !previousErrorSet.has(this.stringifyError(node));
         });
-      }
-      else if (this.showFixedErrors) {
+      } else if (this.showFixedErrors) {
         // Note: showing the fixed errors actually shows errors for the previous build.
         // This may be confusing to users and should be re-evaluated in the future.
         return previousErrorList.filter(({ node }) => {
           return !currentErrorSet.has(this.stringifyError(node));
         });
-      }
-      else {
+      } else {
         throw 'Invalid state.';
       }
     },

resources/js/vue/components/BuildCommentsPage.vue

@@ -167,7 +167,7 @@ export default {
           }
         }
       `,
-      update: data => data?.build?.comments?.edges,
+      update: (data) => data?.build?.comments?.edges,
       variables() {
         return {
           buildId: this.buildId,
@@ -202,7 +202,7 @@ export default {
           this.commentText = '';
           this.submitting = false;
         })
-        .catch(error => {
+        .catch((error) => {
           console.error(error);
           this.submitting = false;
           alert('Failed to add comment. Please try again.');

resources/js/vue/components/BuildConfigure.vue

@@ -62,11 +62,11 @@ import {
   faCircleExclamation,
   faTriangleExclamation,
 } from '@fortawesome/free-solid-svg-icons';
-import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 export default {
   name: 'BuildConfigure',
-  components: {FontAwesomeIcon, ConfigureCard, LoadingIndicator, BuildSummaryCard, BuildSidebar},
+  components: { FontAwesomeIcon, ConfigureCard, LoadingIndicator, BuildSummaryCard, BuildSidebar },
 
   props: {
     buildId: {
@@ -110,7 +110,7 @@ export default {
         }
       `,
       update: (data) => {
-        let configures = data.build.configure !== null ? [{configure: data.build.configure}] : [];
+        let configures = data.build.configure !== null ? [{ configure: data.build.configure }] : [];
         data.build.children.edges.forEach((child) => {
           configures = configures.concat({
             ...child.node,

resources/js/vue/components/BuildCoveragePage.vue

@@ -184,13 +184,13 @@ import LoadingIndicator from './shared/LoadingIndicator.vue';
 import BuildSidebar from './shared/BuildSidebar.vue';
 import gql from 'graphql-tag';
 import FilterBuilder from './shared/FilterBuilder.vue';
-import {faFolder, faReply} from '@fortawesome/free-solid-svg-icons';
-import {faFile} from '@fortawesome/free-regular-svg-icons';
-import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
+import { faFolder, faReply } from '@fortawesome/free-solid-svg-icons';
+import { faFile } from '@fortawesome/free-regular-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 export default {
   name: 'BuildCoveragePage',
-  components: {FontAwesomeIcon, FilterBuilder, LoadingIndicator, DataTable, BuildSummaryCard, BuildSidebar},
+  components: { FontAwesomeIcon, FilterBuilder, LoadingIndicator, DataTable, BuildSummaryCard, BuildSidebar },
 
   props: {
     buildId: {
@@ -360,7 +360,7 @@ export default {
 
     formattedTableRows() {
       const coverageByPrefix = {};
-      this.coverage?.filter(edge => {
+      this.coverage?.filter((edge) => {
         return edge.node.filePath.startsWith(this.currentPrefix) || edge.node.filePath.startsWith(`./${this.currentPrefix}`);
       }).forEach((edge) => {
         const pathWithoutPrefix = edge.node.filePath.replace(/^.\//, '').slice(this.currentPrefix.length);
@@ -373,8 +373,7 @@ export default {
           coverageByPrefix[cleanedPath].linesOfCodeUntested += edge.node.linesOfCodeUntested;
           coverageByPrefix[cleanedPath].branchesTested += edge.node.branchesTested;
           coverageByPrefix[cleanedPath].branchesUntested += edge.node.branchesUntested;
-        }
-        else {
+        } else {
           coverageByPrefix[cleanedPath] = {
             subProject: !isDirectory && edge.subProject ? edge.subProject : '',
             path: {
@@ -391,7 +390,7 @@ export default {
         }
       });
 
-      return Object.values(coverageByPrefix).map(obj => {
+      return Object.values(coverageByPrefix).map((obj) => {
         const linePct = this.computePercentage(obj.linesOfCodeTested, obj.linesOfCodeUntested);
         const branchPct = this.computePercentage(obj.branchesTested, obj.branchesUntested);
 
@@ -430,11 +429,9 @@ export default {
     percentToProgressBarColorClass(pct) {
       if (pct >= this.coveragePercentCutoff) {
         return 'tw-progress-success';
-      }
-      else if (pct >= 0.7 * this.coveragePercentCutoff) {
+      } else if (pct >= 0.7 * this.coveragePercentCutoff) {
         return 'tw-progress-warning';
-      }
-      else {
+      } else {
         return 'tw-progress-error';
       }
     },