chore: add eslint rules for spacing (#464)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

.eslintrc.cjs

@@ -2,15 +2,42 @@ module.exports = {
   root: true,
   extends: ['@nuxt/eslint-config'],
   rules: {
-    'semi': ['error', 'never'],
-    'quotes': ['error', 'single'],
+    // General
+    semi: ['error', 'never'],
+    quotes: ['error', 'single'],
     'comma-dangle': ['error', 'never'],
+    'comma-spacing': ['error', { before: false, after: true }],
+    'keyword-spacing': ['error', { before: true, after: true }],
     'space-before-function-paren': ['error', 'always'],
+    'object-curly-spacing': ['error', 'always'],
+    'arrow-spacing': ['error', { before: true, after: true }],
+    'key-spacing': ['error', { beforeColon: false, afterColon: true, mode: 'strict' }],
+    'space-before-blocks': ['error', 'always'],
+    'space-infix-ops': ['error', { int32Hint: false }],
+
+    // Typescript
+    '@typescript-eslint/type-annotation-spacing': 'error',
+
+    // Vuejs
     'vue/multi-word-component-names': 0,
-    'vue/max-attributes-per-line': ['error', {
-      singleline: {
-        max: 5
+    'vue/html-indent': ['error', 2],
+    'vue/script-indent': ['error', 2, { baseIndent: 0 }],
+    'vue/keyword-spacing': ['error', { before: true, after: true }],
+    'vue/object-curly-spacing': ['error', 'always'],
+    'vue/key-spacing': ['error', { beforeColon: false, afterColon: true, mode: 'strict' }],
+    'vue/arrow-spacing': ['error', { before: true, after: true }],
+    'vue/array-bracket-spacing': ['error', 'never'],
+    'vue/block-spacing': ['error', 'always'],
+    'vue/brace-style': ['error', 'stroustrup', { allowSingleLine: true }],
+    'vue/space-infix-ops': ['error', { int32Hint: false }],
+    'vue/max-attributes-per-line': [
+      'error',
+      {
+        singleline: {
+          max: 5
+        }
       }
-    }]
+    ],
+    'vue/padding-line-between-blocks': ['error', 'always']
   }
 }

docs/components/content/examples/AccordionExampleDefaultSlot.vue

@@ -30,7 +30,7 @@ const items = [{
 <template>
   <UAccordion :items="items" :ui="{ wrapper: 'flex flex-col w-full' }">
     <template #default="{ item, index, open }">
-      <UButton color="gray" variant="ghost" class="border-b border-gray-200 dark:border-gray-700" :ui="{ rounded :'rounded-none', padding: { sm:'p-3' } }">
+      <UButton color="gray" variant="ghost" class="border-b border-gray-200 dark:border-gray-700" :ui="{ rounded: 'rounded-none', padding: { sm: 'p-3' } }">
         <template #leading>
           <div class="w-6 h-6 rounded-full bg-primary-500 dark:bg-primary-400 flex items-center justify-center -my-1">
             <UIcon :name="item.icon" class="w-4 h-4 text-white dark:text-gray-900" />

docs/components/content/examples/CommandPaletteExampleGroups.vue

@@ -18,17 +18,17 @@ const actions = [
 
 const groups = computed(() => commandPaletteRef.value?.query
   ? [{
-      key: 'users',
-      commands: users
-    }]
+    key: 'users',
+    commands: users
+  }]
   : [{
-      key: 'recent',
-      label: 'Recent searches',
-      commands: users.slice(0, 1)
-    }, {
-      key: 'actions',
-      commands: actions
-    }])
+    key: 'recent',
+    label: 'Recent searches',
+    commands: users.slice(0, 1)
+  }, {
+    key: 'actions',
+    commands: actions
+  }])
 
 function onSelect (option) {
   if (option.click) {

docs/components/content/examples/SelectMenuExampleObjects.vue

@@ -5,22 +5,19 @@ const people = [{
   href: 'https://github.com/benjamincanac',
   target: '_blank',
   avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' }
-},
-{
+}, {
   id: 'Atinux',
   label: 'Atinux',
   href: 'https://github.com/Atinux',
   target: '_blank',
   avatar: { src: 'https://avatars.githubusercontent.com/u/904724?v=4' }
-},
-{
+}, {
   id: 'smarroufin',
   label: 'smarroufin',
   href: 'https://github.com/smarroufin',
   target: '_blank',
   avatar: { src: 'https://avatars.githubusercontent.com/u/7547335?v=4' }
-},
-{
+}, {
   id: 'nobody',
   label: 'Nobody',
   icon: 'i-heroicons-user-circle'

src/runtime/components/elements/Alert.vue

@@ -38,7 +38,7 @@ import { defu } from 'defu'
 import UIcon from '../elements/Icon.vue'
 import UAvatar from '../elements/Avatar.vue'
 import UButton from '../elements/Button.vue'
-import type { Avatar} from '../../types/avatar'
+import type { Avatar } from '../../types/avatar'
 import type { Button } from '../../types/button'
 import { classNames } from '../../utils'
 import { useAppConfig } from '#imports'

src/runtime/components/forms/Toggle.vue

@@ -84,7 +84,7 @@ export default defineComponent({
       }
     })
 
-    const switchClass = computed(()=>{
+    const switchClass = computed(() => {
       return classNames(
         ui.value.base,
         ui.value.rounded,
@@ -93,13 +93,13 @@ export default defineComponent({
       )
     })
 
-    const onIconClass = computed(()=>{
+    const onIconClass = computed(() => {
       return classNames(
         ui.value.icon.on.replaceAll('{color}', props.color)
       )
     })
 
-    const offIconClass = computed(()=>{
+    const offIconClass = computed(() => {
       return classNames(
         ui.value.icon.off.replaceAll('{color}', props.color)
       )

src/runtime/components/layout/Card.vue

@@ -1,6 +1,6 @@
 <template>
   <component
-    :is="$attrs.onSubmit ? 'form': as"
+    :is="$attrs.onSubmit ? 'form' : as"
     :class="[ui.base, ui.rounded, ui.divide, ui.ring, ui.shadow, ui.background]"
     v-bind="$attrs"
   >

src/runtime/components/navigation/CommandPaletteGroup.vue

@@ -123,7 +123,7 @@ export default defineComponent({
       return typeof label === 'function' ? label(props.query) : label
     })
 
-    function highlight (text: string, { indices, value }: { indices: number[][], value:string }): string {
+    function highlight (text: string, { indices, value }: { indices: number[][], value: string }): string {
       if (text === value) {
         return ''
       }

src/runtime/components/overlays/Notification.vue

@@ -47,7 +47,7 @@ import UAvatar from '../elements/Avatar.vue'
 import UButton from '../elements/Button.vue'
 import { useTimer } from '../../composables/useTimer'
 import type { NotificationAction } from '../../types'
-import type { Avatar} from '../../types/avatar'
+import type { Avatar } from '../../types/avatar'
 import type { Button } from '../../types/button'
 import { classNames } from '../../utils'
 import { useAppConfig } from '#imports'

src/runtime/types/avatar.d.ts

@@ -1,7 +1,7 @@
 export interface Avatar {
   src?: string | boolean
   alt?: string
-  text:? string
+  text?: string
   size?: string
   chipColor?: string
   chipVariant?: string