diff --git a/.eslintrc.js b/.eslintrc.js
index dfcc8c78377..aa3d61f2594 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -23,6 +23,7 @@ module.exports = {
     '@typescript-eslint',
     'sonarjs',
     'react',
+    'eslint-plugin-local-rules',
   ],
   rules: {
     'no-var': 'error',
@@ -200,6 +201,16 @@ module.exports = {
 
         // https://github.com/yannickcr/eslint-plugin-react/issues/2415
         // 'react/jsx-curly-spacing': ['error', { when: 'always', spacing: { objectLiterals: 'never' } }],
+        'local-rules/jsx-condition-key': 'error',
+        'local-rules/jsx-curly-spacing': ['error', {
+          when: 'always',
+          spacing: {
+            objectLiterals: 'never',
+            arrayLiterals: 'never',
+            multilineClose: 'never',
+          },
+          children: true,
+        }],
 
         'react/jsx-equals-spacing': 'error',
         'react/jsx-first-prop-new-line': 'error',
diff --git a/eslint-local-rules.js b/eslint-local-rules.js
index 9d080fe5056..6707a95c8e7 100644
--- a/eslint-local-rules.js
+++ b/eslint-local-rules.js
@@ -2,9 +2,7 @@
 const path = require('path')
 
 module.exports = {
-  'no-render-string-reference': {
-    create: require('./scripts/no-render-string-reference'),
-  },
+  'no-render-string-reference': require('./scripts/rules/no-render-string-reference'),
   'jsx-condition-key': {
     create (context) {
       return {
@@ -58,6 +56,7 @@ module.exports = {
       }
     },
   },
+  'jsx-curly-spacing': require('./scripts/rules/jsx-curly-spacing'),
   'jest-global-imports': {
     meta: {
       fixable: 'code',
diff --git a/packages/vuetify/.eslintrc.js b/packages/vuetify/.eslintrc.js
index db3a0908b8c..fcac47ebb62 100644
--- a/packages/vuetify/.eslintrc.js
+++ b/packages/vuetify/.eslintrc.js
@@ -6,9 +6,6 @@ module.exports = {
     __VUETIFY_VERSION__: true,
     __REQUIRED_VUE__: true,
   },
-  plugins: [
-    'eslint-plugin-local-rules',
-  ],
   extends: [
     // 'plugin:import/typescript', // slow, only enable if needed
   ],
@@ -19,7 +16,6 @@ module.exports = {
     // 'vue/html-self-closing': 'off',
     // 'vue/html-closing-bracket-spacing': 'off',
     // 'local-rules/no-render-string-reference': 'error',
-    'local-rules/jsx-condition-key': 'error',
 
     'no-restricted-imports': ['error', {
       paths: [{
diff --git a/packages/vuetify/src/components/VAlert/VAlert.tsx b/packages/vuetify/src/components/VAlert/VAlert.tsx
index 5090e9dca73..5ea655db552 100644
--- a/packages/vuetify/src/components/VAlert/VAlert.tsx
+++ b/packages/vuetify/src/components/VAlert/VAlert.tsx
@@ -173,7 +173,7 @@ export const VAlert = genericComponent<VAlertSlots>()({
               ]}
               style={ textColorStyles.value }
             />
-          ) }
+          )}
 
           { hasPrepend && (
             <VDefaultsProvider
@@ -193,18 +193,18 @@ export const VAlert = genericComponent<VAlertSlots>()({
                 }
               </div>
             </VDefaultsProvider>
-          ) }
+          )}
 
           <div class="v-alert__content">
             { hasTitle && (
               <VAlertTitle key="title">
                 { slots.title ? slots.title() : props.title }
               </VAlertTitle>
-            ) }
+            )}
 
             { hasText && (
               slots.text ? slots.text() : props.text
-            ) }
+            )}
 
             { slots.default?.() }
           </div>
@@ -213,7 +213,7 @@ export const VAlert = genericComponent<VAlertSlots>()({
             <div key="append" class="v-alert__append">
               { slots.append() }
             </div>
-          ) }
+          )}
 
           { hasClose && (
             <VDefaultsProvider
@@ -230,7 +230,7 @@ export const VAlert = genericComponent<VAlertSlots>()({
                 { slots.close?.({ props: closeProps.value }) ?? <VBtn { ...closeProps.value } /> }
               </div>
             </VDefaultsProvider>
-          ) }
+          )}
         </props.tag>
       )
     }
diff --git a/packages/vuetify/src/components/VAlert/__tests__/VAlert.spec.cy.tsx b/packages/vuetify/src/components/VAlert/__tests__/VAlert.spec.cy.tsx
index 051ea217204..758af02295d 100644
--- a/packages/vuetify/src/components/VAlert/__tests__/VAlert.spec.cy.tsx
+++ b/packages/vuetify/src/components/VAlert/__tests__/VAlert.spec.cy.tsx
@@ -22,11 +22,11 @@ describe('VAlert', () => {
     it('supports default color props', () => {
       cy.mount(() => (
         <>
-          {defaultColors.map((color, idx) => (
+          { defaultColors.map((color, idx) => (
             <VAlert color={ color } text={ idx.toString() }>
               { color } alert
             </VAlert>
-          )) }
+          ))}
         </>
       ))
         .get('.v-alert')
diff --git a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
index ed21deada0a..0f443dcef52 100644
--- a/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
+++ b/packages/vuetify/src/components/VAutocomplete/VAutocomplete.tsx
@@ -315,7 +315,7 @@ export const VAutocomplete = genericComponent<new <
                     >
                       { !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? (
                         <VListItem title={ t(props.noDataText) } />
-                      )) }
+                      ))}
 
                       { slots['prepend-item']?.() }
 
@@ -340,11 +340,11 @@ export const VAutocomplete = genericComponent<new <
                             },
                           }}
                         </VListItem>
-                      )) }
+                      ))}
 
                       { slots['append-item']?.() }
                     </VList>
-                  ) }
+                  )}
                 </VMenu>
 
                 { selections.value.map((item, index) => {
@@ -386,13 +386,13 @@ export const VAutocomplete = genericComponent<new <
                               { item.title }
                               { props.multiple && (index < selections.value.length - 1) && (
                                 <span class="v-autocomplete__selection-comma">,</span>
-                              ) }
+                              )}
                             </span>
                           )
                       )}
                     </div>
                   )
-                }) }
+                })}
               </>
             ),
           }}
diff --git a/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.cy.tsx b/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.cy.tsx
index 2780d885800..79068912e11 100644
--- a/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.cy.tsx
+++ b/packages/vuetify/src/components/VAutocomplete/__tests__/VAutocomplete.spec.cy.tsx
@@ -12,8 +12,8 @@ describe('VAutocomplete', () => {
 
     cy.mount(() => (
       <VAutocomplete
-        items={items}
-        modelValue={selectedItems}
+        items={ items }
+        modelValue={ selectedItems }
         chips
         closableChips
         multiple
@@ -34,8 +34,8 @@ describe('VAutocomplete', () => {
 
     cy.mount(() => (
       <VAutocomplete
-        v-model={selectedItems.value}
-        items={items.value}
+        v-model={ selectedItems.value }
+        items={ items.value }
         chips
         multiple
         closableChips
@@ -81,8 +81,8 @@ describe('VAutocomplete', () => {
 
     cy.mount(() => (
       <VAutocomplete
-        v-model={selectedItems.value}
-        items={items.value}
+        v-model={ selectedItems.value }
+        items={ items.value }
         returnObject
         chips
         multiple
@@ -105,8 +105,8 @@ describe('VAutocomplete', () => {
 
     cy.mount(() => (
       <VAutocomplete
-        items={items}
-        modelValue={selectedItems}
+        items={ items }
+        modelValue={ selectedItems }
         readonly
       />
     ))
@@ -132,8 +132,8 @@ describe('VAutocomplete', () => {
     cy.mount(() => (
       <VForm readonly>
         <VAutocomplete
-          items={items}
-          modelValue={selectedItems}
+          items={ items }
+          modelValue={ selectedItems }
           readonly
         />
       </VForm>
@@ -160,8 +160,8 @@ describe('VAutocomplete', () => {
 
       cy.mount(() => (
         <VAutocomplete
-          items={items}
-          modelValue={selectedItems}
+          items={ items }
+          modelValue={ selectedItems }
           hideSelected
           multiple
         />
diff --git a/packages/vuetify/src/components/VBadge/__tests__/VBadge.spec.cy.tsx b/packages/vuetify/src/components/VBadge/__tests__/VBadge.spec.cy.tsx
index bece81899cf..c257895715e 100644
--- a/packages/vuetify/src/components/VBadge/__tests__/VBadge.spec.cy.tsx
+++ b/packages/vuetify/src/components/VBadge/__tests__/VBadge.spec.cy.tsx
@@ -26,7 +26,7 @@ const stories = {
   'Default badge': <VBadge />,
   'Icon badge': <VBadge icon="mdi-vuetify" />,
   'Offset badge': gridOn(['offsetX', 'offsetY'], offset, (xy, offset) => (
-      <VBadge {...{ [xy]: offset }} content={ `${offset}` }>
+      <VBadge { ...{ [xy]: offset } } content={ `${offset}` }>
         <VBtn>
           { xy }
         </VBtn>
@@ -47,11 +47,11 @@ describe('VBadge', () => {
     it('supports default color props', () => {
       cy.mount(() => (
         <>
-          {defaultColors.map((color, idx) => (
+          { defaultColors.map((color, idx) => (
             <VBadge color={ color } content={ idx.toString() }>
               { color } badge
             </VBadge>
-          )) }
+          ))}
         </>
       ))
         .get('.v-badge')
@@ -94,11 +94,11 @@ describe('VBadge', () => {
     it('supports default text color props', () => {
       cy.mount(() => (
         <>
-          {defaultColors.map((color, idx) => (
+          { defaultColors.map((color, idx) => (
             <VBadge textColor={ color } content={ idx.toString() }>
               { color } text badge
             </VBadge>
-          )) }
+          ))}
         </>
       ))
         .get('.v-badge')
diff --git a/packages/vuetify/src/components/VBanner/VBanner.tsx b/packages/vuetify/src/components/VBanner/VBanner.tsx
index d9a70e4f367..e5126f5d722 100644
--- a/packages/vuetify/src/components/VBanner/VBanner.tsx
+++ b/packages/vuetify/src/components/VBanner/VBanner.tsx
@@ -121,14 +121,14 @@ export const VBanner = genericComponent<VBannerSlots>()({
                 }
               </div>
             </VDefaultsProvider>
-          ) }
+          )}
 
           <div class="v-banner__content">
             { hasText && (
               <VBannerText key="text">
                 { slots.text ? slots.text() : props.text }
               </VBannerText>
-            ) }
+            )}
 
             { slots.default?.() }
           </div>
@@ -137,7 +137,7 @@ export const VBanner = genericComponent<VBannerSlots>()({
             <VBannerActions>
               { slots.actions() }
             </VBannerActions>
-          ) }
+          )}
         </props.tag>
       )
     })
diff --git a/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.tsx b/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.tsx
index 168f73b5420..108a9a9e675 100644
--- a/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.tsx
+++ b/packages/vuetify/src/components/VBottomNavigation/VBottomNavigation.tsx
@@ -124,7 +124,7 @@ export const VBottomNavigation = genericComponent()({
             <div class="v-bottom-navigation__content">
               { slots.default() }
             </div>
-          ) }
+          )}
         </props.tag>
       )
     })
diff --git a/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.tsx b/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.tsx
index 0bb1de3ed70..58ff22719ff 100644
--- a/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.tsx
+++ b/packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.tsx
@@ -109,7 +109,7 @@ export const VBreadcrumbs = genericComponent<new <T>() => {
                 }
               </div>
             </VDefaultsProvider>
-          ) }
+          )}
 
           { props.items.map((item, index, array) => (
             <>
@@ -128,9 +128,9 @@ export const VBreadcrumbs = genericComponent<new <T>() => {
                     default: slots.divider ? () => slots.divider?.({ item, index }) : undefined,
                   }}
                 />
-              ) }
+              )}
             </>
-          )) }
+          ))}
 
           { slots.default?.() }
         </props.tag>
diff --git a/packages/vuetify/src/components/VBreadcrumbs/__tests__/VBreadcrumbs.spec.cy.tsx b/packages/vuetify/src/components/VBreadcrumbs/__tests__/VBreadcrumbs.spec.cy.tsx
index d561f7873b8..081217cf5c8 100644
--- a/packages/vuetify/src/components/VBreadcrumbs/__tests__/VBreadcrumbs.spec.cy.tsx
+++ b/packages/vuetify/src/components/VBreadcrumbs/__tests__/VBreadcrumbs.spec.cy.tsx
@@ -10,7 +10,7 @@ describe('VBreadcrumbs', () => {
   it('should use item slot', () => {
     cy.mount(() => (
       <Application>
-        <VBreadcrumbs items={ ['hello', 'world']}>
+        <VBreadcrumbs items={['hello', 'world']}>
           {{
             title: ({ item }: any) => `${item}!`,
           }}
@@ -24,7 +24,7 @@ describe('VBreadcrumbs', () => {
   it('should use divider slot', () => {
     cy.mount(() => (
       <Application>
-        <VBreadcrumbs items={ ['hello', 'world'] }>
+        <VBreadcrumbs items={['hello', 'world']}>
           {{
             divider: () => '-',
           }}
@@ -38,7 +38,7 @@ describe('VBreadcrumbs', () => {
   it('should render icon', () => {
     cy.mount(() => (
       <Application>
-        <VBreadcrumbs items={ ['hello', 'world'] } icon="mdi-home"></VBreadcrumbs>
+        <VBreadcrumbs items={['hello', 'world']} icon="mdi-home"></VBreadcrumbs>
       </Application>
     ))
 
@@ -48,7 +48,7 @@ describe('VBreadcrumbs', () => {
   it('should use bg-color', () => {
     cy.mount(() => (
       <Application>
-        <VBreadcrumbs items={ ['hello', 'world'] } bgColor="primary"></VBreadcrumbs>
+        <VBreadcrumbs items={['hello', 'world']} bgColor="primary"></VBreadcrumbs>
       </Application>
     ))
 
@@ -58,7 +58,7 @@ describe('VBreadcrumbs', () => {
   it('should use color', () => {
     cy.mount(() => (
       <Application>
-        <VBreadcrumbs items={ ['hello', 'world'] } color="primary"></VBreadcrumbs>
+        <VBreadcrumbs items={['hello', 'world']} color="primary"></VBreadcrumbs>
       </Application>
     ))
 
@@ -68,7 +68,7 @@ describe('VBreadcrumbs', () => {
   it('should render link if href is set', () => {
     cy.mount(() => (
       <Application>
-        <VBreadcrumbs items={ [{ text: 'hello', href: '/hello' }, { text: 'world', href: '/world' }] }></VBreadcrumbs>
+        <VBreadcrumbs items={[{ text: 'hello', href: '/hello' }, { text: 'world', href: '/world' }]}></VBreadcrumbs>
       </Application>
     ))
 
@@ -92,7 +92,7 @@ describe('VBreadcrumbs', () => {
 
     cy.mount(() => (
       <Application>
-        <VBreadcrumbs items={ [{ text: 'about', to: '/about' }, { text: 'something', to: '/something' }] }></VBreadcrumbs>
+        <VBreadcrumbs items={[{ text: 'about', to: '/about' }, { text: 'something', to: '/something' }]}></VBreadcrumbs>
       </Application>
     ), {
       global: {
@@ -148,7 +148,7 @@ describe('VBreadcrumbs', () => {
   it('should disabled last item by default if using items prop', () => {
     cy.mount(() => (
       <Application>
-        <VBreadcrumbs items={ ['foo', 'bar'] }></VBreadcrumbs>
+        <VBreadcrumbs items={['foo', 'bar']}></VBreadcrumbs>
       </Application>
     ))
 
@@ -158,7 +158,7 @@ describe('VBreadcrumbs', () => {
   it('should be possible to override last item disabled by default', () => {
     cy.mount(() => (
       <Application>
-        <VBreadcrumbs items={ ['foo', { text: 'bar', disabled: false }] }></VBreadcrumbs>
+        <VBreadcrumbs items={['foo', { text: 'bar', disabled: false }]}></VBreadcrumbs>
       </Application>
     ))
 
diff --git a/packages/vuetify/src/components/VBtn/VBtn.tsx b/packages/vuetify/src/components/VBtn/VBtn.tsx
index e2c89f95fdb..24b4d8b57da 100644
--- a/packages/vuetify/src/components/VBtn/VBtn.tsx
+++ b/packages/vuetify/src/components/VBtn/VBtn.tsx
@@ -184,7 +184,7 @@ export const VBtn = genericComponent<VBtnSlots>()({
 
             link.navigate?.(e)
             group?.toggle()
-          } }
+          }}
           value={ valueAttr.value }
         >
           { genOverlays(true, 'v-btn') }
@@ -202,7 +202,7 @@ export const VBtn = genericComponent<VBtnSlots>()({
                 { slots.prepend?.() ?? (<VIcon />) }
               </span>
             </VDefaultsProvider>
-          ) }
+          )}
 
           <span class="v-btn__content" data-no-activator="">
             <VDefaultsProvider
@@ -217,7 +217,7 @@ export const VBtn = genericComponent<VBtnSlots>()({
                 hasIcon && (
                   <VIcon key="icon" />
                 )
-              ) }
+              )}
             </VDefaultsProvider>
           </span>
 
@@ -234,7 +234,7 @@ export const VBtn = genericComponent<VBtnSlots>()({
                 { slots.append?.() ?? (<VIcon />) }
               </span>
             </VDefaultsProvider>
-          ) }
+          )}
 
           { !!props.loading && (
             <span key="loader" class="v-btn__loader">
@@ -245,9 +245,9 @@ export const VBtn = genericComponent<VBtnSlots>()({
                   size="23"
                   width="2"
                 />
-              ) }
+              )}
             </span>
-          ) }
+          )}
         </Tag>
       )
     })
diff --git a/packages/vuetify/src/components/VBtn/__tests__/VBtn.spec.cy.tsx b/packages/vuetify/src/components/VBtn/__tests__/VBtn.spec.cy.tsx
index f8329f937c4..22c310f2a2c 100644
--- a/packages/vuetify/src/components/VBtn/__tests__/VBtn.spec.cy.tsx
+++ b/packages/vuetify/src/components/VBtn/__tests__/VBtn.spec.cy.tsx
@@ -54,11 +54,11 @@ describe('VBtn', () => {
     it('supports default color props', () => {
       cy.mount(() => (
         <>
-          {colors.map(color => (
+          { colors.map(color => (
             <VBtn color={ color } class="text-capitalize">
               { color } button
             </VBtn>
-          )) }
+          ))}
         </>
       ))
         .get('button')
@@ -223,28 +223,28 @@ describe('VBtn', () => {
     it('should pass string values', () => {
       const stringValue = 'Foobar'
 
-      cy.mount(<VBtn value={stringValue}></VBtn>)
+      cy.mount(<VBtn value={ stringValue }></VBtn>)
         .get('button')
         .should('have.value', stringValue)
     })
 
     it('should stringify object', () => {
       const objectValue = { value: {} }
-      cy.mount(<VBtn value={objectValue}></VBtn>)
+      cy.mount(<VBtn value={ objectValue }></VBtn>)
         .get('button')
         .should('have.value', JSON.stringify(objectValue, null, 0))
     })
 
     it('should stringify number', () => {
       const numberValue = 15
-      cy.mount(<VBtn value={numberValue}></VBtn>)
+      cy.mount(<VBtn value={ numberValue }></VBtn>)
         .get('button')
         .should('have.value', JSON.stringify(numberValue, null, 0))
     })
 
     it('should stringify array', () => {
       const arrayValue = ['foo', 'bar']
-      cy.mount(<VBtn value={arrayValue}></VBtn>)
+      cy.mount(<VBtn value={ arrayValue }></VBtn>)
         .get('button')
         .should('have.value', JSON.stringify(arrayValue, null, 0))
     })
diff --git a/packages/vuetify/src/components/VBtnGroup/__tests__/VBtnGroup.spec.cy.tsx b/packages/vuetify/src/components/VBtnGroup/__tests__/VBtnGroup.spec.cy.tsx
index 59288c9c38f..ba1c71efdab 100644
--- a/packages/vuetify/src/components/VBtnGroup/__tests__/VBtnGroup.spec.cy.tsx
+++ b/packages/vuetify/src/components/VBtnGroup/__tests__/VBtnGroup.spec.cy.tsx
@@ -20,7 +20,7 @@ describe('VBtnGroup', () => {
               <VBtn>Button 2</VBtn>
               <VBtn>Button 3</VBtn>
             </VBtnGroup>
-          )) }
+          ))}
         </>
       ))
         .get('.v-btn-group')
@@ -38,7 +38,7 @@ describe('VBtnGroup', () => {
               <VBtn>Button 2</VBtn>
               <VBtn>Button 3</VBtn>
             </VBtnGroup>
-          )) }
+          ))}
         </>
       ))
         .get('.v-btn-group')
@@ -56,7 +56,7 @@ describe('VBtnGroup', () => {
               <VBtn>Button 2</VBtn>
               <VBtn>Button 3</VBtn>
             </VBtnGroup>
-          )) }
+          ))}
         </>
       ))
         .get('.v-btn-group')
diff --git a/packages/vuetify/src/components/VBtnToggle/VBtnToggle.tsx b/packages/vuetify/src/components/VBtnToggle/VBtnToggle.tsx
index f5d7b93b089..6cdac61d20f 100644
--- a/packages/vuetify/src/components/VBtnToggle/VBtnToggle.tsx
+++ b/packages/vuetify/src/components/VBtnToggle/VBtnToggle.tsx
@@ -52,7 +52,7 @@ export const VBtnToggle = genericComponent<VBtnToggleSlots>()({
             prev,
             select,
             selected,
-          } as DefaultBtnToggleSlot) }
+          } as DefaultBtnToggleSlot)}
         </VBtnGroup>
       )
     })
diff --git a/packages/vuetify/src/components/VCard/VCard.tsx b/packages/vuetify/src/components/VCard/VCard.tsx
index 3ca0ec3efcd..a6a81a47404 100644
--- a/packages/vuetify/src/components/VCard/VCard.tsx
+++ b/packages/vuetify/src/components/VCard/VCard.tsx
@@ -162,7 +162,7 @@ export const VCard = genericComponent<VCardSlots>()({
                 { slots.image?.() ?? <VImg /> }
               </div>
             </VDefaultsProvider>
-          ) }
+          )}
 
           <LoaderSlot
             name="v-card"
@@ -189,19 +189,19 @@ export const VCard = genericComponent<VCardSlots>()({
                 append: slots.append,
               }}
             </VCardItem>
-          ) }
+          )}
 
           { hasText && (
             <VCardText key="text">
               { slots.text?.() ?? props.text }
             </VCardText>
-          ) }
+          )}
 
           { slots.default?.() }
 
           { slots.actions && (
             <VCardActions v-slots={{ default: slots.actions }} />
-          ) }
+          )}
 
           { genOverlays(isClickable.value, 'v-card') }
         </Tag>
diff --git a/packages/vuetify/src/components/VCard/VCardItem.tsx b/packages/vuetify/src/components/VCard/VCardItem.tsx
index 728588927db..127f205e97c 100644
--- a/packages/vuetify/src/components/VCard/VCardItem.tsx
+++ b/packages/vuetify/src/components/VCard/VCardItem.tsx
@@ -64,20 +64,20 @@ export const VCardItem = genericComponent<VCardItemSlots>()({
                 { slots.prepend?.() ?? (<VAvatar />) }
               </div>
             </VDefaultsProvider>
-          ) }
+          )}
 
           <div class="v-card-item__content">
             { hasTitle && (
               <VCardTitle key="title">
-                { slots.title?.() ?? props.title}
+                { slots.title?.() ?? props.title }
               </VCardTitle>
-            ) }
+            )}
 
             { hasSubtitle && (
               <VCardSubtitle key="subtitle">
                 { slots.subtitle?.() ?? props.subtitle }
               </VCardSubtitle>
-            ) }
+            )}
 
             { slots.default?.() }
           </div>
