💅 useNamingConvention - should support distinguishing based on TypeScript types

[yairEO]

Environment information

CLI:
  Version:                      2.0.5
  Color support:                true

Platform:
  CPU Architecture:             x86_64
  OS:                           windows

Environment:
  BIOME_LOG_PATH:               unset
  BIOME_LOG_PREFIX_NAME:        unset
  BIOME_CONFIG_PATH:            unset
  BIOME_THREADS:                unset
  NO_COLOR:                     unset
  TERM:                         xterm-256color
  JS_RUNTIME_VERSION:           v21.7.3
  JS_RUNTIME_NAME:              node
  NODE_PACKAGE_MANAGER:         yarn/4.0.2

Biome Configuration:
  Status:                       Loaded successfully
  Path:                         biome.json
  Formatter enabled:            true
  Linter enabled:               true
  Assist enabled:               true
  VCS enabled:                  true

Linter:
  JavaScript enabled:           unset
  JSON enabled:                 unset
  CSS enabled:                  unset
  GraphQL enabled:              unset
  Recommended:                  true
  Enabled rules:
    complexity/noAdjacentSpacesInRegex
    complexity/noArguments
    complexity/noBannedTypes
    complexity/noCommaOperator
    complexity/noEmptyTypeParameters
    complexity/noExtraBooleanCast
    complexity/noFlatMapIdentity
    complexity/noStaticOnlyClass
    complexity/noThisInStatic
    complexity/noUselessCatch
    complexity/noUselessConstructor
    complexity/noUselessContinue
    complexity/noUselessEmptyExport
    complexity/noUselessEscapeInRegex
    complexity/noUselessFragments
    complexity/noUselessLabel
    complexity/noUselessLoneBlockStatements
    complexity/noUselessRename
    complexity/noUselessStringRaw
    complexity/noUselessSwitchCase
    complexity/noUselessTernary
    complexity/noUselessThisAlias
    complexity/noUselessTypeConstraint
    complexity/noUselessUndefinedInitialization
    complexity/useArrowFunction
    complexity/useDateNow
    complexity/useFlatMap
    complexity/useNumericLiterals
    complexity/useOptionalChain
    complexity/useRegexLiterals
    complexity/useSimpleNumberKeys
    correctness/noConstAssign
    correctness/noConstantCondition
    correctness/noConstantMathMinMaxClamp
    correctness/noConstructorReturn
    correctness/noEmptyCharacterClassInRegex
    correctness/noEmptyPattern
    correctness/noGlobalObjectCalls
    correctness/noInnerDeclarations
    correctness/noInvalidBuiltinInstantiation
    correctness/noInvalidConstructorSuper
    correctness/noInvalidDirectionInLinearGradient
    correctness/noInvalidGridAreas
    correctness/noInvalidPositionAtImportRule
    correctness/noInvalidUseBeforeDeclaration
    correctness/noMissingVarFunction
    correctness/noNonoctalDecimalEscape
    correctness/noPrecisionLoss
    correctness/noSelfAssign
    correctness/noSetterReturn
    correctness/noStringCaseMismatch
    correctness/noSwitchDeclarations
    correctness/noUnknownFunction
    correctness/noUnknownMediaFeatureName
    correctness/noUnknownProperty
    correctness/noUnknownPseudoClass
    correctness/noUnknownPseudoElement
    correctness/noUnknownTypeSelector
    correctness/noUnknownUnit
    correctness/noUnmatchableAnbSelector
    correctness/noUnreachable
    correctness/noUnreachableSuper
    correctness/noUnsafeFinally
    correctness/noUnsafeOptionalChaining
    correctness/noUnusedFunctionParameters
    correctness/noUnusedImports
    correctness/noUnusedLabels
    correctness/noUnusedPrivateClassMembers
    correctness/noUnusedVariables
    correctness/noVoidElementsWithChildren
    correctness/noVoidTypeReturn
    correctness/useExhaustiveDependencies
    correctness/useIsNan
    correctness/useValidForDirection
    correctness/useValidTypeof
    correctness/useYield
    performance/noAccumulatingSpread
    performance/noDynamicNamespaceImportAccess
    security/noBlankTarget
    security/noDangerouslySetInnerHtml
    security/noDangerouslySetInnerHtmlWithChildren
    security/noGlobalEval
    style/noDescendingSpecificity
    style/useArrayLiterals
    style/useConst
    style/useDeprecatedReason
    style/useExponentiationOperator
    style/useExportType
    style/useImportType
    style/useLiteralEnumMembers
    style/useNodejsImportProtocol
    style/useShorthandFunctionType
    suspicious/noApproximativeNumericConstant
    suspicious/noArrayIndexKey
    suspicious/noAssignInExpressions
    suspicious/noAsyncPromiseExecutor
    suspicious/noCatchAssign
    suspicious/noClassAssign
    suspicious/noCommentText
    suspicious/noCompareNegZero
    suspicious/noConfusingLabels
    suspicious/noConfusingVoidType
    suspicious/noConsole
    suspicious/noConstEnum
    suspicious/noControlCharactersInRegex
    suspicious/noDebugger
    suspicious/noDocumentCookie
    suspicious/noDoubleEquals
    suspicious/noDuplicateAtImportRules
    suspicious/noDuplicateCase
    suspicious/noDuplicateClassMembers
    suspicious/noDuplicateCustomProperties
    suspicious/noDuplicateElseIf
    suspicious/noDuplicateFields
    suspicious/noDuplicateFontNames
    suspicious/noDuplicateJsxProps
    suspicious/noDuplicateObjectKeys
    suspicious/noDuplicateParameters
    suspicious/noDuplicateProperties
    suspicious/noDuplicateSelectorsKeyframeBlock
    suspicious/noEmptyBlock
    suspicious/noEmptyInterface
    suspicious/noExplicitAny
    suspicious/noExtraNonNullAssertion
    suspicious/noFallthroughSwitchClause
    suspicious/noFunctionAssign
    suspicious/noGlobalAssign
    suspicious/noGlobalIsFinite
    suspicious/noGlobalIsNan
    suspicious/noImplicitAnyLet
    suspicious/noImportAssign
    suspicious/noImportantInKeyframe
    suspicious/noIrregularWhitespace
    suspicious/noLabelVar
    suspicious/noMisleadingCharacterClass
    suspicious/noMisleadingInstantiator
    suspicious/noMisrefactoredShorthandAssign
    suspicious/noOctalEscape
    suspicious/noPrototypeBuiltins
    suspicious/noRedeclare
    suspicious/noRedundantUseStrict
    suspicious/noSelfCompare
    suspicious/noShadowRestrictedNames
    suspicious/noShorthandPropertyOverrides
    suspicious/noSparseArray
    suspicious/noSuspiciousSemicolonInJsx
    suspicious/noTemplateCurlyInString
    suspicious/noThenProperty
    suspicious/noUnsafeDeclarationMerging
    suspicious/noUnsafeNegation
    suspicious/noWith
    suspicious/useAdjacentOverloadSignatures
    suspicious/useDefaultSwitchClauseLast
    suspicious/useGetterReturn
    suspicious/useGoogleFontDisplay
    suspicious/useIsArray
    suspicious/useNamespaceKeyword

