💅 Svelte linter issues with useConst and useImportType

[olafurw]

Environment information

CLI:
  Version:                      1.8.3
  Color support:                true

Platform:
  CPU Architecture:             x86_64
  OS:                           linux

Environment:
  BIOME_LOG_DIR:                unset
  NO_COLOR:                     unset
  TERM:                         "xterm-256color"
  JS_RUNTIME_VERSION:           "v18.20.2"
  JS_RUNTIME_NAME:              "node"
  NODE_PACKAGE_MANAGER:         "npm/10.5.0"

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

Linter:
  JavaScript enabled:           true
  JSON enabled:                 true
  CSS enabled:                  false
  Recommended:                  true
  All:                          false
  Enabled rules:
  performance/noDelete
  suspicious/noCatchAssign
  suspicious/noUnsafeNegation
  complexity/useLiteralKeys
  style/useImportType
  complexity/noMultipleSpacesInRegularExpressionLiterals
  a11y/useValidLang
  complexity/noUselessEmptyExport
  suspicious/useNamespaceKeyword
  suspicious/useValidTypeof
  a11y/useValidAriaRole
  correctness/noConstantCondition
  a11y/useAriaActivedescendantWithTabindex
  suspicious/noAssignInExpressions
  style/useDefaultParameterLast
  complexity/noEmptyTypeParameters
  correctness/noConstructorReturn
  style/useSelfClosingElements
  suspicious/noDuplicateParameters
  style/useTemplate
  correctness/noUnusedLabels
  complexity/noUselessTernary
  correctness/noUnreachableSuper
  suspicious/noCompareNegZero
  suspicious/noExplicitAny
  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
  suspicious/noRedeclare
  correctness/noStringCaseMismatch
  correctness/noSetterReturn
  correctness/noInvalidConstructorSuper
  suspicious/noImplicitAnyLet
  suspicious/noFallthroughSwitchClause
  suspicious/noUnsafeDeclarationMerging
  correctness/noUnreachable
  a11y/useKeyWithClickEvents
  suspicious/noDuplicateObjectKeys
  complexity/noUselessThisAlias
  complexity/noThisInStatic
  complexity/useOptionalChain
  correctness/noInnerDeclarations
  style/noParameterAssign
  suspicious/noDuplicateCase
  a11y/useValidAnchor
  complexity/useRegexLiterals
  correctness/noSelfAssign
  style/noUselessElse
  style/useShorthandFunctionType
  suspicious/noShadowRestrictedNames
  a11y/useMediaCaption
  complexity/noUselessLabel
  complexity/noUselessCatch
  correctness/noUnsafeFinally
  a11y/useAriaPropsForRole
  correctness/noNonoctalDecimalEscape
  style/useEnumInitializers
  a11y/useHtmlLang
  suspicious/noDuplicateTestHooks
  complexity/noStaticOnlyClass
  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
  a11y/useAltText
  correctness/noEmptyCharacterClassInRegex
  suspicious/noSuspiciousSemicolonInJsx
  suspicious/noSparseArray
  a11y/useIframeTitle
  complexity/noBannedTypes
  a11y/noSvgWithoutTitle
  correctness/noVoidElementsWithChildren
  style/useAsConstAssertion
  correctness/useJsxKeyInIterable
  style/useExportType
  complexity/noUselessLoneBlockStatements
  suspicious/noPrototypeBuiltins
  suspicious/noMisleadingInstantiator
  suspicious/noDebugger
  style/noArguments
  a11y/useValidAriaValues
  suspicious/noCommentText
  suspicious/noThenProperty
  suspicious/noDuplicateJsxProps
  suspicious/noGlobalAssign
  a11y/noPositiveTabindex
  correctness/noEmptyPattern
  complexity/noExcessiveNestedTestSuites
  security/noDangerouslySetInnerHtmlWithChildren
  a11y/useKeyWithMouseEvents
  suspicious/noExtraNonNullAssertion
  suspicious/useGetterReturn
  correctness/noRenderReturnValue
  correctness/useExhaustiveDependencies
  security/noGlobalEval
  style/noNonNullAssertion
  a11y/noRedundantRoles
  complexity/useFlatMap
  correctness/useIsNan
  style/useConst
  suspicious/noGlobalIsFinite
  suspicious/noSelfCompare
  suspicious/noAsyncPromiseExecutor
  security/noDangerouslySetInnerHtml
  style/useNodejsImportProtocol
  a11y/noDistractingElements
  suspicious/noArrayIndexKey
  complexity/noWith
  suspicious/noDuplicateClassMembers
  complexity/noExtraBooleanCast
  performance/noAccumulatingSpread
  a11y/useValidAriaProps
  a11y/noRedundantAlt
  correctness/noChildrenProp
  suspicious/noConfusingLabels
  suspicious/noConfusingVoidType
  suspicious/noFocusedTests
  a11y/useButtonType
  a11y/noAriaUnsupportedElements
  correctness/noFlatMapIdentity
  a11y/noBlankTarget
  a11y/useHeadingContent
  correctness/useValidForDirection
  correctness/noVoidTypeReturn
  correctness/noInvalidUseBeforeDeclaration
  a11y/noAriaHiddenOnFocusable
  a11y/useAnchorContent
  complexity/noUselessRename
  correctness/noInvalidNewBuiltin
  style/useNumberNamespace
  complexity/noUselessConstructor
  a11y/noAccessKey
  style/useExponentiationOperator
  style/noUnusedTemplateLiteral
  complexity/noUselessSwitchCase
  style/useSingleVarDeclarator
  suspicious/noExportsInTest
  a11y/noNoninteractiveElementToInteractiveRole
  style/noCommaOperator
  suspicious/useIsArray
  a11y/noHeaderScope
  complexity/noUselessFragments
  suspicious/noMisrefactoredShorthandAssign
  complexity/noForEach
  suspicious/noClassAssign
  suspicious/noFunctionAssign