@@ -101,7 +101,7 @@ export const VCardItem = genericComponent<VCardItemSlots>()({
                 { slots.append?.() ?? (<VAvatar />) }
               </div>
             </VDefaultsProvider>
-          ) }
+          )}
         </div>
       )
     })
diff --git a/packages/vuetify/src/components/VCarousel/VCarousel.tsx b/packages/vuetify/src/components/VCarousel/VCarousel.tsx
index 369d6a4e904..f732f1781b1 100644
--- a/packages/vuetify/src/components/VCarousel/VCarousel.tsx
+++ b/packages/vuetify/src/components/VCarousel/VCarousel.tsx
@@ -132,9 +132,9 @@ export const VCarousel = genericComponent<VWindowSlots>()({
                         return slots.item
                           ? slots.item({ props, item })
                           : (<VBtn { ...item } { ...props } />)
-                      }) }
+                      })}
                     </VDefaultsProvider>
-                  ) }
+                  )}
                 </div>
               )}
 
diff --git a/packages/vuetify/src/components/VChip/VChip.tsx b/packages/vuetify/src/components/VChip/VChip.tsx
index f051ff541c7..8c6416aa085 100644
--- a/packages/vuetify/src/components/VChip/VChip.tsx
+++ b/packages/vuetify/src/components/VChip/VChip.tsx
@@ -185,7 +185,7 @@ export const VChip = genericComponent<VChipSlots>()({
           tabindex={ isClickable.value ? 0 : undefined }
           onClick={ onClick }
           onKeydown={ isClickable.value && !isLink.value && onKeyDown }
-          v-ripple={ [isClickable.value && props.ripple, null] }
+          v-ripple={[isClickable.value && props.ripple, null]}
         >
           { genOverlays(isClickable.value, 'v-chip') }
 
@@ -205,7 +205,7 @@ export const VChip = genericComponent<VChipSlots>()({
                 </div>
               </VExpandXTransition>
             </VDefaultsProvider>
-          ) }
+          )}
 
           { hasPrepend && (
             <VDefaultsProvider
@@ -230,7 +230,7 @@ export const VChip = genericComponent<VChipSlots>()({
                 : undefined
               }
             </VDefaultsProvider>
-          ) }
+          )}
 
           { slots.default?.({
             isSelected: group?.isSelected.value,
@@ -264,7 +264,7 @@ export const VChip = genericComponent<VChipSlots>()({
                 : undefined
               }
             </VDefaultsProvider>
-          ) }
+          )}
 
           { hasClose && (
             <VDefaultsProvider
@@ -284,7 +284,7 @@ export const VChip = genericComponent<VChipSlots>()({
                 { slots.close ? slots.close() : (<VIcon />) }
               </div>
             </VDefaultsProvider>
-          ) }
+          )}
         </Tag>
       )
     }
diff --git a/packages/vuetify/src/components/VChipGroup/VChipGroup.tsx b/packages/vuetify/src/components/VChipGroup/VChipGroup.tsx
index f5306974d0a..a72c6ba77ee 100644
--- a/packages/vuetify/src/components/VChipGroup/VChipGroup.tsx
+++ b/packages/vuetify/src/components/VChipGroup/VChipGroup.tsx
@@ -67,7 +67,7 @@ export const VChipGroup = genericComponent()({
           next,
           prev,
           selected: selected.value,
-        }) }
+        })}
       </props.tag>
     ))
 
diff --git a/packages/vuetify/src/components/VColorPicker/VColorPicker.tsx b/packages/vuetify/src/components/VColorPicker/VColorPicker.tsx
index 3d69f7e0985..5c36c4af085 100644
--- a/packages/vuetify/src/components/VColorPicker/VColorPicker.tsx
+++ b/packages/vuetify/src/components/VColorPicker/VColorPicker.tsx
@@ -140,7 +140,7 @@ export const VColorPicker = defineComponent({
             width={ props.width }
             height={ props.canvasHeight }
           />
-        ) }
+        )}
 
         { (!props.hideSliders || !props.hideInputs) && (
           <div key="controls" class="v-color-picker__controls">
@@ -152,7 +152,7 @@ export const VColorPicker = defineComponent({
                 hideAlpha={ !mode.value.endsWith('a') }
                 disabled={ props.disabled }
               />
-            ) }
+            )}
 
             { !props.hideInputs && (
               <VColorPickerEdit
@@ -164,9 +164,9 @@ export const VColorPicker = defineComponent({
                 onUpdate:color={ updateColor }
                 disabled={ props.disabled }
               />
-            ) }
+            )}
           </div>
-        ) }
+        )}
 
         { props.showSwatches && (
           <VColorPickerSwatches
@@ -177,7 +177,7 @@ export const VColorPicker = defineComponent({
             swatches={ props.swatches }
             disabled={ props.disabled }
           />
-        ) }
+        )}
       </VSheet>
     ))
 
diff --git a/packages/vuetify/src/components/VColorPicker/VColorPickerEdit.tsx b/packages/vuetify/src/components/VColorPicker/VColorPickerEdit.tsx
index a849d07444d..3a6f130775c 100644
--- a/packages/vuetify/src/components/VColorPicker/VColorPickerEdit.tsx
+++ b/packages/vuetify/src/components/VColorPicker/VColorPickerEdit.tsx
@@ -18,7 +18,7 @@ const VColorPickerInput = ({ label, ...rest }: any) => {
     <div
       class="v-color-picker-edit__input"
     >
-      <input {...rest} />
+      <input { ...rest } />
       <span>{ label }</span>
     </div>
   )
@@ -81,8 +81,8 @@ export const VColorPickerEdit = defineComponent({
         class="v-color-picker-edit"
       >
         { inputs.value?.map(props => (
-          <VColorPickerInput {...props} />
-        )) }
+          <VColorPickerInput { ...props } />
+        ))}
         { enabledModes.value.length > 1 && (
           <VBtn
             icon="$unfold"
@@ -92,9 +92,9 @@ export const VColorPickerEdit = defineComponent({
               const mi = enabledModes.value.findIndex(m => m.name === props.mode)
 
               emit('update:mode', enabledModes.value[(mi + 1) % enabledModes.value.length].name)
-            } }
+            }}
           />
-        ) }
+        )}
       </div>
     ))
 
diff --git a/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.tsx b/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.tsx
index 7fc68d7068b..315079e1591 100644
--- a/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.tsx
+++ b/packages/vuetify/src/components/VColorPicker/VColorPickerPreview.tsx
@@ -70,7 +70,7 @@ export const VColorPickerPreview = defineComponent({
               trackFillColor="white"
               hideDetails
             />
-          ) }
+          )}
         </div>
       </div>
     ))
diff --git a/packages/vuetify/src/components/VColorPicker/VColorPickerSwatches.tsx b/packages/vuetify/src/components/VColorPicker/VColorPickerSwatches.tsx
index 144c1fe0965..9926177d4a4 100644
--- a/packages/vuetify/src/components/VColorPicker/VColorPickerSwatches.tsx
+++ b/packages/vuetify/src/components/VColorPicker/VColorPickerSwatches.tsx
@@ -69,17 +69,17 @@ export const VColorPickerSwatches = defineComponent({
                 return (
                   <div
                     class="v-color-picker-swatches__color"
-                    onClick={() => hsva && emit('update:color', hsva)}
+                    onClick={ () => hsva && emit('update:color', hsva) }
                   >
                     <div style={{ background: color }}>
                       { props.color && deepEqual(props.color, hsva)
-                        ? <VIcon size="x-small" icon="$success" color={getContrast(color, '#FFFFFF') > 2 ? 'white' : 'black' } />
+                        ? <VIcon size="x-small" icon="$success" color={ getContrast(color, '#FFFFFF') > 2 ? 'white' : 'black' } />
                         : undefined
                       }
                     </div>
                   </div>
                 )
-              }) }
+              })}
             </div>
           ))}
         </div>
diff --git a/packages/vuetify/src/components/VCombobox/VCombobox.tsx b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
index 0ff313db918..2952b357ddd 100644
--- a/packages/vuetify/src/components/VCombobox/VCombobox.tsx
+++ b/packages/vuetify/src/components/VCombobox/VCombobox.tsx
@@ -395,7 +395,7 @@ export const VCombobox = genericComponent<new <
                     >
                       { !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? (
                         <VListItem title={ t(props.noDataText) } />
-                      )) }
+                      ))}
 
                       { slots['prepend-item']?.() }
 
@@ -420,11 +420,11 @@ export const VCombobox = genericComponent<new <
                             },
                           }}
                         </VListItem>
-                      )) }
+                      ))}
 
                       { slots['append-item']?.() }
                     </VList>
-                  ) }
+                  )}
                 </VMenu>
 
                 { selections.value.map((item, index) => {
@@ -476,13 +476,13 @@ export const VCombobox = genericComponent<new <
                               { item.title }
                               { props.multiple && (index < selections.value.length - 1) && (
                                 <span class="v-combobox__selection-comma">,</span>
-                              ) }
+                              )}
                             </span>
                           )
-                      ) }
+                      )}
                     </div>
                   )
-                }) }
+                })}
               </>
             ),
           }}