Workspace:
  Open Documents:               0

Rule name

useNamingConvention

Playground link

https://biomejs.dev/playground/?lintRules=useNamingConvention&code=ZQB4AHAAbwByAHQAIABjAG8AbgBzAHQAIABmAG8AbwAgAD0AIAAxADsAIAAvAC8AIABzAGgAbwB1AGwAZAAgAGIAZQAgAEMATwBOAFMAVABBAE4AVABfAEMAQQBTAEUACgBlAHgAcABvAHIAdAAgAGMAbwBuAHMAdAAgAGIAYQByACAAPQAgAHsAYQA6ADEAfQA7ACAAIAAvAC8AIABzAGgAbwB1AGwAZAAgAGIAZQAgAEMATwBOAFMAVABBAE4AVABfAEMAQQBTAEUACgBlAHgAcABvAHIAdAAgAGMAbwBuAHMAdAAgAGQAbwBTAHQAdQBmAGYAIAA9ACAAKAApACAAPQA%2BACAAewAuAC4ALgB9ACAALwAvACAALwAvACAAVgBhAGwAaQBkACAAZgB1AG4AYwB0AGkAbwBuACAAYwBvAG4AcwB0ACAAbgBhAG0AZQAKAAoALwAvACAAUgBlAGEAYwB0AC0AcwBwAGUAYwBpAGYAaQBjAAoAZQB4AHAAbwByAHQAIABjAG8AbgBzAHQAIAB1AHMAZQBXAGgAYQB0AGUAdgBlAHIAIAA9ACAAKAApACAAPQA%2BACAAewAgAC4ALgAuACAAfQA7ACAALwAvACAAVgBhAGwAaQBkACAAcgBlAGEAYwB0ACAAaABvAG8AawAgAGMAbwBuAHMAdAAgAG4AYQBtAGUAIABPAE4ATABZACAAaQBmACAAaQB0ACAAcwB0AGEAcgB0AHMAIAB3AGkAdABoACAAdABoAGUAIAB3AG8AcgBkACAAIgB1AHMAZQAiAAoAZQB4AHAAbwByAHQAIABjAG8AbgBzAHQAIABUAGUAcwB0AEMAbwBtAHAAbwBuAGUAbgB0ACAAPQAgACgAKQAgAD0APgAgAG4AdQBsAGwAOwAgAC8ALwAgAFYAYQBsAGkAZAAgAGMAbwBuAHMAdAAgAG4AYQBtAGUACgBlAHgAcABvAHIAdAAgAGMAbwBuAHMAdAAgAEMAbwBtAHAAbwBuAGUAbgB0ACAAPQAgAHcAaQB0AGgATQBvAGQAYQBsACgAVABlAHMAdABDAG8AbQBwAG8AbgBlAG4AdAApADsAIAAvAC8AIABWAGEAbABpAGQAIABjAG8AbgBzAHQAIABuAGEAbQBlAA%3D%3D&ruleDomains.react=all&ruleDomains.test=recommended

