Consistent formatting of ESLint and Prettier

.eslintrc.js

@@ -19,6 +19,26 @@ module.exports = {
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'vue/name-property-casing': ['error', 'kebab-case']
+    'space-before-function-paren': [
+      'error',
+      {
+        anonymous: 'always',
+        named: 'never',
+        asyncArrow: 'always'
+      }
+    ],
+    'vue/name-property-casing': ['error', 'kebab-case'],
+    'vue/html-self-closing': [
+      'error',
+      {
+        html: {
+          void: 'always',
+          normal: 'always',
+          component: 'always'
+        },
+        svg: 'always',
+        math: 'always'
+      }
+    ]
   }
 }

.prettierrc

@@ -2,5 +2,7 @@
   "singleQuote": true,
   "tabWidth": 2,
   "useTabs": false,
-  "semi": false
+  "semi": false,
+  "bracketSpacing": true,
+  "arrowParens": "always"
 }

.vscode/settings.json

@@ -17,9 +17,7 @@
     }
   ],
   "eslint.packageManager": "yarn",
-  "prettier.eslintIntegration": true,
   "vetur.completion.tagCasing": "initial",
-  "vetur.format.defaultFormatter.html": "none",
-  "vetur.format.defaultFormatter.js": "prettier-eslint",
+  "vetur.format.defaultFormatter.html": "prettier",
   "files.insertFinalNewline": true
 }

src/components/clubs/ClubItem.vue

@@ -2,16 +2,21 @@
   <div class="club-item">
     <NuxtLink
       class="absolute-link"
-      :to="localePath({
-        name: 'clubs-topic-clubId',
-        params: {
-          clubId: clubData.name
-        }
-      })"
+      :to="
+        localePath({
+          name: 'clubs-topic-clubId',
+          params: {
+            clubId: clubData.name
+          }
+        })
+      "
     />
     <div class="hero-wrapper">
       <div class="image-wrapper">
-        <img :src="`https://picsum.photos/${clubData.id}`" class="club--image">
+        <img
+          :src="`https://picsum.photos/${clubData.id}`"
+          class="club--image"
+        />
       </div>
     </div>
     <div class="details-container">

src/components/global/Banner.vue

