eslint: require trailing comma on multiline objects and arrays (#1110)

This is beneficial for the following reasons:

* improves clarity of diffs when an item is added or removed from an object or array
* reduces the chances of having merge conflicts, since only the lines you are modifying are touched
* simplifies adding and removing items to objects and arrays, since only the lines you are modifying must be touched

Bug: T420768

Author: outdooracorn

.eslintrc.js

@@ -11,6 +11,7 @@ module.exports = {
     parser: '@babel/eslint-parser'
   },
   rules: {
+    'comma-dangle': ['error', 'always-multiline'],
     'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
     'vue/multi-word-component-names': 'warn',

src/App.vue

@@ -24,20 +24,20 @@ export default {
   components: {
     Navbar,
     Foot,
-    Interval
+    Interval,
   },
   computed: {
     customLayout: function () {
       return this.$route.meta.customLayout
-    }
+    },
   },
   methods: {
     checkVerified () {
       this.$api
         .checkVerified()
         .then(verified => verified && this.$store.dispatch('markAsVerified'))
-    }
-  }
+    },
+  },
 }
 </script>
 

src/backend/api.js

@@ -75,9 +75,9 @@ export const updateLogo = async ({ file, fileName, wikiId }) => {
     form,
     {
       headers: {
-        'Content-Type': 'multipart/form-data'
-      }
-    }
+        'Content-Type': 'multipart/form-data',
+      },
+    },
   )
 }
 // TODO the api should get the setting from the path (so it isn't needed in the payload)
@@ -93,8 +93,8 @@ export const wikiDiscovery = async ({ sort, direction, active, currentPage, resu
       direction,
       is_active: active,
       page: currentPage,
-      per_page: resultsPerPage
-    }
+      per_page: resultsPerPage,
+    },
   })).data
 }
 
@@ -112,14 +112,14 @@ export const importEntities = async ({
     'Q5@2212749099',
     'Q64@2215506799',
     'Q42@2213635313',
-    'Q3107329@2211072210'
+    'Q3107329@2211072210',
   ],
-  sourceWikiUrl = 'https://www.wikidata.org'
+  sourceWikiUrl = 'https://www.wikidata.org',
 }) => {
   const { data: { data } } = await axios.post('/wiki/entityImport', {
     wiki: wikiId,
     entity_ids: entityIds.join(','),
-    source_wiki_url: sourceWikiUrl
+    source_wiki_url: sourceWikiUrl,
   })
   return data
 }

src/backend/axios.js

@@ -3,8 +3,8 @@ import Axios from 'axios'
 const axios = Axios.create({
   baseURL: '/api',
   headers: {
-    'Content-Type': 'application/json'
-  }
+    'Content-Type': 'application/json',
+  },
 })
 
 export default axios

src/backend/index.js

@@ -3,5 +3,5 @@ import axios from './axios'
 
 export {
   api,
-  axios
+  axios,
 }

src/backend/mocks/default_handlers.js

@@ -11,7 +11,7 @@ function makeUser (email = 'test@local') {
     email,
     verified: true,
     created_at: '2020-01-01',
-    updated_at: '2020-01-01'
+    updated_at: '2020-01-01',
   }
 }
 
@@ -25,21 +25,21 @@ const makeNewWiki = ({ domain, sitename }) => {
     updated_at: '2020-01-01',
     pivot: {
       user_id: user.id,
-      wiki_id: lastWikiId
+      wiki_id: lastWikiId,
     },
     wiki_managers: [{
       email: user.email,
       pivot: {
         user_id: user.id,
-        wiki_id: lastWikiId
-      }
+        wiki_id: lastWikiId,
+      },
     }],
     wiki_db_version: {
       id: 101,
       wiki_id: lastWikiId,
-      version: 'mw1.33-wbs1'
+      version: 'mw1.33-wbs1',
     },
-    public_settings: []
+    public_settings: [],
   }
 
   myWikis.push(newWiki)
@@ -59,12 +59,12 @@ const wikiDiscovery = (referrer, params) => {
     next: function () {
       const x = Math.sin(this.seed++) * 10000
       return x - Math.floor(x)
-    }
+    },
   }
 
   const names = [
     'Wikibase Name',
-    'A Very Long Wikibase Name'
+    'A Very Long Wikibase Name',
   ]
 
   let wikis = [...Array(75).keys()].map((id) => {
@@ -73,12 +73,12 @@ const wikiDiscovery = (referrer, params) => {
       domain: id + '-wikibase.wbaas.localhost',
       sitename: id + ' - ' + names[id % names.length],
       wiki_site_stats: null,
-      logo_url: null
+      logo_url: null,
     }
 
     if (pseudorandom.next() >= 0.1) {
       wiki.wiki_site_stats = {
-        pages: Math.ceil(pseudorandom.next() * 250)
+        pages: Math.ceil(pseudorandom.next() * 250),
       }
     }
 
@@ -125,8 +125,8 @@ const wikiDiscovery = (referrer, params) => {
     data: wikis.slice(start, end),
     meta: {
       last_page: Math.ceil(wikis.length / resultsPerPage),
-      total: wikis.length
-    }
+      total: wikis.length,
+    },
   }
 }
 