Expected result

ESLINT has the types property which Biome lacks, and it is very powerful.

"@typescript-eslint/naming-convention": [
  "error",
  {
    selector: "variable",
    modifiers: ["const", "global"],
    types: ["boolean", "string", "number", "array"],
    format: ["UPPER_CASE"],
  },
  {
    selector: "variable",
    modifiers: ["const", "global"],
    types: ["function"],
    format: ["camelCase", "PascalCase"],
  },
  {
    selector: "variable",
    modifiers: ["const"],
    format: null,
  },
],

I am a React (frontend) developer and below are some scenarios I need linting for my team:

export const foo = 1; // should be CONSTANT_CASE
export const bar = {a:1};  // should be CONSTANT_CASE
export const doStuff = () => {...} // // Valid function const name

// React-specific
export const useWhatever = () => { ... }; // Valid react hook const name ONLY if it starts with the word "use"
export const TestComponent = () => null; // Valid const name
export const Component = withModal(TestComponent); // Valid const name

The current way useNamingConvention is limiting in very common React projects and cannot work to enforce primitive (by type) global constants to be in CONSTANT_CASE, while enforcing other React specific naming conventions.

Code of Conduct

• I agree to follow Biome's Code of Conduct

[ematipico]

I will move this into a discussion, as an idea. The rule is inspired from eslint typescript rule.

[yairEO]

if it was inspired then why the types where not ported also? It's super powerful

[arendjr]

Inspired here means that it’s not a literal port of the rule. We generally don’t port options until users show sufficient demand for them.

That said, I think the suggestion makes sense.

What does the last block in your config mean though? It has neither types and format is null. Does it mean to not enforce anything for anything not matched by the other blocks? And if so, can it be left out too?

One thing I wonder, would it be acceptable to only look at the syntax of the value being assigned? That would mean the line export const Component = withModal(TestComponent); doesn’t get validated, but I wonder if that’s a big deal.

[yairEO]

I don't remember now regarding the last block (I wrote it quite a while back),

BUT, I've created a typescript-eslint-playground for you to see it in-action

And here is the rule's reference: https://typescript-eslint.io/rules/naming-convention

[Conaclos]

One of the reason I didn't implement this feature is because of its low usage according to my investigation on GitHub.

[Conaclos]

I got one idea: We could recognize (arrow) functions assigned to a const as function instead of const. This should fill most of the request.

[yairEO]

but what about non-arrow function? or const like the last example I gave:

export const TestComponent = () => null; // Valid const name
export const Component = withModal(TestComponent); // Valid const name

Where Component is a React component which must start with a capital C and the rest lowercase

[Conaclos]

Even if we add types, it is unlikely we use type inference. Thus, we will use syntax to determine types. The best we could do for the second one is to accept both Component and COMPONENT, the type could be other.

[yairEO]

Still adding types support (even if for now syntax analysis determines it) will be the optimal options-naming choice, as it should be good-enough for years to come, even if in 5 years from now Biome will magically use type inference.

[yairEO]

Hi! any news...?

[caliguIa]

I have a similar need for this.
At my company we use the following rule:

            {
                "selector": "variable",
                "types": ["boolean"],
                "format": ["PascalCase", "camelCase"],
                "custom": {
                    // boolean qualifiers allowed at start or in the middle of variable names
                    "regex": "(?:is|has|can|should|was|will|are|does)[A-Z]\\w*|\\w+(Is|Has|Can|Should|Was|Will|Are|Does)[A-Z]\\w*",
                    "match": true
                }
            }

ensuring boolean variables have a consistent naming pattern:
e.g.
const isOpen = true // valid
const closed = false // invalid

is there any current way to achieve this in biome?

[arendjr]

I think you can achieve this today with a GritQL plugin and using some regular expression.