@@ -53,28 +53,28 @@ import HomeBgTile from '~/components/home/HomeBgTile.vue'
 
 export default {
   components: { HomeBgTile },
-  data () {
+  data() {
     return {
       isMini: false,
       observer: null,
       sentinel: null
     }
   },
   watch: {
-    isMini (bool) {
+    isMini(bool) {
       if (bool) {
         document.dispatchEvent(new CustomEvent('bannerminified'))
       } else {
         document.dispatchEvent(new CustomEvent('bannerspreaded'))
       }
     }
   },
-  created () {
+  created() {
     if (this.$route.meta.depth > 1) {
       this.isMini = true
     }
   },
-  mounted () {
+  mounted() {
     // Sentinel for banner
     this.sentinel = document.querySelector('#banner-observer-sentinel')
     this.observer = new IntersectionObserver((entries) => {

src/components/global/GoBack.vue

@@ -17,18 +17,18 @@
 
 <script>
 export default {
-  data () {
+  data() {
     return {
       isHidden: false,
       scrollEventCallback: null
     }
   },
   computed: {
-    prevRouteName () {
+    prevRouteName() {
       return this.$route.meta.prevRouteName
     }
   },
-  mounted () {
+  mounted() {
     const that = this // alias
 
     // Create scroll event callback function

src/components/home/HomeBgTile.vue

@@ -9,7 +9,7 @@
 </template>
 <script>
 export default {
-  data () {
+  data() {
     return {
       key: 0,
       tileStates: undefined,
@@ -20,7 +20,7 @@ export default {
       bannerHeight: null
     }
   },
-  mounted () {
+  mounted() {
     let bannerRect = document
       .querySelector('#eodiro-banner')
       .getBoundingClientRect()
@@ -56,12 +56,12 @@ export default {
       })
     )
   },
-  beforeDestroy () {
+  beforeDestroy() {
     clearInterval(this.interval)
     window.removeEventListener('resize', this.resizeEvent)
   },
   methods: {
-    calculateVisibleTilesNumber () {
+    calculateVisibleTilesNumber() {
       // notice - there must be no scrollbar
       const heightParentComponent = 37 / 100
       const remRatioMoreThan1400 = 1.1
@@ -101,8 +101,7 @@ export default {
         )
 
         // calc real widthTile
-        widthTile =
-          (widthContainerTiles + 1.5 * rem) / tileNumWidth - 1.5 * rem
+        widthTile = (widthContainerTiles + 1.5 * rem) / tileNumWidth - 1.5 * rem
         // calc tileNumHeight
         tileNumHeight =
           Math.floor(
@@ -120,13 +119,12 @@ export default {
         widthTile = (widthContainerTiles + 1 * rem) / tileNumWidth - 1 * rem
         // calc tileNumHeight
         tileNumHeight =
-          Math.floor(
-            (heightContainerTiles + 1 * rem) / (widthTile + 1 * rem)
-          ) + 1
+          Math.floor((heightContainerTiles + 1 * rem) / (widthTile + 1 * rem)) +
+          1
       }
       return tileNumHeight * tileNumWidth
     },
-    createTiles () {
+    createTiles() {
       const ts = []
       const tileNum = this.calculateVisibleTilesNumber()
       for (let i = 0; i < tileNum; i++) {
@@ -143,7 +141,7 @@ export default {
         this.activateAnimation()
       })
     },
-    updateTilesNumber () {
+    updateTilesNumber() {
       const currentTileNum = this.calculateVisibleTilesNumber()
       let previousTileNum
 
@@ -169,7 +167,7 @@ export default {
         }
       }
     },
-    activateAnimation () {
+    activateAnimation() {
       let i, c
       const tileNum = this.getTileNum()
       this.interval = setInterval(() => {
@@ -180,8 +178,10 @@ export default {
         }
       }, 100)
     },
-    getTileNum () {
-      if (this.tileStates != null) { return this.tileStates.length }
+    getTileNum() {
+      if (this.tileStates != null) {
+        return this.tileStates.length
+      }
       return 0
     }
   }

src/components/ui/Loading.vue

@@ -6,12 +6,12 @@
 
 <script>
 export default {
-  data () {
+  data() {
     return {
       start: false
     }
   },
-  mounted () {
+  mounted() {
     setTimeout(() => {
       this.start = true
     }, 200)

src/components/ui/blocks/Accordion.vue

@@ -23,14 +23,14 @@
 
 <script>
 export default {
-  data () {
+  data() {
     return {
       totalHeight: 'auto',
       isCollapsed: true
     }
   },
   methods: {
-    toggleCollapse () {
+    toggleCollapse() {
       this.isCollapsed = !this.isCollapsed
     }
   }

src/components/ui/form/Input.vue

@@ -9,7 +9,7 @@
     @keydown="$emit('keydown')"
     @keyup="$emit('keyup')"
     @keypress="$emit('keypress')"
-  >
+  />
 </template>
 
 <script>

src/components/ui/layouts/Grid.vue

@@ -11,7 +11,7 @@ export default {
       type: String,
       required: false,
       default: 'medium',
-      validator (value) {
+      validator(value) {
         return ['small', 'medium', 'large'].includes(value)
       }
     }

src/layouts/default.vue

@@ -23,7 +23,7 @@ import GoBack from '~/components/global/GoBack'
 
 export default {
   components: { Banner, GoBack },
-  head () {
+  head() {
     return {
       title: this.$t('global.head.title'),
       meta: [
@@ -46,20 +46,20 @@ export default {
       }
     }
   },
-  data () {
+  data() {
     return {
       // If this is true
       // master content's padding-top will be narrower
       isBannerForcedMini: false
     }
   },
   computed: {
-    isValidPage () {
+    isValidPage() {
       return !this.$store.state.hamletList.includes(this.$route.meta.hamletName)
     }
   },
   watch: {
-    $route (to, from) {
+    $route(to, from) {
       // When route changes
       // cache or remove components from keep-alive
       if (from.meta.depth < to.meta.depth) {
@@ -88,7 +88,7 @@ export default {
       }
     }
   },
-  created () {
+  created() {
     // Cache components on first load
     this.$route.matched.forEach((matched) => {
       const compName = matched.components.default.options.name
@@ -97,14 +97,14 @@ export default {
 
     this.identifyBannerForcedMini()
   },
-  mounted () {
+  mounted() {
     // Before page enters
     document.addEventListener('beforepageenter', () => {
       this.identifyBannerForcedMini()
     })
   },
   methods: {
-    identifyBannerForcedMini () {
+    identifyBannerForcedMini() {
       this.isBannerForcedMini = this.$route.meta.depth > 1
     }
   }

src/layouts/error.vue

@@ -6,16 +6,16 @@
           class="hamlet-icon mode--light"
           src="~/assets/images/eodiro-icon_sq.svg"
           alt="eodiro-logo"
-        >
+        />
         <img
           class="hamlet-icon mode--dark"
           src="~/assets/images/eodiro-icon_sq_dark.svg"
           alt="eodiro-logo"
-        >
+        />
       </div>
       <h1 class="manifesto">
         {{ $t('global.error.page.firstLine') }}
-        <br>
+        <br />
         {{ $t('global.error.page.secondLine') }}
       </h1>
       <nuxt-link :to="localePath('index')">
@@ -35,15 +35,15 @@ export default {
   meta: {
     hamletName: 'error'
   },
-  head () {
+  head() {
     return {
       htmlAttrs: {
         class: this.$store.state.colorSchemeClassName
       }
     }
   },
   methods: {
-    goBack () {
+    goBack() {
       // this.$router.push('/')
       history.back()
     }