Workspace:
  Open Documents:               0

Rule name

biomelint/style/useConst - biomelint/style/useImportType

Playground link

https://github.com/olafurw/biome-svelte-issues

Expected result

I started to move our platform to use Biome but I got these conflicting reports where Biome would be unhappy about something but if I fixed it then Svelte would complain.

So I decided to collect the issues I've found in a little repo. If you clone the repo, it should be enough to npm install and npm run full to see the errors.

Here is one of the issues in the repo, where Svelte and Biome are conflicted about how the import of an Enum type is used.

<script lang="ts">
    // This line makes biome happy but svelte complains in the HTML section
    import type { MyEnum } from "$lib/types";

    // This line makes svelte happy but biome complains
    // All these imports are only used as types.biomelint/style/useImportType
    // import { MyEnum } from "$lib/types";

    const value: MyEnum | undefined = undefined;
</script>

<div>
    {#if value === MyEnum.A}
        A
    {:else if value === MyEnum.B}
        B
    {:else}
        C
    {/if}
</div>

I saw that do know about the useConst regarding the export let, which is fine but the bind case is one that I did not find a solution to.

<script lang="ts">
    import MyComponent from "./MyComponent.svelte";

    // This line makes svelte happy, since bind can't be used on const variables
    // But biome complains: This let declares a variable that is only assigned once.biomelint/style/useConst
    // let value: number | undefined = undefined;

    // This line makes biome happy, but svelte complains
    const value: number | undefined = undefined;
</script>

<MyComponent bind:value />

Code of Conduct

• I agree to follow Biome's Code of Conduct

[minht11]

Biome supports for Svelte only partially, check language support section for more. Specifically it does not check templates, only script blocks. You should disable these rules on svelte files.

[olafurw]

Specifically it does not check templates, only script blocks. You should disable these rules on svelte files.

I say that in the PR

I saw that [you] do know about the useConst regarding the export let, which is fine

But those two other cases are not mentioned in that section. I did not find a issue report for the bind case and I only found an issue for the enum type import just now and not initially. Which is why I made the PR.

Why don't you want issue reports even if the support is partial?

[minht11]

I did convert it to discussion, not outright close it. For now there is nothing actionable todo. As far as biome concerned anything outside script block does not exist.

But I agree that this should be documented. I opened PR for that biomejs/website#787

[rkofman]

@minht11 other linters seem to integrate more fully. Are there ways to bridge the gap with Biome as well -- whether natively or in a plugin; or is it a core architectural limitation?

[rkofman]

oh, nevermind; found the core discussion for this here: #1726

I would suspect the current discussion can be closed and essentially folded into that one. tl;dr: until #1726 resolves, these rules cannot be applied to html-ish files and there's not any more useful discussion to be had here.