💅 Perhaps ignore single spaces in useConsistentCurlyBraces rule #4154
Description
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: 0Rule name
useConsistentCurlyBraces
Playground link
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>
<span>bar</span>
<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
- I agree to follow Biome's Code of Conduct