diff --git a/packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.cy.tsx b/packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.cy.tsx
index b4cdbf7f669..33db0e57105 100644
--- a/packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.cy.tsx
+++ b/packages/vuetify/src/components/VCombobox/__tests__/VCombobox.spec.cy.tsx
@@ -21,7 +21,7 @@ describe('VCombobox', () => {
       ]
 
       cy.mount(() => (
-        <VCombobox items={items} modelValue={selectedItems} multiple closableChips chips />
+        <VCombobox items={ items } modelValue={ selectedItems } multiple closableChips chips />
       ))
         .get('.v-chip__close')
         .eq(0)
@@ -168,7 +168,7 @@ describe('VCombobox', () => {
       ]
 
       cy.mount(() => (
-        <VCombobox items={items} />
+        <VCombobox items={ items } />
       ))
         .get('input')
         .type('Item')
@@ -194,7 +194,7 @@ describe('VCombobox', () => {
       ]
 
       cy.mount(() => (
-        <VCombobox items={items} multiple />
+        <VCombobox items={ items } multiple />
       ))
         .get('input')
         .type('Item')
@@ -225,7 +225,7 @@ describe('VCombobox', () => {
 
       cy.mount(() => (
         <VCombobox
-          items={items}
+          items={ items }
           item-value="id"
           item-title="name"
         />
@@ -253,7 +253,7 @@ describe('VCombobox', () => {
       const selectedItems = ref(['California', 'Colorado'])
 
       cy.mount(() => (
-        <VCombobox v-model={selectedItems.value} items={items.value} multiple chips closableChips />
+        <VCombobox v-model={ selectedItems.value } items={ items.value } multiple chips closableChips />
       ))
 
       cy.get('.v-combobox input').click()
@@ -301,8 +301,8 @@ describe('VCombobox', () => {
 
       cy.mount(() => (
         <VCombobox
-          v-model={selectedItems.value}
-          items={items.value}
+          v-model={ selectedItems.value }
+          items={ items.value }
           multiple
           chips
           closableChips
@@ -336,8 +336,8 @@ describe('VCombobox', () => {
 
       cy.mount(() => (
         <VCombobox
-          items={items}
-          modelValue={selectedItems}
+          items={ items }
+          modelValue={ selectedItems }
           readonly
         />
       ))
@@ -363,8 +363,8 @@ describe('VCombobox', () => {
       cy.mount(() => (
         <VForm readonly>
           <VCombobox
-            items={items}
-            modelValue={selectedItems}
+            items={ items }
+            modelValue={ selectedItems }
             readonly
           />
         </VForm>
@@ -399,7 +399,7 @@ describe('VCombobox', () => {
       ]
 
       cy.mount(() => (
-        <VCombobox items={items} modelValue={selectedItems} multiple hideSelected />
+        <VCombobox items={ items } modelValue={ selectedItems } multiple hideSelected />
       ))
 
       cy.get('.v-combobox input').click()
diff --git a/packages/vuetify/src/components/VDivider/VDivider.tsx b/packages/vuetify/src/components/VDivider/VDivider.tsx
index e16104ee724..34196383a08 100644
--- a/packages/vuetify/src/components/VDivider/VDivider.tsx
+++ b/packages/vuetify/src/components/VDivider/VDivider.tsx
@@ -62,7 +62,7 @@ export const VDivider = genericComponent()({
             ? props.vertical ? 'vertical' : 'horizontal'
             : undefined
         }
-        role={`${attrs.role || 'separator'}`}
+        role={ `${attrs.role || 'separator'}` }
       />
     ))
 
diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.tsx b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.tsx
index dde6dbc47bb..d14575befc7 100644
--- a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.tsx
+++ b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.tsx
@@ -105,13 +105,13 @@ export const VExpansionPanel = genericComponent<VExpansionPanelSlots>()({
             >
               { slots.title ? slots.title() : props.title }
             </VExpansionPanelTitle>
-          ) }
+          )}
 
           { hasText && (
             <VExpansionPanelText key="text" eager={ props.eager }>
               { slots.text ? slots.text() : props.text }
             </VExpansionPanelText>
-          ) }
+          )}
 
           { slots.default?.() }
         </props.tag>
diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelText.tsx b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelText.tsx
index e301a3b03b1..165ecbe5405 100644
--- a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelText.tsx
+++ b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelText.tsx
@@ -33,7 +33,7 @@ export const VExpansionPanelText = genericComponent()({
             <div class="v-expansion-panel-text__wrapper">
               { slots.default?.() }
             </div>
-          ) }
+          )}
         </div>
       </VExpandTransition>
     ))
diff --git a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelTitle.tsx b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelTitle.tsx
index 4b18a0e2615..11f9804e839 100644
--- a/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelTitle.tsx
+++ b/packages/vuetify/src/components/VExpansionPanel/VExpansionPanelTitle.tsx
@@ -96,7 +96,7 @@ export const VExpansionPanelTitle = genericComponent<VExpansionPanelTitleSlots>(
               : <VIcon icon={ expansionPanel.isSelected.value ? props.collapseIcon : props.expandIcon } />
             }
           </span>
-        ) }
+        )}
       </button>
     ))
 
diff --git a/packages/vuetify/src/components/VExpansionPanel/__tests__/VExpansionPanels.spec.cy.tsx b/packages/vuetify/src/components/VExpansionPanel/__tests__/VExpansionPanels.spec.cy.tsx
index 79578a87865..a44e04c27cb 100644
--- a/packages/vuetify/src/components/VExpansionPanel/__tests__/VExpansionPanels.spec.cy.tsx
+++ b/packages/vuetify/src/components/VExpansionPanel/__tests__/VExpansionPanels.spec.cy.tsx
@@ -12,8 +12,8 @@ describe('VExpansionPanels', () => {
       <CenteredGrid width="200px">
         <VExpansionPanels>
           { titles.map(title => (
-            <VExpansionPanel title={title} text="Content" />
-          )) }
+            <VExpansionPanel title={ title } text="Content" />
+          ))}
         </VExpansionPanels>
       </CenteredGrid>
     ))
@@ -36,7 +36,7 @@ describe('VExpansionPanels', () => {
                 text: () => 'Content',
               }}
             </VExpansionPanel>
-          )) }
+          ))}
         </VExpansionPanels>
       </CenteredGrid>
     ))
@@ -57,7 +57,7 @@ describe('VExpansionPanels', () => {
               <VExpansionPanelTitle>{ title }</VExpansionPanelTitle>
               <VExpansionPanelText>Content</VExpansionPanelText>
             </VExpansionPanel>
-          )) }
+          ))}
         </VExpansionPanels>
       </CenteredGrid>
     ))
@@ -136,11 +136,11 @@ describe('VExpansionPanels', () => {
     const foo = ref()
     cy.mount(() => (
       <CenteredGrid width="200px">
-        <VExpansionPanels modelValue={foo.value} onUpdate:modelValue={v => foo.value = v}>
+        <VExpansionPanels modelValue={ foo.value } onUpdate:modelValue={ v => foo.value = v }>
           <VExpansionPanel value="bar" title="Header" text="Content" />
           <VExpansionPanel value="foo" title="Header" text="Content" />
         </VExpansionPanels>
-        <div class="value">{foo.value}</div>
+        <div class="value">{ foo.value }</div>
       </CenteredGrid>
     ))
       .get('.v-expansion-panel-title')
diff --git a/packages/vuetify/src/components/VField/VField.tsx b/packages/vuetify/src/components/VField/VField.tsx
index 11e1ae7dbe5..0634a3cd248 100644
--- a/packages/vuetify/src/components/VField/VField.tsx
+++ b/packages/vuetify/src/components/VField/VField.tsx
@@ -251,14 +251,14 @@ export const VField = genericComponent<new <T>() => {
             <div key="prepend" class="v-field__prepend-inner">
               { props.prependInnerIcon && (
                 <InputIcon key="prepend-icon" name="prependInner" />
-              ) }
+              )}
 
               { slots['prepend-inner']?.(slotProps.value) }
             </div>
-          ) }
+          )}
 
           <div class="v-field__field" data-no-activator="">
-            { ['solo', 'filled'].includes(props.variant) && hasLabel.value && (
+            {['solo', 'filled'].includes(props.variant) && hasLabel.value && (
               <VFieldLabel
                 key="floating-label"
                 ref={ floatingLabelRef }
@@ -268,7 +268,7 @@ export const VField = genericComponent<new <T>() => {
               >
                 { label }
               </VFieldLabel>
-            ) }
+            )}
 
             <VFieldLabel ref={ labelRef } for={ id.value }>
               { label }
@@ -283,7 +283,7 @@ export const VField = genericComponent<new <T>() => {
               },
               focus,
               blur,
-            } as VFieldSlot) }
+            } as VFieldSlot)}
           </div>
 
           { hasClear && (
@@ -298,7 +298,7 @@ export const VField = genericComponent<new <T>() => {
                 }
               </div>
             </VExpandXTransition>
-          ) }
+          )}
 
           { hasAppend && (
             <div key="append" class="v-field__append-inner">
@@ -306,9 +306,9 @@ export const VField = genericComponent<new <T>() => {
 
               { props.appendInnerIcon && (
                 <InputIcon key="append-icon" name="appendInner" />
-              ) }
+              )}
             </div>
-          ) }
+          )}
 
           <div
             class={[
@@ -326,17 +326,17 @@ export const VField = genericComponent<new <T>() => {
                       { label }
                     </VFieldLabel>
                   </div>
-                ) }
+                )}
 
                 <div class="v-field__outline__end" />
               </>
-            ) }
+            )}
 
-            { ['plain', 'underlined'].includes(props.variant) && hasLabel.value && (
+            {['plain', 'underlined'].includes(props.variant) && hasLabel.value && (
               <VFieldLabel ref={ floatingLabelRef } floating for={ id.value }>
                 { label }
               </VFieldLabel>
-            ) }
+            )}
           </div>
         </div>
       )
diff --git a/packages/vuetify/src/components/VFileInput/VFileInput.tsx b/packages/vuetify/src/components/VFileInput/VFileInput.tsx
index 5acd52fc9a6..c4a91126307 100644
--- a/packages/vuetify/src/components/VFileInput/VFileInput.tsx
+++ b/packages/vuetify/src/components/VFileInput/VFileInput.tsx
@@ -215,13 +215,13 @@ export const VFileInput = genericComponent<VFileInputSlots>()({
                           e.stopPropagation()
 
                           onFocus()
-                        } }
+                        }}
                         onChange={ e => {
                           if (!e.target) return
 
                           const target = e.target as HTMLInputElement
                           model.value = [...target.files ?? []]
-                        } }
+                        }}
                         onFocus={ onFocus }
                         onBlur={ () => (isFocused.value = false) }
                         { ...slotProps }
@@ -264,7 +264,7 @@ export const VFileInput = genericComponent<VFileInputSlots>()({
                       v-slots:default={ slots.counter }
                     />
                   </>
-                ) }
+                )}
               </>
             ) : undefined,
           }}
