chore(lint): consistent JSX curly spacing

vuetifyjs · Mar 8, 2023 · 97b22d2 · 97b22d2
1 parent ba11898
commit 97b22d2
Show file tree

Hide file tree

Showing 96 changed files with 814 additions and 335 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>