💅 Perhaps ignore single spaces in `useConsistentCurlyBraces` rule

[hilja]

Environment information

CLI:
  Version:                      1.9.3
  Color support:                true

Platform:
  CPU Architecture:             aarch64
  OS:                           macos

Environment:
  BIOME_LOG_PATH:               unset
  BIOME_LOG_PREFIX_NAME:        unset
  BIOME_CONFIG_PATH:            unset
  NO_COLOR:                     unset
  TERM:                         "alacritty"
  JS_RUNTIME_VERSION:           "v20.17.0"
  JS_RUNTIME_NAME:              "node"
  NODE_PACKAGE_MANAGER:         "pnpm/9.11.0"

Biome Configuration:
  Status:                       Loaded successfully
  Formatter disabled:           false
  Linter disabled:              false
  Organize imports disabled:    false
  VCS disabled:                 false

Linter:
  JavaScript enabled:           true
  JSON enabled:                 true
  CSS enabled:                  true
  GraphQL enabled:              false
  Recommended:                  true
  All:                          false
  Enabled rules:
  suspicious/noClassAssign
  suspicious/noCatchAssign
  suspicious/noUnsafeNegation
  complexity/useLiteralKeys
  style/useImportType
  complexity/noMultipleSpacesInRegularExpressionLiterals
  a11y/useValidLang
  complexity/noUselessEmptyExport
  suspicious/useNamespaceKeyword
  suspicious/useValidTypeof
  suspicious/noAssignInExpressions
  a11y/useValidAriaRole
  correctness/noConstantCondition
  a11y/useAriaActivedescendantWithTabindex
  style/useDefaultParameterLast
  complexity/noEmptyTypeParameters
  correctness/noConstructorReturn
  style/useSelfClosingElements
  suspicious/noDuplicateParameters
  suspicious/noDuplicateSelectorsKeyframeBlock
  suspicious/noMisplacedAssertion
  correctness/noUnknownProperty
  style/useTemplate
  correctness/noUnusedLabels
  complexity/noUselessTernary
  correctness/noUnreachableSuper
  suspicious/noCompareNegZero
  correctness/noSwitchDeclarations
  a11y/noAutofocus
  correctness/noUnsafeOptionalChaining
  correctness/noConstAssign
  suspicious/noControlCharactersInRegex
  complexity/noUselessTypeConstraint
  style/noVar
  suspicious/noDoubleEquals
  suspicious/noRedundantUseStrict
  style/useLiteralEnumMembers
  suspicious/noGlobalIsNan
  suspicious/noEmptyInterface
  suspicious/noConstEnum
  suspicious/noMisleadingCharacterClass
  correctness/noPrecisionLoss
  a11y/noLabelWithoutControl
  suspicious/noRedeclare
  correctness/noStringCaseMismatch
  correctness/noSetterReturn
  correctness/noInvalidConstructorSuper
  suspicious/noImplicitAnyLet
  suspicious/noFallthroughSwitchClause
  suspicious/noUnsafeDeclarationMerging
  complexity/noUselessThisAlias
  correctness/noUnreachable
  a11y/useKeyWithClickEvents
  suspicious/noDuplicateObjectKeys
  complexity/noThisInStatic
  complexity/useOptionalChain
  correctness/noInnerDeclarations
  suspicious/noDuplicateCase
  a11y/useValidAnchor
  complexity/useRegexLiterals
  correctness/noSelfAssign
  correctness/noInvalidBuiltinInstantiation
  style/noUselessElse
  style/useShorthandFunctionType
  suspicious/noShadowRestrictedNames
  correctness/noInvalidDirectionInLinearGradient
  style/useThrowNewError
  suspicious/noImportantInKeyframe
  a11y/useMediaCaption
  complexity/noUselessLabel
  complexity/noUselessCatch
  correctness/noUnsafeFinally
  a11y/useAriaPropsForRole
  correctness/noNonoctalDecimalEscape
  style/useEnumInitializers
  a11y/useHtmlLang
  suspicious/noDuplicateTestHooks
  complexity/noStaticOnlyClass
  suspicious/noEvolvingTypes
  style/useWhile
  complexity/useArrowFunction
  style/noInferrableTypes
  a11y/noNoninteractiveTabindex
  complexity/useSimpleNumberKeys
  correctness/useYield
  a11y/noInteractiveElementToNoninteractiveRole
  style/useNumericLiterals
  correctness/noUnnecessaryContinue
  suspicious/noApproximativeNumericConstant
  suspicious/noImportAssign
  suspicious/noLabelVar
  correctness/noGlobalObjectCalls
  suspicious/useDefaultSwitchClauseLast
  correctness/noUnknownUnit
  a11y/useAltText
  correctness/noEmptyCharacterClassInRegex
  suspicious/noSparseArray
  a11y/useIframeTitle
  complexity/noBannedTypes
  correctness/noVoidElementsWithChildren
  suspicious/noPrototypeBuiltins
  style/useAsConstAssertion
  correctness/useJsxKeyInIterable
  style/useExportType
  suspicious/noDebugger
  complexity/noUselessLoneBlockStatements
  suspicious/noGlobalAssign
  style/noArguments
  a11y/useValidAriaValues
  a11y/useFocusableInteractive
  suspicious/noCommentText
  correctness/noUnmatchableAnbSelector
  suspicious/noDuplicateJsxProps
  suspicious/noMisleadingInstantiator
  a11y/noPositiveTabindex
  correctness/noEmptyPattern
  complexity/noExcessiveNestedTestSuites
  security/noDangerouslySetInnerHtmlWithChildren
  a11y/useKeyWithMouseEvents
  suspicious/noExtraNonNullAssertion
  suspicious/noShorthandPropertyOverrides
  correctness/noRenderReturnValue
  correctness/useExhaustiveDependencies
  nursery/noSecrets
  security/noGlobalEval
  a11y/noRedundantRoles
  complexity/useFlatMap
  correctness/useIsNan
  correctness/useHookAtTopLevel
  correctness/noUnusedVariables
  style/useConst
  suspicious/noGlobalIsFinite
  suspicious/noAsyncPromiseExecutor
  nursery/noIrregularWhitespace
  suspicious/noDuplicateFontNames
  suspicious/useGetterReturn
  style/useNodejsImportProtocol
  suspicious/noSelfCompare
  a11y/noDistractingElements
  suspicious/noArrayIndexKey
  complexity/noWith
  suspicious/noDuplicateClassMembers
  complexity/noExtraBooleanCast
  suspicious/noSuspiciousSemicolonInJsx
  a11y/useValidAriaProps
  a11y/noRedundantAlt
  correctness/noChildrenProp
  correctness/noUnknownFunction
  correctness/noInvalidPositionAtImportRule
  suspicious/noConfusingLabels
  suspicious/noThenProperty
  suspicious/noConfusingVoidType
  suspicious/noFocusedTests
  a11y/useButtonType
  a11y/useSemanticElements
  style/noShoutyConstants
  a11y/noAriaUnsupportedElements
  correctness/noInvalidGridAreas
  style/useFilenamingConvention
  correctness/noFlatMapIdentity
  a11y/noBlankTarget
  a11y/useHeadingContent
  nursery/noDynamicNamespaceImportAccess
  correctness/useValidForDirection
  correctness/noVoidTypeReturn
  correctness/noInvalidUseBeforeDeclaration
  a11y/noAriaHiddenOnFocusable
  a11y/useGenericFontNames
  correctness/noUnknownMediaFeatureName
  a11y/useAnchorContent
  complexity/noUselessRename
  style/useNumberNamespace
  complexity/noUselessConstructor
  a11y/noAccessKey
  nursery/useSortedClasses
  style/noUnusedTemplateLiteral
  complexity/noUselessSwitchCase
  style/useExponentiationOperator
  style/noNegationElse
  nursery/useAriaPropsSupportedByRole
  style/useSingleVarDeclarator
  suspicious/noExportsInTest
  a11y/noNoninteractiveElementToInteractiveRole
  style/noCommaOperator
  suspicious/noDuplicateAtImportRules
  suspicious/useIsArray
  nursery/useConsistentCurlyBraces
  a11y/noHeaderScope
  complexity/noUselessFragments
  suspicious/noMisrefactoredShorthandAssign
  suspicious/noEmptyBlock
  complexity/noForEach
  correctness/noUnusedImports
  suspicious/noFunctionAssign