diff --git a/packages/vuetify/src/components/VFileInput/__tests__/VFileInput.spec.cy.tsx b/packages/vuetify/src/components/VFileInput/__tests__/VFileInput.spec.cy.tsx
index eb392fea307..ba68b4dc157 100644
--- a/packages/vuetify/src/components/VFileInput/__tests__/VFileInput.spec.cy.tsx
+++ b/packages/vuetify/src/components/VFileInput/__tests__/VFileInput.spec.cy.tsx
@@ -54,7 +54,7 @@ describe('VFileInput', () => {
     const model = ref([oneMBFile, twoMBFile])
     cy.mount(() => (
       <CenteredGrid width="400px">
-        <VFileInput label="foo" v-model={model.value} />
+        <VFileInput label="foo" v-model={ model.value } />
       </CenteredGrid>
     ))
       .get('.v-field__clearable > .v-icon')
@@ -66,7 +66,7 @@ describe('VFileInput', () => {
   it('should support removing clearable icon', () => {
     cy.mount(() => (
       <CenteredGrid width="400px">
-        <VFileInput label="foo" modelValue={[oneMBFile, twoMBFile]} clearable={false} />
+        <VFileInput label="foo" modelValue={[oneMBFile, twoMBFile]} clearable={ false } />
       </CenteredGrid>
     ))
       .get('.v-field__append-inner > .v-btn')
diff --git a/packages/vuetify/src/components/VForm/__tests__/VForm.spec.cy.tsx b/packages/vuetify/src/components/VForm/__tests__/VForm.spec.cy.tsx
index 4ea16d84c23..47cfb71ae33 100644
--- a/packages/vuetify/src/components/VForm/__tests__/VForm.spec.cy.tsx
+++ b/packages/vuetify/src/components/VForm/__tests__/VForm.spec.cy.tsx
@@ -13,7 +13,7 @@ describe('VForm', () => {
     cy.mount(() => (
       <Application>
         <VForm>
-          <VTextField label="Name" rules={ [v => v.length > 10 || 'Name should be longer than 10 characters'] }></VTextField>
+          <VTextField label="Name" rules={[v => v.length > 10 || 'Name should be longer than 10 characters']}></VTextField>
         </VForm>
       </Application>
     ))
@@ -44,8 +44,8 @@ describe('VForm', () => {
     cy.mount(() => (
       <Application>
         <VForm>
-          <VTextField label="Name" rules={ [v => v.length < 10 || 'Name should be longer than 10 characters'] }></VTextField>
-          <VTextField label="Email" rules={ [v => v.length < 10 || 'E-mail should be longer than 10 characters'] }></VTextField>
+          <VTextField label="Name" rules={[v => v.length < 10 || 'Name should be longer than 10 characters']}></VTextField>
+          <VTextField label="Email" rules={[v => v.length < 10 || 'E-mail should be longer than 10 characters']}></VTextField>
         </VForm>
       </Application>
     ))
@@ -74,7 +74,7 @@ describe('VForm', () => {
     cy.mount(() => (
       <Application>
         <VForm ref={ form }>
-          <VTextField label="Name" rules={ [v => !!v || 'Name required'] }></VTextField>
+          <VTextField label="Name" rules={[v => !!v || 'Name required']}></VTextField>
         </VForm>
       </Application>
     ))
@@ -92,7 +92,7 @@ describe('VForm', () => {
     cy.mount(() => (
       <Application>
         <VForm ref={ form }>
-          <VTextField label="Name" rules={ [v => v.length > 10 || 'Name should be longer than 10 characters'] }></VTextField>
+          <VTextField label="Name" rules={[v => v.length > 10 || 'Name should be longer than 10 characters']}></VTextField>
         </VForm>
       </Application>
     ))
@@ -123,7 +123,7 @@ describe('VForm', () => {
     cy.mount(() => (
       <Application>
         <VForm ref={ form }>
-          <VTextField label="Name" rules={ [v => v.length > 10 || 'Name should be longer than 10 characters'] }></VTextField>
+          <VTextField label="Name" rules={[v => v.length > 10 || 'Name should be longer than 10 characters']}></VTextField>
         </VForm>
       </Application>
     ))
@@ -152,7 +152,7 @@ describe('VForm', () => {
   it('should not submit form if validation fails', () => {
     cy.mount(() => (
       <VForm action="/action">
-        <VTextField rules={ [v => !!v || 'Field required'] } />
+        <VTextField rules={[v => !!v || 'Field required']} />
         <VBtn type="submit">Submit</VBtn>
       </VForm>
     ))
@@ -165,7 +165,7 @@ describe('VForm', () => {
     cy.mount(() => (
       <Application>
         <VForm action="/action" onSubmit={ onSubmit }>
-          <VTextField modelValue="foo" rules={ [v => !!v || 'Field required'] } />
+          <VTextField modelValue="foo" rules={[v => !!v || 'Field required']} />
           <VBtn type="submit">Submit</VBtn>
         </VForm>
       </Application>
@@ -189,7 +189,7 @@ describe('VForm', () => {
     cy.mount(() => (
       <Application>
         <VForm ref={ form }>
-          <VTextField rules={ [v => v.length < 4 || 'Error'] } />
+          <VTextField rules={[v => v.length < 4 || 'Error']} />
         </VForm>
       </Application>
     ))
@@ -212,7 +212,7 @@ describe('VForm', () => {
   it.only('should submit form if validation passes', () => {
     cy.mount(() => (
       <VForm action="/__cypress/src/action">
-        <VTextField modelValue="foo" rules={ [v => !!v || 'Field required'] } />
+        <VTextField modelValue="foo" rules={[v => !!v || 'Field required']} />
         <VBtn type="submit">Submit</VBtn>
       </VForm>
     ))
diff --git a/packages/vuetify/src/components/VHover/__tests__/VHover.spec.cy.tsx b/packages/vuetify/src/components/VHover/__tests__/VHover.spec.cy.tsx
index 88038bbd7c3..08db114acd9 100644
--- a/packages/vuetify/src/components/VHover/__tests__/VHover.spec.cy.tsx
+++ b/packages/vuetify/src/components/VHover/__tests__/VHover.spec.cy.tsx
@@ -9,7 +9,7 @@ describe('VHover', () => {
       <CenteredGrid width="200px" class="v-theme--light">
         <VHover>
           {{
-            default: ({ isHovering, props }: any) => <div {...props} class={['hover-element', isHovering && 'bg-primary']}>foobar</div>,
+            default: ({ isHovering, props }: any) => <div { ...props } class={['hover-element', isHovering && 'bg-primary']}>foobar</div>,
           }}
         </VHover>
       </CenteredGrid>
@@ -26,7 +26,7 @@ describe('VHover', () => {
       <CenteredGrid width="200px" class="v-theme--light">
         <VHover disabled>
           {{
-            default: ({ isHovering, props }: any) => <div {...props} class={['hover-element', isHovering && 'bg-primary']}>foobar</div>,
+            default: ({ isHovering, props }: any) => <div { ...props } class={['hover-element', isHovering && 'bg-primary']}>foobar</div>,
           }}
         </VHover>
       </CenteredGrid>
@@ -42,9 +42,9 @@ describe('VHover', () => {
     // eslint-disable-next-line cypress/no-unnecessary-waiting
     cy.mount(() => (
       <CenteredGrid width="200px" class="v-theme--light">
-        <VHover openDelay={100} closeDelay={100}>
+        <VHover openDelay={ 100 } closeDelay={ 100 }>
           {{
-            default: ({ isHovering, props }: any) => <div {...props} class={['hover-element', isHovering && 'bg-primary']}>foobar</div>,
+            default: ({ isHovering, props }: any) => <div { ...props } class={['hover-element', isHovering && 'bg-primary']}>foobar</div>,
           }}
         </VHover>
       </CenteredGrid>
diff --git a/packages/vuetify/src/components/VIcon/__tests__/VIcon.spec.cy.tsx b/packages/vuetify/src/components/VIcon/__tests__/VIcon.spec.cy.tsx
index bcab4aeb91d..345d2b3302b 100644
--- a/packages/vuetify/src/components/VIcon/__tests__/VIcon.spec.cy.tsx
+++ b/packages/vuetify/src/components/VIcon/__tests__/VIcon.spec.cy.tsx
@@ -32,7 +32,7 @@ describe('VIcon', () => {
           defaultSet: 'mdi',
           sets: {
             foo: {
-              component: props => <VClassIcon {...props} />,
+              component: props => <VClassIcon { ...props } />,
             },
           },
         },
@@ -71,7 +71,7 @@ describe('VIcon', () => {
           defaultSet: 'mdi',
           sets: {
             foo: {
-              component: props => <VClassIcon {...props} />,
+              component: props => <VClassIcon { ...props } />,
             },
           },
         },
diff --git a/packages/vuetify/src/components/VInput/VInput.tsx b/packages/vuetify/src/components/VInput/VInput.tsx
index 00309734b23..9167ed25ea9 100644
--- a/packages/vuetify/src/components/VInput/VInput.tsx
+++ b/packages/vuetify/src/components/VInput/VInput.tsx
@@ -137,15 +137,15 @@ export const VInput = genericComponent<VInputSlots>()({
                   key="prepend-icon"
                   name="prepend"
                 />
-              ) }
+              )}
             </div>
-          ) }
+          )}
 
           { slots.default && (
             <div class="v-input__control">
               { slots.default?.(slotProps.value) }
             </div>
-          ) }
+          )}
 
           { hasAppend && (
             <div key="append" class="v-input__append">
@@ -154,11 +154,11 @@ export const VInput = genericComponent<VInputSlots>()({
                   key="append-icon"
                   name="append"
                 />
-              ) }
+              )}
 
               { slots.append?.(slotProps.value) }
             </div>
-          ) }
+          )}
 
           { hasDetails && (
             <div class="v-input__details">
@@ -174,7 +174,7 @@ export const VInput = genericComponent<VInputSlots>()({
 
               { slots.details?.(slotProps.value) }
             </div>
-          ) }
+          )}
         </div>
       )
     })
diff --git a/packages/vuetify/src/components/VInput/__tests__/VInput.spec.cy.tsx b/packages/vuetify/src/components/VInput/__tests__/VInput.spec.cy.tsx
index 2148a670487..8c816ba08fa 100644
--- a/packages/vuetify/src/components/VInput/__tests__/VInput.spec.cy.tsx
+++ b/packages/vuetify/src/components/VInput/__tests__/VInput.spec.cy.tsx
@@ -20,7 +20,7 @@ const stories = Object.fromEntries(Object.entries({
         { cloneVNode(v, { density }) }
         { cloneVNode(v, { density, modelValue: 'Value' }) }
       </div>
-    )) }
+    ))}
   </div>
 )]))
 
diff --git a/packages/vuetify/src/components/VItemGroup/VItemGroup.tsx b/packages/vuetify/src/components/VItemGroup/VItemGroup.tsx
index e15d5b9101f..783d96405bf 100644
--- a/packages/vuetify/src/components/VItemGroup/VItemGroup.tsx
+++ b/packages/vuetify/src/components/VItemGroup/VItemGroup.tsx
@@ -43,7 +43,7 @@ export const VItemGroup = genericComponent()({
           next,
           prev,
           selected: selected.value,
-        }) }
+        })}
       </props.tag>
     )
   },
diff --git a/packages/vuetify/src/components/VItemGroup/__tests__/VItemGroup.spec.cy.tsx b/packages/vuetify/src/components/VItemGroup/__tests__/VItemGroup.spec.cy.tsx
index 4aaffe8c8a7..fd835ae5a06 100644
--- a/packages/vuetify/src/components/VItemGroup/__tests__/VItemGroup.spec.cy.tsx
+++ b/packages/vuetify/src/components/VItemGroup/__tests__/VItemGroup.spec.cy.tsx
@@ -10,12 +10,12 @@ describe('VItemGroup', () => {
       <VItemGroup selected-class="font-weight-bold" class="d-flex text-center justify-center">
         <VItem value="foo" selected-class="bg-blue">
           {{
-            default: props => <VCard width="100" class={props.selectedClass} onClick={props.toggle}>Foo</VCard>,
+            default: props => <VCard width="100" class={ props.selectedClass } onClick={ props.toggle }>Foo</VCard>,
           }}
         </VItem>
         <VItem value="bar" selected-class="bg-orange">
           {{
-            default: props => <VCard width="100" class={props.selectedClass} onClick={props.toggle}>Bar</VCard>,
+            default: props => <VCard width="100" class={ props.selectedClass } onClick={ props.toggle }>Bar</VCard>,
           }}
         </VItem>
       </VItemGroup>
diff --git a/packages/vuetify/src/components/VLayout/__tests__/VLayout.spec.cy.tsx b/packages/vuetify/src/components/VLayout/__tests__/VLayout.spec.cy.tsx
index c80598ffb07..14129a443ee 100644
--- a/packages/vuetify/src/components/VLayout/__tests__/VLayout.spec.cy.tsx
+++ b/packages/vuetify/src/components/VLayout/__tests__/VLayout.spec.cy.tsx
@@ -29,9 +29,9 @@ describe('VLayout', () => {
         <VNavigationDrawer width="200" permanent></VNavigationDrawer>
         <VMain>
           <div>
-            {createRange(10).map(_ => <div>hello</div>)}
+            { createRange(10).map(_ => <div>hello</div>) }
             <nav style="position: sticky; top: var(--v-layout-top); background: grey">Sticky Header</nav>
-            {createRange(100).map(_ => <div>hello</div>)}
+            { createRange(100).map(_ => <div>hello</div>) }
           </div>
         </VMain>
       </VLayout>
@@ -48,9 +48,9 @@ describe('VLayout', () => {
         <VNavigationDrawer width="200" permanent></VNavigationDrawer>
         <VMain scrollable>
           <div>
-            {createRange(10).map(_ => <div>hello</div>)}
+            { createRange(10).map(_ => <div>hello</div>) }
             <nav style="position: sticky; top: 0px; background: grey">Sticky Header</nav>
-            {createRange(100).map(_ => <div>hello</div>)}
+            { createRange(100).map(_ => <div>hello</div>) }
           </div>
         </VMain>
       </VLayout>
diff --git a/packages/vuetify/src/components/VList/VListGroup.tsx b/packages/vuetify/src/components/VList/VListGroup.tsx
index 58e3d202e74..69fe6a44eec 100644
--- a/packages/vuetify/src/components/VList/VListGroup.tsx
+++ b/packages/vuetify/src/components/VList/VListGroup.tsx
@@ -106,7 +106,7 @@ export const VListGroup = genericComponent<VListGroupSlots>()({
               { slots.activator({ props: activatorProps.value, isOpen: isOpen.value }) }
             </VListGroupActivator>
           </VDefaultsProvider>
-        ) }
+        )}
 
         <VExpandTransition>
           <div class="v-list-group__items" role="group" aria-labelledby={ id.value } v-show={ isOpen.value }>
diff --git a/packages/vuetify/src/components/VList/VListItem.tsx b/packages/vuetify/src/components/VList/VListItem.tsx
index f02ca8ca558..d76b2670e96 100644
--- a/packages/vuetify/src/components/VList/VListItem.tsx
+++ b/packages/vuetify/src/components/VList/VListItem.tsx
@@ -215,11 +215,11 @@ export const VListItem = genericComponent<VListItemSlots>()({
             <div key="prepend" class="v-list-item__prepend">
               { props.prependAvatar && (
                 <VAvatar key="prepend-avatar" density={ props.density } image={ props.prependAvatar } />
-              ) }
+              )}
 
               { props.prependIcon && (
                 <VIcon key="prepend-icon" density={ props.density } icon={ props.prependIcon } />
-              ) }
+              )}
 
               { slots.prepend && (
                 <VDefaultsProvider
@@ -240,22 +240,22 @@ export const VListItem = genericComponent<VListItemSlots>()({
                 >
                   { slots.prepend(slotProps.value) }
                 </VDefaultsProvider>
-              ) }
+              )}
             </div>
-          ) }
+          )}
 
           <div class="v-list-item__content" data-no-activator="">
             { hasTitle && (
               <VListItemTitle key="title">
-                { slots.title?.({ title: props.title }) ?? props.title}
+                { slots.title?.({ title: props.title }) ?? props.title }
               </VListItemTitle>
-            ) }
+            )}
 
             { hasSubtitle && (
               <VListItemSubtitle key="subtitle">
                 { slots.subtitle?.({ subtitle: props.subtitle }) ?? props.subtitle }
               </VListItemSubtitle>
-            ) }
+            )}
 
             { slots.default?.(slotProps.value) }
           </div>
diff --git a/packages/vuetify/src/components/VList/VListSubheader.tsx b/packages/vuetify/src/components/VList/VListSubheader.tsx
index 962610d71ef..ba59a7b47c8 100644
--- a/packages/vuetify/src/components/VList/VListSubheader.tsx
+++ b/packages/vuetify/src/components/VList/VListSubheader.tsx
@@ -40,7 +40,7 @@ export const VListSubheader = genericComponent()({
             <div class="v-list-subheader__text">
               { slots.default?.() ?? props.title }
             </div>
-          ) }
+          )}
         </props.tag>
       )
     })
diff --git a/packages/vuetify/src/components/VList/__tests__/VList.spec.cy.tsx b/packages/vuetify/src/components/VList/__tests__/VList.spec.cy.tsx
index 0fcfabe5a16..26f646b42de 100644
--- a/packages/vuetify/src/components/VList/__tests__/VList.spec.cy.tsx
+++ b/packages/vuetify/src/components/VList/__tests__/VList.spec.cy.tsx
@@ -76,7 +76,7 @@ describe('VList', () => {
 
     const wrapper = mountFunction((
       <CenteredGrid width="200px">
-        <VList items={items} opened={['group']} />
+        <VList items={ items } opened={['group']} />
       </CenteredGrid>
     ))
 
@@ -107,7 +107,7 @@ describe('VList', () => {
       <CenteredGrid width="400px">
         <VList items={ items } opened={['group']}>
           {{
-            item: item => <VListItem {...item} prependIcon="mdi-home" />,
+            item: item => <VListItem { ...item } prependIcon="mdi-home" />,
           }}
         </VList>
       </CenteredGrid>
diff --git a/packages/vuetify/src/components/VList/__tests__/VListGroup.spec.cy.tsx b/packages/vuetify/src/components/VList/__tests__/VListGroup.spec.cy.tsx
index 3128ee95e36..89535931f7a 100644
--- a/packages/vuetify/src/components/VList/__tests__/VListGroup.spec.cy.tsx
+++ b/packages/vuetify/src/components/VList/__tests__/VListGroup.spec.cy.tsx
@@ -17,7 +17,7 @@ describe('VListGroup', () => {
 
         <VList>
           <VListGroup>
-            {{ activator: props => <VListItem {...props} title="Group" /> }}
+            {{ activator: props => <VListItem { ...props } title="Group" /> }}
           </VListGroup>
         </VList>
       </CenteredGrid>
@@ -34,7 +34,7 @@ describe('VListGroup', () => {
         <VList opened={['group']}>
           <VListGroup value="group">
             {{
-              activator: props => <VListItem {...props} title="Group" />,
+              activator: props => <VListItem { ...props } title="Group" />,
               default: () => (
                 <>
                   <VListItem title="Child 1" />
diff --git a/packages/vuetify/src/components/VList/__tests__/VListItem.spec.cy.tsx b/packages/vuetify/src/components/VList/__tests__/VListItem.spec.cy.tsx
index ecb61ffb8a6..e58eec018cc 100644
--- a/packages/vuetify/src/components/VList/__tests__/VListItem.spec.cy.tsx
+++ b/packages/vuetify/src/components/VList/__tests__/VListItem.spec.cy.tsx
@@ -31,8 +31,8 @@ describe('VListItem', () => {
 
         return () => (
           <CenteredGrid width="200px">
-            <VListItem title="foo" subtitle="bar" active-color="success" active={model.value} onClick={onClick} />
-            <VListItem title="foo" subtitle="bar" active-color="success" active={!model.value} onClick={onClick} />
+            <VListItem title="foo" subtitle="bar" active-color="success" active={ model.value } onClick={ onClick } />
+            <VListItem title="foo" subtitle="bar" active-color="success" active={ !model.value } onClick={ onClick } />
           </CenteredGrid>
         )
       },
diff --git a/packages/vuetify/src/components/VMessages/VMessages.tsx b/packages/vuetify/src/components/VMessages/VMessages.tsx
index 8c3238ae84b..e52c778fb26 100644
--- a/packages/vuetify/src/components/VMessages/VMessages.tsx
+++ b/packages/vuetify/src/components/VMessages/VMessages.tsx
@@ -68,7 +68,7 @@ export const VMessages = genericComponent<VMessagesSlots>()({
               { slots.message ? slots.message({ message }) : message }
             </div>
           ))
-        ) }
+        )}
       </MaybeTransition>
     ))
 
diff --git a/packages/vuetify/src/components/VOverlay/VOverlay.tsx b/packages/vuetify/src/components/VOverlay/VOverlay.tsx
index b2905cae9d8..bc64c9a2209 100644
--- a/packages/vuetify/src/components/VOverlay/VOverlay.tsx
+++ b/packages/vuetify/src/components/VOverlay/VOverlay.tsx
@@ -241,7 +241,7 @@ export const VOverlay = genericComponent<OverlaySlots>()({
           props: mergeProps({
             ref: activatorRef,
           }, toHandlers(activatorEvents.value), props.activatorProps),
-        }) }
+        })}
 
         { isMounted.value && (
           <Teleport
@@ -275,7 +275,7 @@ export const VOverlay = genericComponent<OverlaySlots>()({
                   persisted
                   transition={ props.transition }
                   target={ activatorEl.value }
-                  onAfterLeave={() => { onAfterLeave(); emit('afterLeave') }}
+                  onAfterLeave={ () => { onAfterLeave(); emit('afterLeave') } }
                 >
                   <div
                     ref={ contentEl }
diff --git a/packages/vuetify/src/components/VPagination/VPagination.tsx b/packages/vuetify/src/components/VPagination/VPagination.tsx
index ef87734638d..0e4a7cd84e6 100644
--- a/packages/vuetify/src/components/VPagination/VPagination.tsx
+++ b/packages/vuetify/src/components/VPagination/VPagination.tsx
@@ -320,15 +320,15 @@ export const VPagination = genericComponent<VPaginationSlots>()({
           { props.showFirstLastPage && (
             <li key="first" class="v-pagination__first" data-test="v-pagination-first">
               { slots.first ? slots.first(controls.value.first) : (
-                <VBtn _as="VPaginationBtn" {...controls.value.first} />
-              ) }
+                <VBtn _as="VPaginationBtn" { ...controls.value.first } />
+              )}
             </li>
-          ) }
+          )}
 
           <li key="prev" class="v-pagination__prev" data-test="v-pagination-prev">
             { slots.prev ? slots.prev(controls.value.prev) : (
-              <VBtn _as="VPaginationBtn" {...controls.value.prev} />
-            ) }
+              <VBtn _as="VPaginationBtn" { ...controls.value.prev } />
+            )}
           </li>
 
           { items.value.map((item, index) => (
@@ -343,10 +343,10 @@ export const VPagination = genericComponent<VPaginationSlots>()({
               data-test="v-pagination-item"
             >
               { slots.item ? slots.item(item) : (
-                <VBtn _as="VPaginationBtn" {...item.props}>{ item.page }</VBtn>
-              ) }
+                <VBtn _as="VPaginationBtn" { ...item.props }>{ item.page }</VBtn>
+              )}
             </li>
-          )) }
+          ))}
 
           <li
             key="next"