@@ -135,7 +135,7 @@ export const handlers = [
   rest.post(/\/api\/auth\/login$/, (req, res, ctx) => {
     user = makeUser(req.body.email)
     return res(ctx.json({
-      user
+      user,
     }), ctx.cookie('authToken', 'token_value'))
   }),
   rest.get(/\/api\/auth\/login$/, (req, res, ctx) => {
@@ -145,7 +145,7 @@ export const handlers = [
     }
     user = makeUser(req.body.email)
     return res(ctx.json({
-      user
+      user,
     }))
   }),
   rest.delete(/\/api\/auth\/login$/, (req, res, ctx) => {
@@ -157,7 +157,7 @@ export const handlers = [
       return res(ctx.status(400, 'Mocked Server Error'))
     }
     return res(ctx.status(200))
-  }
+  },
   ),
   rest.post(/\/api\/user\/resetPassword$/, (_, res, ctx) => res(ctx.status(200))),
   rest.post(/\/api\/user\/sendVerifyEmail$/, (_, res, ctx) => res(ctx.json({ message: 'Already verified' }))),
@@ -174,7 +174,7 @@ export const handlers = [
       return res(ctx.status(400, 'Mocked recaptcha empty Error'))
     }
     return res(ctx.status(200))
-  }
+  },
   ),
 
   /* Wiki endpoints */
@@ -219,5 +219,5 @@ export const handlers = [
   }),
   rest.get(/\/api\/wiki$/, (req, res, ctx) => {
     return res(ctx.json(wikiDiscovery(req.referrer, req.url.searchParams)))
-  })
+  }),
 ]

src/components/Cards/AudienceAndPurposeWizardStep.vue

@@ -120,14 +120,14 @@ export default {
     title: String,
     inFlight: Boolean,
     value: Object,
-    dismissable: Boolean
+    dismissable: Boolean,
   },
   data () {
     return {
       purposeError: '',
       audienceError: '',
       purposeOtherError: '',
-      audienceOtherError: ''
+      audienceOtherError: '',
     }
   },
   methods: {
@@ -145,8 +145,8 @@ export default {
       if (this.$refs.inputForm.validate() === true) {
         this.$emit('next-step')
       }
-    }
-  }
+    },
+  },
 }
 </script>
 

src/components/Cards/CreateAccount.vue

@@ -89,13 +89,13 @@ export default {
   name: 'CreateAccountCard',
   props: [
     'title',
-    'buttonText'
+    'buttonText',
   ],
   components: {},
   computed: {
     isLoggedIn: function () {
       return this.$store.getters.isLoggedIn
-    }
+    },
   },
   data () {
     return {
@@ -105,7 +105,7 @@ export default {
       terms: false,
       hasError: false,
       error: [],
-      inFlight: false
+      inFlight: false,
     }
   },
   created () {
@@ -165,7 +165,7 @@ export default {
           {
             email: this.email,
             password: this.password,
-            recaptcha: token
+            recaptcha: token,
           })
           .then(success => this.createSuccessful(success))
           .catch(errors => {
@@ -214,8 +214,8 @@ export default {
       if (this.isLoggedIn) {
         this.$router.replace(this.$route.query.redirect || '/dashboard')
       }
-    }
-  }
+    },
+  },
 }
 </script>
 

src/components/Cards/CreateWiki.vue

@@ -58,15 +58,15 @@ export default {
     SiteDetailsCreateWikiWizardStep,
     AudienceAndPurposeWizardStep,
     TemporalityCreateWikiWizardStep,
-    KnowledgeEquityCreateWikiWizardStep
+    KnowledgeEquityCreateWikiWizardStep,
   },
   props: [
-    'title'
+    'title',
   ],
   computed: {
     currentUser: function () {
       return this.$store.getters.currentUser
-    }
+    },
   },
   data () {
     return {
@@ -75,21 +75,21 @@ export default {
         domainRadioChoice: 'sub',
         subdomain: '',
         domain: '',
-        username: ''
+        username: '',
       },
       stepTwo: {
         purpose: '',
         otherPurpose: '',
         audience: '',
-        otherAudience: ''
+        otherAudience: '',
       },
       stepThree: {
         temporality: '',
-        otherTemporality: ''
+        otherTemporality: '',
       },
       stepFour: {
         selectedOption: '',
-        freeTextResponse: ''
+        freeTextResponse: '',
       },
       hasError: false,
       error: [],
@@ -98,9 +98,9 @@ export default {
       CNAME_RECORD: config.CNAME_RECORD,
       errorMessages: {
         domainTaken: 'The domain has already been taken.',
-        domainFormat: 'The subdomain must be at least five characters long and may contain only lowercase Latin letters (a-z), digits (0-9) and hyphens (-).'
+        domainFormat: 'The subdomain must be at least five characters long and may contain only lowercase Latin letters (a-z), digits (0-9) and hyphens (-).',
       },
-      step: 1
+      step: 1,
     }
   },
   created () {
@@ -142,20 +142,20 @@ export default {
         ...(this.stepTwo.audience && { audience: this.stepTwo.audience }),
         ...(this.stepTwo.otherAudience && { audience_other: this.stepTwo.otherAudience }),
         temporality: this.stepThree.temporality,
-        ...(this.stepThree.otherTemporality && { temporality_other: this.stepThree.otherTemporality })
+        ...(this.stepThree.otherTemporality && { temporality_other: this.stepThree.otherTemporality }),
       }
 
       const requestBody = {
         domain: domainToSubmit,
         sitename: this.stepOne.sitename,
         username: this.stepOne.username,
-        profile: JSON.stringify(profileObject)
+        profile: JSON.stringify(profileObject),
       }
 
       if (this.stepThree.temporality === 'permanent' && this.stepFour.selectedOption) {
         requestBody.knowledgeEquityResponse = {
           selectedOption: this.stepFour.selectedOption,
-          freeTextResponse: this.stepFour.freeTextResponse
+          freeTextResponse: this.stepFour.freeTextResponse,
         }
       }
 
@@ -216,8 +216,8 @@ export default {
       if (!this.currentUser) {
         this.$router.replace(this.$route.query.redirect || '/')
       }
-    }
-  }
+    },
+  },
 }
 </script>