Workspace:
  Open Documents:               0

Rule name

useConsistentCurlyBraces

Playground link

https://biomejs.dev/playground/?lintRules=all&code=ZQB4AHAAbwByAHQAIABmAHUAbgBjAHQAaQBvAG4AIABGAG8AbwAoACkAOgAgAHUAbgBrAG4AbwB3AG4AIAB7AAoAIAAgAHIAZQB0AHUAcgBuACAAKAAKACAAIAAgACAAPAA%2BAAoAIAAgACAAIAAgACAAewAvACoAIABSAGUAbgBkAGUAcgBzACAAIgBmAG8AbwAgAGIAYQByACAAYgBhAHoAIgAuACAAVwBpAHQAaABvAHUAdAAgAGAAewAnACAAJwB9AGAAOgAgACIAZgBvAG8AYgBhAHIAYgBhAHoAIgAgACoALwB9AAoAIAAgACAAIAAgACAAPABzAHAAYQBuAD4AZgBvAG8APAAvAHMAcABhAG4APgB7ACcAIAAnAH0ACgAgACAAIAAgACAAIAA8AHMAcABhAG4APgBiAGEAcgA8AC8AcwBwAGEAbgA%2BAHsAJwAgACcAfQAKACAAIAAgACAAIAAgADwAcwBwAGEAbgA%2BAGIAYQB6ADwALwBzAHAAYQBuAD4ACgAgACAAIAAgADwALwA%2BAAoAIAAgACkACgB9AAoACgBlAHgAcABvAHIAdAAgAGYAdQBuAGMAdABpAG8AbgAgAEYAbwBvADIAKAApADoAIAB1AG4AawBuAG8AdwBuACAAewAKACAAIAByAGUAdAB1AHIAbgAgACgACgAgACAAIAAgADwAPgAKACAAIAAgACAAIAAgAHsALwAqACAAVAByAGkAZwBnAGUAcgBzACAAYQBuAG8AdABoAGUAcgAgAHIAdQBsAGUAIAAqAC8AfQAKACAAIAAgACAAIAAgADwAPgA8AHMAcABhAG4APgBmAG8AbwA8AC8AcwBwAGEAbgA%2BACAAPAAvAD4ACgAgACAAIAAgACAAIAA8AD4APABzAHAAYQBuAD4AYgBhAHIAPAAvAHMAcABhAG4APgAgADwALwA%2BAAoAIAAgACAAIAAgACAAPABzAHAAYQBuAD4AYgBhAHoAPAAvAHMAcABhAG4APgAKACAAIAAgACAAPAAvAD4ACgAgACAAKQAKAH0A