@@ -354,8 +354,8 @@ export const VPagination = genericComponent<VPaginationSlots>()({
             data-test="v-pagination-next"
           >
             { slots.next ? slots.next(controls.value.next) : (
-              <VBtn _as="VPaginationBtn" {...controls.value.next} />
-            ) }
+              <VBtn _as="VPaginationBtn" { ...controls.value.next } />
+            )}
           </li>
 
           { props.showFirstLastPage && (
@@ -365,10 +365,10 @@ export const VPagination = genericComponent<VPaginationSlots>()({
               data-test="v-pagination-last"
             >
               { slots.last ? slots.last(controls.value.last) : (
-                <VBtn _as="VPaginationBtn" {...controls.value.last} />
-              ) }
+                <VBtn _as="VPaginationBtn" { ...controls.value.last } />
+              )}
             </li>
-          ) }
+          )}
         </ul>
       </props.tag>
     ))
diff --git a/packages/vuetify/src/components/VPagination/__tests__/VPagination.spec.cy.tsx b/packages/vuetify/src/components/VPagination/__tests__/VPagination.spec.cy.tsx
index 47e92865e6d..211fc13b790 100644
--- a/packages/vuetify/src/components/VPagination/__tests__/VPagination.spec.cy.tsx
+++ b/packages/vuetify/src/components/VPagination/__tests__/VPagination.spec.cy.tsx
@@ -11,7 +11,7 @@ import { defineComponent, ref } from 'vue'
 describe('VPagination', () => {
   it('should render set length', () => {
     cy.mount(() => (
-      <VPagination length={3} />
+      <VPagination length={ 3 } />
     ))
 
     cy.get('.v-pagination__item').should('have.length', 3)
@@ -19,7 +19,7 @@ describe('VPagination', () => {
 
   it('should react to mouse navigation', () => {
     cy.mount(() => (
-      <VPagination length={3} />
+      <VPagination length={ 3 } />
     ))
 
     cy.get('.v-pagination__item').eq(1).find('.v-btn').trigger('click')
@@ -39,7 +39,7 @@ describe('VPagination', () => {
   it('should react to keyboard navigation', () => {
     cy.mount(defineComponent(() => {
       const model = ref(2)
-      return () => <VPagination v-model={ model.value } length={3} />
+      return () => <VPagination v-model={ model.value } length={ 3 } />
     }))
 
     cy.get('.v-pagination__item').first().find('.v-btn').focus()
diff --git a/packages/vuetify/src/components/VProgressCircular/VProgressCircular.tsx b/packages/vuetify/src/components/VProgressCircular/VProgressCircular.tsx
index fcc30196726..4f1dbca1f98 100644
--- a/packages/vuetify/src/components/VProgressCircular/VProgressCircular.tsx
+++ b/packages/vuetify/src/components/VProgressCircular/VProgressCircular.tsx
@@ -134,7 +134,7 @@ export const VProgressCircular = genericComponent()({
           <div class="v-progress-circular__content">
             { slots.default({ value: normalizedValue.value }) }
           </div>
-        ) }
+        )}
       </props.tag>
     ))
 
diff --git a/packages/vuetify/src/components/VProgressLinear/VProgressLinear.tsx b/packages/vuetify/src/components/VProgressLinear/VProgressLinear.tsx
index 42e579dee94..aba8883efa4 100644
--- a/packages/vuetify/src/components/VProgressLinear/VProgressLinear.tsx
+++ b/packages/vuetify/src/components/VProgressLinear/VProgressLinear.tsx
@@ -143,7 +143,7 @@ export const VProgressLinear = genericComponent<VProgressLinearSlots>()({
               '--v-progress-linear-stream-to': convertToUnit(height.value * (isReversed.value ? 1 : -1)),
             }}
           />
-        ) }
+        )}
 
         <div
           class={[
@@ -173,7 +173,7 @@ export const VProgressLinear = genericComponent<VProgressLinearSlots>()({
             />
           ) : (
             <div class="v-progress-linear__indeterminate">
-              { ['long', 'short'].map(bar => (
+              {['long', 'short'].map(bar => (
                 <div
                   key={ bar }
                   class={[
@@ -183,16 +183,16 @@ export const VProgressLinear = genericComponent<VProgressLinearSlots>()({
                   ]}
                   style={ barColorStyles.value }
                 />
-              )) }
+              ))}
             </div>
-          ) }
+          )}
         </Transition>
 
         { slots.default && (
           <div class="v-progress-linear__content">
             { slots.default({ value: normalizedValue.value, buffer: normalizedBuffer.value }) }
           </div>
-        ) }
+        )}
       </props.tag>
     ))
 
diff --git a/packages/vuetify/src/components/VProgressLinear/__tests__/VProgressLinear.spec.cy.tsx b/packages/vuetify/src/components/VProgressLinear/__tests__/VProgressLinear.spec.cy.tsx
index dabb37620a2..484e8940819 100644
--- a/packages/vuetify/src/components/VProgressLinear/__tests__/VProgressLinear.spec.cy.tsx
+++ b/packages/vuetify/src/components/VProgressLinear/__tests__/VProgressLinear.spec.cy.tsx
@@ -9,7 +9,7 @@ describe('VProgressLinear', () => {
   it('supports modelValue prop', () => {
     cy.mount(() => (
       <CenteredGrid width="100px">
-        <VProgressLinear modelValue={25} />
+        <VProgressLinear modelValue={ 25 } />
       </CenteredGrid>
     ))
       .get('.v-progress-linear__determinate')
@@ -21,7 +21,7 @@ describe('VProgressLinear', () => {
     cy.mount(() => (
       <CenteredGrid width="100px">
         <VLocaleProvider rtl>
-          <VProgressLinear modelValue={25} />
+          <VProgressLinear modelValue={ 25 } />
         </VLocaleProvider>
       </CenteredGrid>
     ))
@@ -33,7 +33,7 @@ describe('VProgressLinear', () => {
   it('supports reverse prop', () => {
     cy.mount(() => (
       <CenteredGrid width="100px">
-        <VProgressLinear modelValue={25} reverse />
+        <VProgressLinear modelValue={ 25 } reverse />
       </CenteredGrid>
     ))
       .get('.v-progress-linear__determinate')
@@ -45,7 +45,7 @@ describe('VProgressLinear', () => {
     cy.mount(() => (
       <CenteredGrid width="100px">
         <VLocaleProvider rtl>
-          <VProgressLinear modelValue={25} reverse />
+          <VProgressLinear modelValue={ 25 } reverse />
         </VLocaleProvider>
       </CenteredGrid>
     ))
@@ -57,7 +57,7 @@ describe('VProgressLinear', () => {
   it('supports color props', () => {
     cy.mount(() => (
       <CenteredGrid width="100px">
-        <VProgressLinear modelValue={25} color="secondary" bgColor="error" />
+        <VProgressLinear modelValue={ 25 } color="secondary" bgColor="error" />
       </CenteredGrid>
     ))
       .get('.v-progress-linear__determinate')
@@ -69,7 +69,7 @@ describe('VProgressLinear', () => {
   it('supports indeterminate prop', () => {
     cy.mount(() => (
       <CenteredGrid width="100px">
-        <VProgressLinear modelValue={25} indeterminate />
+        <VProgressLinear modelValue={ 25 } indeterminate />
       </CenteredGrid>
     ))
       .get('.v-progress-linear__indeterminate')
@@ -79,7 +79,7 @@ describe('VProgressLinear', () => {
   it('supports bufferValue prop', () => {
     cy.mount(() => (
       <CenteredGrid width="100px">
-        <VProgressLinear modelValue={25} stream bufferValue={50} />
+        <VProgressLinear modelValue={ 25 } stream bufferValue={ 50 } />
       </CenteredGrid>
     ))
       .get('.v-progress-linear__background')
@@ -89,7 +89,7 @@ describe('VProgressLinear', () => {
   it('supports height prop', () => {
     cy.mount(() => (
       <CenteredGrid width="100px">
-        <VProgressLinear modelValue={25} height={50} />
+        <VProgressLinear modelValue={ 25 } height={ 50 } />
       </CenteredGrid>
     ))
       .get('.v-progress-linear')
@@ -99,7 +99,7 @@ describe('VProgressLinear', () => {
   it('supports active prop', () => {
     cy.mount(() => (
       <CenteredGrid width="100px">
-        <VProgressLinear modelValue={25} active={false} />
+        <VProgressLinear modelValue={ 25 } active={ false } />
       </CenteredGrid>
     ))
       .get('.v-progress-linear')
@@ -124,7 +124,7 @@ describe('VProgressLinear', () => {
   it('supports default slot', () => {
     cy.mount(() => (
       <CenteredGrid width="100px">
-        <VProgressLinear modelValue={25} height={20}>
+        <VProgressLinear modelValue={ 25 } height={ 20 }>
           {{
             default: (props: any) => <div>{ props.value }%</div>,
           }}
diff --git a/packages/vuetify/src/components/VRadioGroup/VRadioGroup.tsx b/packages/vuetify/src/components/VRadioGroup/VRadioGroup.tsx
index 298a33f6123..eb071bc0f3d 100644
--- a/packages/vuetify/src/components/VRadioGroup/VRadioGroup.tsx
+++ b/packages/vuetify/src/components/VRadioGroup/VRadioGroup.tsx
@@ -93,7 +93,7 @@ export const VRadioGroup = genericComponent<VRadioGroupSlots>()({
                   <VLabel id={ id.value }>
                     { label }
                   </VLabel>
-                ) }
+                )}
 
                 <VSelectionControlGroup
                   { ...controlProps }
diff --git a/packages/vuetify/src/components/VRangeSlider/VRangeSlider.tsx b/packages/vuetify/src/components/VRangeSlider/VRangeSlider.tsx
index 6e58b6dd60b..c296138ab1c 100644
--- a/packages/vuetify/src/components/VRangeSlider/VRangeSlider.tsx
+++ b/packages/vuetify/src/components/VRangeSlider/VRangeSlider.tsx
@@ -198,11 +198,11 @@ export const VRangeSlider = genericComponent<VSliderSlots>()({
                       startThumbRef.value?.$el.blur()
                       stopThumbRef.value?.$el.focus()
                     }
-                  } }
+                  }}
                   onBlur={ () => {
                     blur()
                     activeThumbRef.value = undefined
-                  } }
+                  }}
                   min={ min.value }
                   max={ model.value[1] }
                   position={ trackStart.value }
@@ -232,11 +232,11 @@ export const VRangeSlider = genericComponent<VSliderSlots>()({
                       stopThumbRef.value?.$el.blur()
                       startThumbRef.value?.$el.focus()
                     }
-                  } }
+                  }}
                   onBlur={ () => {
                     blur()
                     activeThumbRef.value = undefined
-                  } }
+                  }}
                   min={ model.value[0] }
                   max={ max.value }
                   position={ trackStop.value }
diff --git a/packages/vuetify/src/components/VRating/VRating.tsx b/packages/vuetify/src/components/VRating/VRating.tsx
index 0ea577eab24..2d53d97ebdf 100644
--- a/packages/vuetify/src/components/VRating/VRating.tsx
+++ b/packages/vuetify/src/components/VRating/VRating.tsx
@@ -268,7 +268,7 @@ export const VRating = genericComponent<VRatingSlots>()({
                   </>
                 ) : (
                   <VRatingItem value={ value } index={ i } />
-                ) }
+                )}
               </div>
               {
                 hasLabels && props.itemLabelPosition === 'bottom'
@@ -276,7 +276,7 @@ export const VRating = genericComponent<VRatingSlots>()({
                   : undefined
               }
             </div>
-          )) }
+          ))}
         </props.tag>
       )
     })
diff --git a/packages/vuetify/src/components/VSelect/VSelect.tsx b/packages/vuetify/src/components/VSelect/VSelect.tsx
index 4834bd03817..5515b404125 100644
--- a/packages/vuetify/src/components/VSelect/VSelect.tsx
+++ b/packages/vuetify/src/components/VSelect/VSelect.tsx
@@ -268,7 +268,7 @@ export const VSelect = genericComponent<new <
                     >
                       { !displayItems.value.length && !props.hideNoData && (slots['no-data']?.() ?? (
                         <VListItem title={ t(props.noDataText) } />
-                      )) }
+                      ))}
 
                       { slots['prepend-item']?.() }
 
@@ -298,7 +298,7 @@ export const VSelect = genericComponent<new <
 
                       { slots['append-item']?.() }
                     </VList>
-                  ) }
+                  )}
                 </VMenu>
 
                 { selections.value.map((item, index) => {
@@ -340,13 +340,13 @@ export const VSelect = genericComponent<new <
                               { item.title }
                               { props.multiple && (index < selections.value.length - 1) && (
                                 <span class="v-select__selection-comma">,</span>
-                              ) }
+                              )}
                             </span>
                           )
                       )}
                     </div>
                   )
-                }) }
+                })}
               </>
             ),
           }}
diff --git a/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.cy.tsx b/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.cy.tsx
index d09d8e78842..7a3217e76a2 100644
--- a/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.cy.tsx
+++ b/packages/vuetify/src/components/VSelect/__tests__/VSelect.spec.cy.tsx
@@ -65,8 +65,8 @@ describe('VSelect', () => {
 
     cy.mount(() => (
       <VSelect
-        items={items}
-        modelValue={selectedItems}
+        items={ items }
+        modelValue={ selectedItems }
         chips
         closableChips
         multiple
@@ -87,7 +87,7 @@ describe('VSelect', () => {
       const selectedItems = ref(['California', 'Colorado'])
 
       cy.mount(() => (
-        <VSelect v-model={selectedItems.value} items={items.value} multiple chips closableChips />
+        <VSelect v-model={ selectedItems.value } items={ items.value } multiple chips closableChips />
       ))
 
       cy.get('.v-select').click()
@@ -137,8 +137,8 @@ describe('VSelect', () => {
 
       cy.mount(() => (
         <VSelect
-          v-model={selectedItems.value}
-          items={items.value}
+          v-model={ selectedItems.value }
+          items={ items.value }
           multiple
           chips
           closableChips
@@ -192,8 +192,8 @@ describe('VSelect', () => {
 
     cy.mount(() => (
       <VSelect
-        items={items}
-        modelValue={selectedItems}
+        items={ items }
+        modelValue={ selectedItems }
         readonly
       />
     ))
@@ -219,8 +219,8 @@ describe('VSelect', () => {
     cy.mount(() => (
       <VForm readonly>
         <VSelect
-          items={items}
-          modelValue={selectedItems}
+          items={ items }
+          modelValue={ selectedItems }
           readonly
         />
       </VForm>
@@ -253,7 +253,7 @@ describe('VSelect', () => {
       ])
 
       cy.mount(() => (
-        <VSelect v-model={selectedItems.value} items={items.value} multiple hideSelected />
+        <VSelect v-model={ selectedItems.value } items={ items.value } multiple hideSelected />
       ))
 
       cy.get('.v-select').click()
diff --git a/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx b/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx
index bfd504e5e90..6f1dc1c7ca1 100644
--- a/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx
+++ b/packages/vuetify/src/components/VSelectionControl/VSelectionControl.tsx
@@ -257,7 +257,7 @@ export const VSelectionControl = genericComponent<new <T>() => {
                   onBlur,
                   id: id.value,
                 },
-              } as SelectionControlSlot) }
+              } as SelectionControlSlot)}
             </div>
           </div>
 
@@ -265,7 +265,7 @@ export const VSelectionControl = genericComponent<new <T>() => {
             <VLabel for={ id.value } clickable>
               { label }
             </VLabel>
-          ) }
+          )}
         </div>
       )
     })
diff --git a/packages/vuetify/src/components/VSelectionControl/__tests__/VSelectionControl.spec.cy.tsx b/packages/vuetify/src/components/VSelectionControl/__tests__/VSelectionControl.spec.cy.tsx
index 4347abb3442..953e9015133 100644
--- a/packages/vuetify/src/components/VSelectionControl/__tests__/VSelectionControl.spec.cy.tsx
+++ b/packages/vuetify/src/components/VSelectionControl/__tests__/VSelectionControl.spec.cy.tsx
@@ -15,7 +15,7 @@ describe('VSelectionControl', () => {
               color={ color }
               label={ `${color} Selection Control` }
             />
-          )) }
+          ))}
         </>
       ))
         .get('div.v-selection-control')
diff --git a/packages/vuetify/src/components/VSlideGroup/VSlideGroup.tsx b/packages/vuetify/src/components/VSlideGroup/VSlideGroup.tsx
index ab6279d6b73..cee38d199e5 100644
--- a/packages/vuetify/src/components/VSlideGroup/VSlideGroup.tsx
+++ b/packages/vuetify/src/components/VSlideGroup/VSlideGroup.tsx
@@ -364,9 +364,9 @@ export const VSlideGroup = genericComponent<VSlideGroupSlots>()({
               <VFadeTransition>
                 <VIcon icon={ isRtl.value ? props.nextIcon : props.prevIcon }></VIcon>
               </VFadeTransition>
-            ) }
+            )}
           </div>
-        ) }
+        )}
 
         <div
           key="container"
@@ -402,9 +402,9 @@ export const VSlideGroup = genericComponent<VSlideGroupSlots>()({
               <VFadeTransition>
                 <VIcon icon={ isRtl.value ? props.prevIcon : props.nextIcon }></VIcon>
               </VFadeTransition>
-            ) }
+            )}
           </div>
-        ) }
+        )}
       </props.tag>
     ))
 
diff --git a/packages/vuetify/src/components/VSlideGroup/__tests__/VSlideGroup.spec.cy.tsx b/packages/vuetify/src/components/VSlideGroup/__tests__/VSlideGroup.spec.cy.tsx
index 87fb088bc4b..302aa246420 100644
--- a/packages/vuetify/src/components/VSlideGroup/__tests__/VSlideGroup.spec.cy.tsx
+++ b/packages/vuetify/src/components/VSlideGroup/__tests__/VSlideGroup.spec.cy.tsx
@@ -16,7 +16,7 @@ describe('VSlideGroup', () => {
               <VSlideGroupItem key={ i } value={ i }>
                 { props => (
                   <VCard
-                    class={ ['ma-4', props.selectedClass] }
+                    class={['ma-4', props.selectedClass]}
                     color="grey"
                     width="50"
                     height="100"
@@ -63,8 +63,8 @@ describe('VSlideGroup', () => {
         <CenteredGrid width="400px">
           <VSlideGroup showArrows="always">
             {{
-              prev: props => <div {...props}>prev</div>,
-              next: props => <div {...props}>next</div>,
+              prev: props => <div { ...props }>prev</div>,
+              next: props => <div { ...props }>next</div>,
               default: () => createRange(6).map(i => (
                 <VSlideGroupItem key={ i }>
                   <VCard class="ma-4" color="grey" width="50" height="100">{ i }</VCard>
@@ -190,7 +190,7 @@ describe('VSlideGroup', () => {
           <VSlideGroup modelValue={ 7 } showArrows="always" selectedClass="bg-primary">
             { createRange(10).map(i => (
               <VSlideGroupItem key={ i } value={ i }>
-                { props => <VCard color="grey" width="50" height="100" class={ ['ma-4', props.selectedClass] }>{ i }</VCard> }
+                { props => <VCard color="grey" width="50" height="100" class={['ma-4', props.selectedClass]}>{ i }</VCard> }
               </VSlideGroupItem>
             ))}
           </VSlideGroup>
@@ -208,7 +208,7 @@ describe('VSlideGroup', () => {
           <VSlideGroup selectedClass="bg-primary">
             { createRange(8).map(i => (
               <VSlideGroupItem key={ i } value={ i }>
-                { props => <VCard color="grey" width="50" height="100" class={ ['ma-4', props.selectedClass, `item-${i}`] }>{ i }</VCard> }
+                { props => <VCard color="grey" width="50" height="100" class={['ma-4', props.selectedClass, `item-${i}`]}>{ i }</VCard> }
               </VSlideGroupItem>
             ))}
           </VSlideGroup>
@@ -229,7 +229,7 @@ describe('VSlideGroup', () => {
           <VSlideGroup selectedClass="bg-primary" showArrows>
             { createRange(8).map(i => (
               <VSlideGroupItem key={ i } value={ i }>
-                { props => <VCard color="grey" width="50" height="100" class={ ['ma-4', props.selectedClass, `item-${i}`] }>{ i }</VCard> }
+                { props => <VCard color="grey" width="50" height="100" class={['ma-4', props.selectedClass, `item-${i}`]}>{ i }</VCard> }
               </VSlideGroupItem>
             ))}
           </VSlideGroup>
diff --git a/packages/vuetify/src/components/VSlider/VSliderTrack.tsx b/packages/vuetify/src/components/VSlider/VSliderTrack.tsx
index 89326223097..faff4199571 100644
--- a/packages/vuetify/src/components/VSlider/VSliderTrack.tsx
+++ b/packages/vuetify/src/components/VSlider/VSliderTrack.tsx
@@ -163,7 +163,7 @@ export const VSliderTrack = genericComponent<VSliderTrackSlots>()({
             >
               { computedTicks.value }
             </div>
-          ) }
+          )}
         </div>
       )
     })
diff --git a/packages/vuetify/src/components/VSlider/__tests__/VSlider.spec.cy.tsx b/packages/vuetify/src/components/VSlider/__tests__/VSlider.spec.cy.tsx
index 15cacc0e234..2ba67c8e1c2 100644
--- a/packages/vuetify/src/components/VSlider/__tests__/VSlider.spec.cy.tsx
+++ b/packages/vuetify/src/components/VSlider/__tests__/VSlider.spec.cy.tsx
@@ -48,7 +48,7 @@ describe('VSlider', () => {
     cy.mount(() => (
       <VApp>
         <CenteredGrid width="300px">
-          <VSlider max={20} step={1} />
+          <VSlider max={ 20 } step={ 1 } />
         </CenteredGrid>
       </VApp>
     ))
@@ -118,7 +118,7 @@ describe('VSlider', () => {
     cy.mount(() => (
       <VApp>
         <CenteredGrid width="300px">
-          <VSlider step={2} min={0} max={10} />
+          <VSlider step={ 2 } min={ 0 } max={ 10 } />
         </CenteredGrid>
       </VApp>
     ))
@@ -139,9 +139,9 @@ describe('VSlider', () => {
     cy.mount(() => (
       <VApp>
         <CenteredGrid width="300px">
-          <VSlider ticks={[0, 2, 8, 10]} min={0} max={10} step={1} showTicks="always" />
+          <VSlider ticks={[0, 2, 8, 10]} min={ 0 } max={ 10 } step={ 1 } showTicks="always" />
 
-          <VSlider ticks={{ 0: 'a', 5: 'b', 10: 'c' }} min={0} max={10} step={1} showTicks="always" />
+          <VSlider ticks={{ 0: 'a', 5: 'b', 10: 'c' }} min={ 0 } max={ 10 } step={ 1 } showTicks="always" />
         </CenteredGrid>
       </VApp>
     ))
diff --git a/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx b/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx
index dc0dc271aab..e6276ce1c3c 100644
--- a/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx
+++ b/packages/vuetify/src/components/VSnackbar/VSnackbar.tsx
@@ -116,7 +116,7 @@ export const VSnackbar = genericComponent<VSnackbarSlots>()({
             ],
             onPointerenter,
             onPointerleave: startTimeout,
-          }, overlayProps.contentProps) }
+          }, overlayProps.contentProps)}
           persistent
           noClickAnimation
           scrim={ false }
@@ -134,7 +134,7 @@ export const VSnackbar = genericComponent<VSnackbarSlots>()({
             >
               { slots.default() }
             </div>
-          ) }
+          )}
 
           { slots.actions && (
             <VDefaultsProvider
diff --git a/packages/vuetify/src/components/VSwitch/VSwitch.tsx b/packages/vuetify/src/components/VSwitch/VSwitch.tsx
index 47b2da51f3e..0a7f269913f 100644
--- a/packages/vuetify/src/components/VSwitch/VSwitch.tsx
+++ b/packages/vuetify/src/components/VSwitch/VSwitch.tsx
@@ -144,7 +144,7 @@ export const VSwitch = genericComponent<VSwitchSlots>()({
                               )
                           )}
                         </LoaderSlot>
-                      ) }
+                      )}
                     </div>
                   ),
                 }}
diff --git a/packages/vuetify/src/components/VTable/VTable.tsx b/packages/vuetify/src/components/VTable/VTable.tsx
index efa8dc283b4..524005f5bfe 100644
--- a/packages/vuetify/src/components/VTable/VTable.tsx
+++ b/packages/vuetify/src/components/VTable/VTable.tsx
@@ -61,7 +61,7 @@ export const VTable = genericComponent<VTableSlots>()({
               { slots.default() }
             </table>
           </div>
-        ) : slots.wrapper?.() }
+        ) : slots.wrapper?.()}
 
         { slots.bottom?.() }
       </props.tag>
diff --git a/packages/vuetify/src/components/VTabs/VTab.tsx b/packages/vuetify/src/components/VTabs/VTab.tsx
index 24257e47640..07e69425eed 100644
--- a/packages/vuetify/src/components/VTabs/VTab.tsx
+++ b/packages/vuetify/src/components/VTabs/VTab.tsx
@@ -156,7 +156,7 @@ export const VTab = genericComponent()({
               ]}
               style={ sliderColorStyles.value }
             />
-          ) }
+          )}
         </VBtn>
       )
     })
diff --git a/packages/vuetify/src/components/VTabs/VTabs.tsx b/packages/vuetify/src/components/VTabs/VTabs.tsx
index 88f464c4aa0..e6a474a68af 100644
--- a/packages/vuetify/src/components/VTabs/VTabs.tsx
+++ b/packages/vuetify/src/components/VTabs/VTabs.tsx
@@ -116,7 +116,7 @@ export const VTabs = genericComponent()({
       >
         { slots.default ? slots.default() : parsedItems.value.map(item => (
           <VTab { ...item } key={ item.title } />
-        )) }
+        ))}
       </VSlideGroup>
     ))
 
diff --git a/packages/vuetify/src/components/VTabs/__tests__/VTabs.spec.cy.tsx b/packages/vuetify/src/components/VTabs/__tests__/VTabs.spec.cy.tsx
index 334eee4900a..ed32de0375c 100644
--- a/packages/vuetify/src/components/VTabs/__tests__/VTabs.spec.cy.tsx
+++ b/packages/vuetify/src/components/VTabs/__tests__/VTabs.spec.cy.tsx
@@ -132,7 +132,7 @@ describe('VTabs', () => {
     const model = ref('B')
     cy.mount(({ show = true }: { show?: boolean }) => (
       <div v-show={ show }>
-        <VTabs modelValue={model.value} onUpdate:modelValue={v => model.value = v as string}>
+        <VTabs modelValue={ model.value } onUpdate:modelValue={ v => model.value = v as string }>
           <VTab value="A">A</VTab>
           <VTab value="B">B</VTab>
           <VTab value="C">C</VTab>
diff --git a/packages/vuetify/src/components/VTextField/VTextField.tsx b/packages/vuetify/src/components/VTextField/VTextField.tsx
index 2e0937474ab..ebbf3f65da9 100644
--- a/packages/vuetify/src/components/VTextField/VTextField.tsx
+++ b/packages/vuetify/src/components/VTextField/VTextField.tsx
@@ -228,7 +228,7 @@ export const VTextField = genericComponent<Omit<VInputSlots & VFieldSlots, 'defa
                           <span class="v-text-field__prefix">
                             { props.prefix }
                           </span>
-                        ) }
+                        )}
 
                         { slots.default ? (
                           <div
@@ -238,13 +238,13 @@ export const VTextField = genericComponent<Omit<VInputSlots & VFieldSlots, 'defa
                             { slots.default() }
                             { inputNode }
                           </div>
-                        ) : cloneVNode(inputNode, { class: fieldClass }) }
+                        ) : cloneVNode(inputNode, { class: fieldClass })}
 
                         { props.suffix && (
                           <span class="v-text-field__suffix">
                             { props.suffix }
                           </span>
-                        ) }
+                        )}
                       </>
                     )
                   },
@@ -266,7 +266,7 @@ export const VTextField = genericComponent<Omit<VInputSlots & VFieldSlots, 'defa
                       v-slots:default={ slots.counter }
                     />
                   </>
-                ) }
+                )}
               </>
             ) : undefined,
           }}
diff --git a/packages/vuetify/src/components/VTextField/__tests__/VTextField.spec.cy.tsx b/packages/vuetify/src/components/VTextField/__tests__/VTextField.spec.cy.tsx
index 3ea45515576..944212185f4 100644
--- a/packages/vuetify/src/components/VTextField/__tests__/VTextField.spec.cy.tsx
+++ b/packages/vuetify/src/components/VTextField/__tests__/VTextField.spec.cy.tsx
@@ -20,7 +20,7 @@ const stories = Object.fromEntries(Object.entries({
         { cloneVNode(v, { variant }) }
         { cloneVNode(v, { variant, modelValue: 'Value' }) }
       </div>
-    )) }
+    ))}
   </div>
 )]))
 
diff --git a/packages/vuetify/src/components/VTextarea/VTextarea.tsx b/packages/vuetify/src/components/VTextarea/VTextarea.tsx
index 3dd07e497ec..eda1ed729f4 100644
--- a/packages/vuetify/src/components/VTextarea/VTextarea.tsx
+++ b/packages/vuetify/src/components/VTextarea/VTextarea.tsx
@@ -251,7 +251,7 @@ export const VTextarea = genericComponent<Omit<VInputSlots & VFieldSlots, 'defau
                         <span class="v-text-field__prefix">
                           { props.prefix }
                         </span>
-                      ) }
+                      )}
 
                       <textarea
                         ref={ textareaRef }
@@ -290,7 +290,7 @@ export const VTextarea = genericComponent<Omit<VInputSlots & VFieldSlots, 'defau
                         <span class="v-text-field__suffix">
                           { props.suffix }
                         </span>
-                      ) }
+                      )}
                     </>
                   ),
                 }}
@@ -311,7 +311,7 @@ export const VTextarea = genericComponent<Omit<VInputSlots & VFieldSlots, 'defau
                       v-slots:default={ slots.counter }
                     />
                   </>
-                ) }
+                )}
               </>
             ) : undefined,
           }}
diff --git a/packages/vuetify/src/components/VTimeline/VTimelineDivider.tsx b/packages/vuetify/src/components/VTimeline/VTimelineDivider.tsx
index 4a07c7c605d..3cf79e9beec 100644
--- a/packages/vuetify/src/components/VTimeline/VTimelineDivider.tsx
+++ b/packages/vuetify/src/components/VTimeline/VTimelineDivider.tsx
@@ -86,7 +86,7 @@ export const VTimelineDivider = genericComponent()({
               { slots.default?.() ?? (props.icon ? (<VIcon />) : undefined) }
             </div>
           </div>
-        ) }
+        )}
 
         <div
           class={[
diff --git a/packages/vuetify/src/components/VTimeline/VTimelineItem.tsx b/packages/vuetify/src/components/VTimeline/VTimelineItem.tsx
index 36a3403cbfb..501435dadc4 100644
--- a/packages/vuetify/src/components/VTimeline/VTimelineItem.tsx
+++ b/packages/vuetify/src/components/VTimeline/VTimelineItem.tsx
@@ -95,7 +95,7 @@ export const VTimelineItem = genericComponent<VTimelineItemSlots>()({
           <div class="v-timeline-item__opposite">
             { !props.hideOpposite && slots.opposite?.() }
           </div>
-        ) }
+        )}
       </div>
     ))
 