Expected result

This rule functions technically right, but it could cater to a well known convention.

A common pattern in React is to use {' '} at the end of a line to add a space between inline elements:

function Foo() {
  return (
    <>
      <span>foo</span>{' '}
      <span>bar</span>{' '}
      <span>baz</span>
    </>
  )
}

This renders "foo bar baz", without the {' '} it would be "foobarbaz". The space is "difficult" to get there otherwise.

Of course it could be styled to achieve the spaces:

function Foo() {
  return (
    <div className='flex gap-1'>
      <span>foo</span>
      <span>bar</span>
      <span>baz</span>
    </div>
  )
}

Could also use Unicode HTML escape:

Edit: actually you need to use a   for it to stick in all situations, not a  , which is a normal space.

function Foo() {
  return (
    <>
      <span>foo</span>&nbsp;
      <span>bar</span>&nbsp;
      <span>baz</span>
    </>
  )
}

Or extra fragment (which triggers noUselessFragments, though):

function Foo() {
  return (
    <>
      <><span>foo</span> </>
      <><span>bar</span> </>
      <span>baz</span>
    </>
  )
}

It’s annoying to add exceptions, but sometimes {' '} is just so handy. What do y'all think?

More jabber in StackOverflow.

Code of Conduct

• [X] I agree to follow Biome's Code of Conduct