diff --git a/packages/vuetify/src/components/VTimeline/__tests__/VTimeline.spec.cy.tsx b/packages/vuetify/src/components/VTimeline/__tests__/VTimeline.spec.cy.tsx
index 05c90345cf3..3608a90e86c 100644
--- a/packages/vuetify/src/components/VTimeline/__tests__/VTimeline.spec.cy.tsx
+++ b/packages/vuetify/src/components/VTimeline/__tests__/VTimeline.spec.cy.tsx
@@ -40,7 +40,7 @@ describe('VTimeline', () => {
     it('should support truncate-line', () => {
       const truncateLine = ref<TimelineTruncateLine>()
       cy.mount(() => (
-        <VTimeline truncateLine={truncateLine.value}>
+        <VTimeline truncateLine={ truncateLine.value }>
           <VTimelineItem key="1">
             {{
               default: () => 'Content',
@@ -81,7 +81,7 @@ describe('VTimeline', () => {
       const align = ref<TimelineAlign>('center')
 
       cy.mount(() => (
-        <VTimeline align={align.value}>
+        <VTimeline align={ align.value }>
           <VTimelineItem key="1">
             {{
               default: () => (
@@ -118,7 +118,7 @@ describe('VTimeline', () => {
       const side = ref<TimelineSide>('start')
 
       cy.mount(() => (
-        <VTimeline side={side.value}>
+        <VTimeline side={ side.value }>
           <VTimelineItem key="1">
             {{
               default: () => (
@@ -210,7 +210,7 @@ describe('VTimeline', () => {
     it('should support truncate-line', () => {
       const truncateLine = ref<TimelineTruncateLine>()
       cy.mount(() => (
-        <VTimeline direction="horizontal" truncateLine={truncateLine.value}>
+        <VTimeline direction="horizontal" truncateLine={ truncateLine.value }>
           <VTimelineItem key="1">
             {{
               default: () => 'Content',
@@ -251,7 +251,7 @@ describe('VTimeline', () => {
       const align = ref<TimelineAlign>('center')
 
       cy.mount(() => (
-        <VTimeline direction="horizontal" align={align.value}>
+        <VTimeline direction="horizontal" align={ align.value }>
           <VTimelineItem key="1">
             {{
               default: () => (
@@ -288,7 +288,7 @@ describe('VTimeline', () => {
       const side = ref<TimelineSide>('start')
 
       cy.mount(() => (
-        <VTimeline direction="horizontal" side={side.value}>
+        <VTimeline direction="horizontal" side={ side.value }>
           <VTimelineItem key="1">
             {{
               default: () => (
diff --git a/packages/vuetify/src/components/VToolbar/VToolbar.tsx b/packages/vuetify/src/components/VToolbar/VToolbar.tsx
index 39d98658461..0505e0631ff 100644
--- a/packages/vuetify/src/components/VToolbar/VToolbar.tsx
+++ b/packages/vuetify/src/components/VToolbar/VToolbar.tsx
@@ -143,7 +143,7 @@ export const VToolbar = genericComponent<VToolbarSlots>()({
                 { slots.image ? slots.image?.() : (<VImg />) }
               </VDefaultsProvider>
             </div>
-          ) }
+          )}
 
           <VDefaultsProvider
             defaults={{
@@ -160,13 +160,13 @@ export const VToolbar = genericComponent<VToolbarSlots>()({
                 <div class="v-toolbar__prepend">
                   { slots.prepend?.() }
                 </div>
-              ) }
+              )}
 
               { hasTitle && (
                 <VToolbarTitle key="title" text={ props.title }>
                   {{ text: slots.title }}
                 </VToolbarTitle>
-              ) }
+              )}
 
               { slots.default?.() }
 
@@ -174,7 +174,7 @@ export const VToolbar = genericComponent<VToolbarSlots>()({
                 <div class="v-toolbar__append">
                   { slots.append?.() }
                 </div>
-              ) }
+              )}
             </div>
           </VDefaultsProvider>
 
@@ -193,7 +193,7 @@ export const VToolbar = genericComponent<VToolbarSlots>()({
                 >
                   { extension }
                 </div>
-              ) }
+              )}
             </VExpandTransition>
           </VDefaultsProvider>
         </props.tag>
diff --git a/packages/vuetify/src/components/VToolbar/VToolbarTitle.tsx b/packages/vuetify/src/components/VToolbar/VToolbarTitle.tsx
index 588c57e4071..d315a9d1918 100644
--- a/packages/vuetify/src/components/VToolbar/VToolbarTitle.tsx
+++ b/packages/vuetify/src/components/VToolbar/VToolbarTitle.tsx
@@ -35,7 +35,7 @@ export const VToolbarTitle = genericComponent<VToolbarTitleSlots>()({
 
               { slots.default?.() }
             </div>
-          ) }
+          )}
         </props.tag>
       )
     })
diff --git a/packages/vuetify/src/components/VToolbar/__tests__/VToolbar.spec.cy.tsx b/packages/vuetify/src/components/VToolbar/__tests__/VToolbar.spec.cy.tsx
index b473356dbb8..7210ad36829 100644
--- a/packages/vuetify/src/components/VToolbar/__tests__/VToolbar.spec.cy.tsx
+++ b/packages/vuetify/src/components/VToolbar/__tests__/VToolbar.spec.cy.tsx
@@ -24,7 +24,7 @@ describe('VToolbar', () => {
       <>
         { colors.map(color => (
           <VToolbar color={ color } title={ color } />
-        )) }
+        ))}
       </>
     ))
       .get('.v-toolbar')
diff --git a/packages/vuetify/src/components/VWindow/__tests__/VWindow.spec.cy.tsx b/packages/vuetify/src/components/VWindow/__tests__/VWindow.spec.cy.tsx
index 43bcaf2c5ea..c60568e36d3 100644
--- a/packages/vuetify/src/components/VWindow/__tests__/VWindow.spec.cy.tsx
+++ b/packages/vuetify/src/components/VWindow/__tests__/VWindow.spec.cy.tsx
@@ -246,7 +246,7 @@ describe('VWindow', () => {
   it('should disable touch support', () => {
     cy.mount(() => (
       <div>
-        <VWindow touch={false}>
+        <VWindow touch={ false }>
           <VWindowItem value="one">
             <div class="bg-grey text-white d-flex justify-center align-center">
               <h1>foo</h1>
diff --git a/packages/vuetify/src/composables/loader.tsx b/packages/vuetify/src/composables/loader.tsx
index b95bb9fdc23..8c07c98d07c 100644
--- a/packages/vuetify/src/composables/loader.tsx
+++ b/packages/vuetify/src/composables/loader.tsx
@@ -45,7 +45,7 @@ export function LoaderSlot (
   { slots }: SetupContext,
 ) {
   return (
-    <div class={`${props.name}__loader`}>
+    <div class={ `${props.name}__loader` }>
       { slots.default?.({
         color: props.color,
         isActive: props.active,
diff --git a/packages/vuetify/src/composables/variant.tsx b/packages/vuetify/src/composables/variant.tsx
index 000549ba2ec..48e35ea7bde 100644
--- a/packages/vuetify/src/composables/variant.tsx
+++ b/packages/vuetify/src/composables/variant.tsx
@@ -28,9 +28,9 @@ export interface VariantProps {
 export function genOverlays (isClickable: boolean, name: string) {
   return (
     <>
-      { isClickable && <span key="overlay" class={`${name}__overlay`} /> }
+      { isClickable && <span key="overlay" class={ `${name}__overlay` } /> }
 
-      <span key="underlay" class={`${name}__underlay`} />
+      <span key="underlay" class={ `${name}__underlay` } />
     </>
   )
 }
diff --git a/packages/vuetify/src/labs/VDataTable/VDataTable.tsx b/packages/vuetify/src/labs/VDataTable/VDataTable.tsx
index b2a5d92a31e..7c5c436fb87 100644
--- a/packages/vuetify/src/labs/VDataTable/VDataTable.tsx
+++ b/packages/vuetify/src/labs/VDataTable/VDataTable.tsx
@@ -149,7 +149,7 @@ export const VDataTable = genericComponent<VDataTableSlots & { colgroup: [] }>()
                     multiSort={ props.multiSort }
                     v-slots={ slots }
                   />
-                ) }
+                )}
               </thead>
               { slots.thead?.() }
               <tbody>
@@ -159,7 +159,7 @@ export const VDataTable = genericComponent<VDataTableSlots & { colgroup: [] }>()
                     onClick:row={ (event, value) => emit('click:row', event, value) }
                     v-slots={ slots }
                   />
-                ) }
+                )}
               </tbody>
               { slots.tbody?.() }
               { slots.tfoot?.() }
diff --git a/packages/vuetify/src/labs/VDataTable/VDataTableFooter.tsx b/packages/vuetify/src/labs/VDataTable/VDataTableFooter.tsx
index e15cfba162e..cb779f8d7bb 100644
--- a/packages/vuetify/src/labs/VDataTable/VDataTableFooter.tsx
+++ b/packages/vuetify/src/labs/VDataTable/VDataTableFooter.tsx
@@ -123,7 +123,7 @@ export const VDataTableFooter = genericComponent<{ prepend: [] }>()({
           />
           { props.showCurrentPage && (
             <span key="page" class="v-data-table-footer__page">{ page.value }</span>
-          ) }
+          )}
           <VBtn
             icon={ props.nextIcon }
             variant="plain"
diff --git a/packages/vuetify/src/labs/VDataTable/VDataTableHeaders.tsx b/packages/vuetify/src/labs/VDataTable/VDataTableHeaders.tsx
index 8242122ceac..ebb05867b01 100644
--- a/packages/vuetify/src/labs/VDataTable/VDataTableHeaders.tsx
+++ b/packages/vuetify/src/labs/VDataTable/VDataTableHeaders.tsx
@@ -91,11 +91,11 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
             minWidth: convertToUnit(column.width),
             ...getFixedStyles(column, y),
           }}
-          colspan={column.colspan}
-          rowspan={column.rowspan}
-          onClick={column.sortable ? () => toggleSort(column.key) : undefined}
-          lastFixed={column.lastFixed}
-          noPadding={noPadding}
+          colspan={ column.colspan }
+          rowspan={ column.rowspan }
+          onClick={ column.sortable ? () => toggleSort(column.key) : undefined }
+          lastFixed={ column.lastFixed }
+          noPadding={ noPadding }
         >
           {{
             default: () => {
@@ -134,11 +134,11 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
                         'v-data-table-header__sort-badge',
                         ...backgroundColorClasses.value,
                       ]}
-                      style={backgroundColorStyles.value}
+                      style={ backgroundColorStyles.value }
                     >
-                      {sortBy.value.findIndex(x => x.key === column.key) + 1}
+                      { sortBy.value.findIndex(x => x.key === column.key) + 1 }
                     </div>
-                  ) }
+                  )}
                 </div>
               )
             },
@@ -152,10 +152,10 @@ export const VDataTableHeaders = genericComponent<VDataTableHeadersSlots>()({
         { headers.value.map((row, y) => (
           <tr>
             { row.map((column, x) => (
-              <VDataTableHeaderCell column={ column} x={ x } y={ y } />
-            )) }
+              <VDataTableHeaderCell column={ column } x={ x } y={ y } />
+            ))}
           </tr>
-        )) }
+        ))}
 
         { props.loading && (
           <tr class="v-data-table__progress">
diff --git a/packages/vuetify/src/labs/VDataTable/VDataTableRow.tsx b/packages/vuetify/src/labs/VDataTable/VDataTableRow.tsx
index 1a460c17d12..547cd2cf445 100644
--- a/packages/vuetify/src/labs/VDataTable/VDataTableRow.tsx
+++ b/packages/vuetify/src/labs/VDataTable/VDataTableRow.tsx
@@ -38,7 +38,7 @@ export const VDataTableRow = defineComponent({
             key="no-data"
             v-slots={ slots }
           />
-        ) }
+        )}
 
         { props.item && columns.value.map((column, i) => (
           <VDataTableColumn
@@ -76,7 +76,7 @@ export const VDataTableRow = defineComponent({
                 if (column.key === 'data-table-expand') {
                   return slots['item.data-table-expand']?.(slotProps) ?? (
                     <VBtn
-                      icon={isExpanded(item) ? '$collapse' : '$expand' }
+                      icon={ isExpanded(item) ? '$collapse' : '$expand' }
                       size="small"
                       variant="text"
                       onClick={ () => toggleExpand(item) }
@@ -88,7 +88,7 @@ export const VDataTableRow = defineComponent({
               },
             }}
           </VDataTableColumn>
-        )) }
+        ))}
       </tr>
     ))
   },
diff --git a/packages/vuetify/src/labs/VDataTable/VDataTableRows.tsx b/packages/vuetify/src/labs/VDataTable/VDataTableRows.tsx
index 3ff619cbdc5..f9aadbbb8ef 100644
--- a/packages/vuetify/src/labs/VDataTable/VDataTableRows.tsx
+++ b/packages/vuetify/src/labs/VDataTable/VDataTableRows.tsx
@@ -99,7 +99,7 @@ export const VDataTableRows = genericComponent<VDataTableRowsSlots>()({
           >
             { t(props.noDataText) }
           </VDataTableRow>
-        )) }
+        ))}
 
         { props.items.map((item, index) => {
           if (item.type === 'group-header') {
@@ -143,16 +143,16 @@ export const VDataTableRows = genericComponent<VDataTableRowsSlots>()({
                     }
 
                     emit('click:row', event, { item })
-                  } }
+                  }}
                   item={ item }
                   v-slots={ slots }
                 />
-              ) }
+              )}
 
               { isExpanded(item) && slots['expanded-row']?.(slotProps) }
             </>
           )
-        }) }
+        })}
       </>
     ))
 
diff --git a/packages/vuetify/src/labs/VDataTable/VDataTableServer.tsx b/packages/vuetify/src/labs/VDataTable/VDataTableServer.tsx
index 629b8ad946a..e016345a19f 100644
--- a/packages/vuetify/src/labs/VDataTable/VDataTableServer.tsx
+++ b/packages/vuetify/src/labs/VDataTable/VDataTableServer.tsx
@@ -126,7 +126,7 @@ export const VDataTableServer = genericComponent<VDataTableSlots>()({
                     color={ props.color }
                     v-slots={ slots }
                   />
-                ) }
+                )}
               </thead>
               { slots.thead?.() }
               <tbody class="v-data-table__tbody" role="rowgroup">
@@ -136,7 +136,7 @@ export const VDataTableServer = genericComponent<VDataTableSlots>()({
                     onClick:row={ (event, value) => emit('click:row', event, value) }
                     v-slots={ slots }
                   />
-                ) }
+                )}
               </tbody>
               { slots.tbody?.() }
               { slots.tfoot?.() }
diff --git a/packages/vuetify/src/labs/VDataTable/VDataTableVirtual.tsx b/packages/vuetify/src/labs/VDataTable/VDataTableVirtual.tsx
index 661a7010674..fc20db20ab0 100644
--- a/packages/vuetify/src/labs/VDataTable/VDataTableVirtual.tsx
+++ b/packages/vuetify/src/labs/VDataTable/VDataTableVirtual.tsx
@@ -141,17 +141,17 @@ export const VDataTableVirtual = genericComponent<VDataTableVirtualSlots>()({
                 </thead>
                 <tbody>
                   <tr style={{ height: convertToUnit(paddingTop.value), border: 0 }}>
-                    <td colspan={columns.value.length} style={{ height: convertToUnit(paddingTop.value), border: 0 }}></td>
+                    <td colspan={ columns.value.length } style={{ height: convertToUnit(paddingTop.value), border: 0 }}></td>
                   </tr>
 
                   <VDataTableRows
-                    items={visibleItems.value}
+                    items={ visibleItems.value }
                     onClick:row={ (event, value) => emit('click:row', event, value) }
                     v-slots={ slots }
                   />
 
                   <tr style={{ height: convertToUnit(paddingBottom.value), border: 0 }}>
-                    <td colspan={columns.value.length} style={{ height: convertToUnit(paddingBottom.value), border: 0 }}></td>
+                    <td colspan={ columns.value.length } style={{ height: convertToUnit(paddingBottom.value), border: 0 }}></td>
                   </tr>
                 </tbody>
               </table>
diff --git a/packages/vuetify/src/labs/VDataTable/__tests__/VDataTable.spec.cy.tsx b/packages/vuetify/src/labs/VDataTable/__tests__/VDataTable.spec.cy.tsx
index 8306682317d..9ed381a8fcf 100644
--- a/packages/vuetify/src/labs/VDataTable/__tests__/VDataTable.spec.cy.tsx
+++ b/packages/vuetify/src/labs/VDataTable/__tests__/VDataTable.spec.cy.tsx
@@ -99,7 +99,7 @@ describe('VDataTable', () => {
   it('should reset page when searching', () => {
     cy.mount(({ search }: { search: string }) => (
       <Application>
-        <VDataTable items={DESSERT_ITEMS} headers={DESSERT_HEADERS} search={search} items-per-page={5} />
+        <VDataTable items={ DESSERT_ITEMS } headers={ DESSERT_HEADERS } search={ search } items-per-page={ 5 } />
       </Application>
     ))
 
diff --git a/packages/vuetify/src/labs/VVirtualScroll/VVirtualScroll.tsx b/packages/vuetify/src/labs/VVirtualScroll/VVirtualScroll.tsx
index 70e29e87318..4454267a614 100644
--- a/packages/vuetify/src/labs/VVirtualScroll/VVirtualScroll.tsx
+++ b/packages/vuetify/src/labs/VVirtualScroll/VVirtualScroll.tsx
@@ -180,7 +180,7 @@ export const VVirtualScroll = genericComponent<new <T>() => {
             >
               { slots.default?.({ item, index: index + first.value }) }
             </VVirtualScrollItem>
-          )) }
+          ))}
         </div>
       </div>
     ))
diff --git a/scripts/rules/jsx-curly-spacing.js b/scripts/rules/jsx-curly-spacing.js
new file mode 100644
index 00000000000..99b307df0ce
--- /dev/null
+++ b/scripts/rules/jsx-curly-spacing.js
@@ -0,0 +1,471 @@
+/**
+ * @fileoverview Enforce or disallow spaces inside of curly braces in JSX attributes.
+ * @author Jamund Ferguson
+ * @author Brandyn Bennett
+ * @author Michael Ficarra
+ * @author Vignesh Anand
+ * @author Jamund Ferguson
+ * @author Yannick Croissant
+ * @author Erik Wendel
+ */
+
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+const SPACING = {
+  always: 'always',
+  never: 'never',
+}
+const SPACING_VALUES = [SPACING.always, SPACING.never]
+
+const messages = {
+  noNewlineAfter: 'There should be no newline after \'{{token}}\'',
+  noNewlineBefore: 'There should be no newline before \'{{token}}\'',
+  noSpaceAfter: 'There should be no space after \'{{token}}\'',
+  noSpaceBefore: 'There should be no space before \'{{token}}\'',
+  spaceNeededAfter: 'A space is required after \'{{token}}\'',
+  spaceNeededBefore: 'A space is required before \'{{token}}\'',
+}
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Enforce or disallow spaces inside of curly braces in JSX attributes and expressions',
+      category: 'Stylistic Issues',
+      recommended: false,
+    },
+    fixable: 'code',
+
+    messages,
+
+    schema: {
+      definitions: {
+        basicConfig: {
+          type: 'object',
+          properties: {
+            when: {
+              enum: SPACING_VALUES,
+            },
+            allowMultiline: {
+              type: 'boolean',
+            },
+            spacing: {
+              type: 'object',
+              properties: {
+                objectLiterals: {
+                  enum: SPACING_VALUES,
+                },
+                arrayLiterals: {
+                  enum: SPACING_VALUES,
+                },
+                multilineClose: {
+                  enum: SPACING_VALUES,
+                },
+              },
+            },
+          },
+        },
+        basicConfigOrBoolean: {
+          anyOf: [{
+            $ref: '#/definitions/basicConfig',
+          }, {
+            type: 'boolean',
+          }],
+        },
+      },
+      type: 'array',
+      items: [{
+        anyOf: [{
+          allOf: [{
+            $ref: '#/definitions/basicConfig',
+          }, {
+            type: 'object',
+            properties: {
+              attributes: {
+                $ref: '#/definitions/basicConfigOrBoolean',
+              },
+              children: {
+                $ref: '#/definitions/basicConfigOrBoolean',
+              },
+            },
+          }],
+        }, {
+          enum: SPACING_VALUES,
+        }],
+      }, {
+        type: 'object',
+        properties: {
+          allowMultiline: {
+            type: 'boolean',
+          },
+          spacing: {
+            type: 'object',
+            properties: {
+              objectLiterals: {
+                enum: SPACING_VALUES,
+              },
+              arrayLiterals: {
+                enum: SPACING_VALUES,
+              },
+              multilineClose: {
+                enum: SPACING_VALUES,
+              },
+            },
+          },
+        },
+        additionalProperties: false,
+      }],
+    },
+  },
+
+  create (context) {
+    function normalizeConfig (configOrTrue, defaults, lastPass) {
+      const config = configOrTrue === true ? {} : configOrTrue
+      const when = config.when || defaults.when
+      const allowMultiline = Object.hasOwn(config, 'allowMultiline') ? config.allowMultiline : defaults.allowMultiline
+      const spacing = config.spacing || {}
+      let objectLiteralSpaces = spacing.objectLiterals || defaults.objectLiteralSpaces
+      let arrayLiteralSpaces = spacing.arrayLiterals || defaults.arrayLiteralSpaces
+      let multilineCloseSpaces = spacing.multilineClose || defaults.multilineCloseSpaces
+      if (lastPass) {
+        // On the final pass assign the values that should be derived from others if they are still undefined
+        objectLiteralSpaces = objectLiteralSpaces || when
+        arrayLiteralSpaces = arrayLiteralSpaces || when
+        multilineCloseSpaces = multilineCloseSpaces || when
+      }
+
+      return {
+        when,
+        allowMultiline,
+        objectLiteralSpaces,
+        arrayLiteralSpaces,
+        multilineCloseSpaces,
+      }
+    }
+
+    const DEFAULT_WHEN = SPACING.never
+    const DEFAULT_ALLOW_MULTILINE = true
+    const DEFAULT_ATTRIBUTES = true
+    const DEFAULT_CHILDREN = false
+
+    let originalConfig = context.options[0] || {}
+    if (SPACING_VALUES.indexOf(originalConfig) !== -1) {
+      originalConfig = Object.assign({ when: context.options[0] }, context.options[1])
+    }
+    const defaultConfig = normalizeConfig(originalConfig, {
+      when: DEFAULT_WHEN,
+      allowMultiline: DEFAULT_ALLOW_MULTILINE,
+    })
+    const attributes = Object.hasOwn(originalConfig, 'attributes') ? originalConfig.attributes : DEFAULT_ATTRIBUTES
+    const attributesConfig = attributes ? normalizeConfig(attributes, defaultConfig, true) : null
+    const children = Object.hasOwn(originalConfig, 'children') ? originalConfig.children : DEFAULT_CHILDREN
+    const childrenConfig = children ? normalizeConfig(children, defaultConfig, true) : null
+
+    // --------------------------------------------------------------------------
+    // Helpers
+    // --------------------------------------------------------------------------
+
+    /**
+     * Determines whether two adjacent tokens have a newline between them.
+     * @param {Object} left - The left token object.
+     * @param {Object} right - The right token object.
+     * @returns {boolean} Whether or not there is a newline between the tokens.
+     */
+    function isMultiline (left, right) {
+      return left.loc.end.line !== right.loc.start.line
+    }
+
+    /**
+     * Trims text of whitespace between two ranges
+     * @param {Fixer} fixer - the eslint fixer object
+     * @param {number} fromLoc - the start location
+     * @param {number} toLoc - the end location
+     * @param {string} mode - either 'start' or 'end'
+     * @param {string=} spacing - a spacing value that will optionally add a space to the removed text
+     * @returns {Object|*|{range, text}}
+     */
+    function fixByTrimmingWhitespace (fixer, fromLoc, toLoc, mode, spacing) {
+      let replacementText = context.getSourceCode().text.slice(fromLoc, toLoc)
+      if (mode === 'start') {
+        replacementText = replacementText.replace(/^\s+/gm, '')
+      } else {
+        replacementText = replacementText.replace(/\s+$/gm, '')
+      }
+      if (spacing === SPACING.always) {
+        if (mode === 'start') {
+          replacementText += ' '
+        } else {
+          replacementText = ` ${replacementText}`
+        }
+      }
+      return fixer.replaceTextRange([fromLoc, toLoc], replacementText)
+    }
+
+    /**
+     * Reports that there shouldn't be a newline after the first token
+     * @param {ASTNode} node - The node to report in the event of an error.
+     * @param {Token} token - The token to use for the report.
+     * @param {string} spacing
+     * @returns {void}
+     */
+    function reportNoBeginningNewline (node, token, spacing) {
+      context.report({
+        node,
+        loc: token.loc.start,
+        messageId: 'noNewlineAfter',
+        data: {
+          token: token.value,
+        },
+        fix (fixer) {
+          const nextToken = context.getSourceCode().getTokenAfter(token)
+          return fixByTrimmingWhitespace(fixer, token.range[1], nextToken.range[0], 'start', spacing)
+        },
+      })
+    }
+
+    /**
+     * Reports that there shouldn't be a newline before the last token
+     * @param {ASTNode} node - The node to report in the event of an error.
+     * @param {Token} token - The token to use for the report.
+     * @param {string} spacing
+     * @returns {void}
+     */
+    function reportNoEndingNewline (node, token, spacing) {
+      context.report({
+        node,
+        loc: token.loc.start,
+        messageId: 'noNewlineBefore',
+        data: {
+          token: token.value,
+        },
+        fix (fixer) {
+          const previousToken = context.getSourceCode().getTokenBefore(token)
+          return fixByTrimmingWhitespace(fixer, previousToken.range[1], token.range[0], 'end', spacing)
+        },
+      })
+    }
+
+    /**
+     * Reports that there shouldn't be a space after the first token
+     * @param {ASTNode} node - The node to report in the event of an error.
+     * @param {Token} token - The token to use for the report.
+     * @returns {void}
+     */
+    function reportNoBeginningSpace (node, token) {
+      context.report({
+        node,
+        loc: token.loc.start,
+        messageId: 'noSpaceAfter',
+        data: {
+          token: token.value,
+        },
+        fix (fixer) {
+          const sourceCode = context.getSourceCode()
+          const nextToken = sourceCode.getTokenAfter(token)
+          let nextComment
+
+          // eslint >=4.x
+          if (sourceCode.getCommentsAfter) {
+            nextComment = sourceCode.getCommentsAfter(token)
+            // eslint 3.x
+          } else {
+            const potentialComment = sourceCode.getTokenAfter(token, { includeComments: true })
+            nextComment = nextToken === potentialComment ? [] : [potentialComment]
+          }
+
+          // Take comments into consideration to narrow the fix range to what is actually affected. (See #1414)
+          if (nextComment.length > 0) {
+            return fixByTrimmingWhitespace(fixer, token.range[1], Math.min(nextToken.range[0], nextComment[0].range[0]), 'start')
+          }
+
+          return fixByTrimmingWhitespace(fixer, token.range[1], nextToken.range[0], 'start')
+        },
+      })
+    }
+
+    /**
+     * Reports that there shouldn't be a space before the last token
+     * @param {ASTNode} node - The node to report in the event of an error.
+     * @param {Token} token - The token to use for the report.
+     * @returns {void}
+     */
+    function reportNoEndingSpace (node, token) {
+      context.report({
+        node,
+        loc: token.loc.start,
+        messageId: 'noSpaceBefore',
+        data: {
+          token: token.value,
+        },
+        fix (fixer) {
+          const sourceCode = context.getSourceCode()
+          const previousToken = sourceCode.getTokenBefore(token)
+          let previousComment
+
+          // eslint >=4.x
+          if (sourceCode.getCommentsBefore) {
+            previousComment = sourceCode.getCommentsBefore(token)
+            // eslint 3.x
+          } else {
+            const potentialComment = sourceCode.getTokenBefore(token, { includeComments: true })
+            previousComment = previousToken === potentialComment ? [] : [potentialComment]
+          }
+
+          // Take comments into consideration to narrow the fix range to what is actually affected. (See #1414)
+          if (previousComment.length > 0) {
+            return fixByTrimmingWhitespace(fixer, Math.max(previousToken.range[1], previousComment[0].range[1]), token.range[0], 'end')
+          }
+
+          return fixByTrimmingWhitespace(fixer, previousToken.range[1], token.range[0], 'end')
+        },
+      })
+    }
+
+    /**
+     * Reports that there should be a space after the first token
+     * @param {ASTNode} node - The node to report in the event of an error.
+     * @param {Token} token - The token to use for the report.
+     * @returns {void}
+     */
+    function reportRequiredBeginningSpace (node, token) {
+      context.report({
+        node,
+        loc: token.loc.start,
+        messageId: 'spaceNeededAfter',
+        data: {
+          token: token.value,
+        },
+        fix (fixer) {
+          return fixer.insertTextAfter(token, ' ')
+        },
+      })
+    }
+
+    /**
+     * Reports that there should be a space before the last token
+     * @param {ASTNode} node - The node to report in the event of an error.
+     * @param {Token} token - The token to use for the report.
+     * @returns {void}
+     */
+    function reportRequiredEndingSpace (node, token) {
+      context.report({
+        node,
+        loc: token.loc.start,
+        messageId: 'spaceNeededBefore',
+        data: {
+          token: token.value,
+        },
+        fix (fixer) {
+          return fixer.insertTextBefore(token, ' ')
+        },
+      })
+    }
+
+    /**
+     * Determines if spacing in curly braces is valid.
+     * @param {ASTNode} node The AST node to check.
+     * @returns {void}
+     */
+    function validateBraceSpacing (node) {
+      let config
+      switch (node.parent.type) {
+        case 'JSXAttribute':
+        case 'JSXOpeningElement':
+          config = attributesConfig
+          break
+
+        case 'JSXElement':
+        case 'JSXFragment':
+          config = childrenConfig
+          break
+
+        default:
+          return
+      }
+      if (config === null) {
+        return
+      }
+
+      const sourceCode = context.getSourceCode()
+      const first = sourceCode.getFirstToken(node)
+      const last = sourceCode.getLastToken(node)
+      let second = sourceCode.getTokenAfter(first, { includeComments: true })
+      let penultimate = sourceCode.getTokenBefore(last, { includeComments: true })
+
+      if (!second) {
+        second = sourceCode.getTokenAfter(first)
+        const leadingComments = sourceCode.getNodeByRangeIndex(second.range[0]).leadingComments
+        second = leadingComments ? leadingComments[0] : second
+      }
+      if (!penultimate) {
+        penultimate = sourceCode.getTokenBefore(last)
+        const trailingComments = sourceCode.getNodeByRangeIndex(penultimate.range[0]).trailingComments
+        penultimate = trailingComments ? trailingComments[trailingComments.length - 1] : penultimate
+      }
+
+      const isObjectLiteral = second.value === '{'
+      const isArrayLiteral = second.value === '['
+      const isMultilineClose = isMultiline(first, last) && (penultimate.value === ')' || penultimate.value === '}' || penultimate.value === ']')
+      const spacing = isObjectLiteral ? config.objectLiteralSpaces
+        : isArrayLiteral ? config.arrayLiteralSpaces
+        : isMultilineClose ? (config.multilineCloseSpaces === SPACING.never ? 'mixed' : config.multilineCloseSpaces)
+        : config.when
+      if (spacing === SPACING.always) {
+        if (!sourceCode.isSpaceBetweenTokens(first, second)) {
+          reportRequiredBeginningSpace(node, first)
+        } else if (!config.allowMultiline && isMultiline(first, second)) {
+          reportNoBeginningNewline(node, first, spacing)
+        }
+        if (!sourceCode.isSpaceBetweenTokens(penultimate, last)) {
+          reportRequiredEndingSpace(node, last)
+        } else if (!config.allowMultiline && isMultiline(penultimate, last)) {
+          reportNoEndingNewline(node, last, spacing)
+        }
+      } else if (spacing === SPACING.never) {
+        if (isMultiline(first, second)) {
+          if (!config.allowMultiline) {
+            reportNoBeginningNewline(node, first, spacing)
+          }
+        } else if (sourceCode.isSpaceBetweenTokens(first, second)) {
+          reportNoBeginningSpace(node, first)
+        }
+        if (isMultiline(penultimate, last)) {
+          if (!config.allowMultiline) {
+            reportNoEndingNewline(node, last, spacing)
+          }
+        } else if (sourceCode.isSpaceBetweenTokens(penultimate, last)) {
+          reportNoEndingSpace(node, last)
+        }
+      } else if (spacing === 'mixed') {
+        if (!sourceCode.isSpaceBetweenTokens(first, second)) {
+          reportRequiredBeginningSpace(node, first)
+        } else if (!config.allowMultiline && isMultiline(first, second)) {
+          reportNoBeginningNewline(node, first, spacing)
+        }
+        if (isMultiline(penultimate, last)) {
+          if (!config.allowMultiline) {
+            reportNoEndingNewline(node, last, spacing)
+          }
+        } else if (isMultiline(first, last)) {
+          if (sourceCode.isSpaceBetweenTokens(penultimate, last)) {
+            reportNoEndingSpace(node, last)
+          }
+        } else if (!sourceCode.isSpaceBetweenTokens(penultimate, last)) {
+          reportRequiredEndingSpace(node, last)
+        }
+      }
+    }
+
+    // --------------------------------------------------------------------------
+    // Public
+    // --------------------------------------------------------------------------
+
+    return {
+      JSXExpressionContainer: validateBraceSpacing,
+      JSXSpreadAttribute: validateBraceSpacing,
+    }
+  },
+}
diff --git a/scripts/no-render-string-reference.js b/scripts/rules/no-render-string-reference.js
similarity index 69%
rename from scripts/no-render-string-reference.js
rename to scripts/rules/no-render-string-reference.js
index 62e0a6aa735..eb16435a057 100644
--- a/scripts/no-render-string-reference.js
+++ b/scripts/rules/no-render-string-reference.js
@@ -24,12 +24,14 @@ function isCustomComponent (node) {
     !allowedStrings.includes(node.arguments[0].value)
 }
 
-module.exports = function (context) {
-  return {
-    CallExpression (node) {
-      if (isCreateElementCall(node) && isStringRender(node) && isCustomComponent(node)) {
-        context.report(node.arguments[0], 'Do not render components by a string reference')
-      }
-    },
-  }
+module.exports = {
+  create (context) {
+    return {
+      CallExpression (node) {
+        if (isCreateElementCall(node) && isStringRender(node) && isCustomComponent(node)) {
+          context.report(node.arguments[0], 'Do not render components by a string reference')
+        }
+      },
+    }
+  },
 }