Skip to content

📝 Formatter breaks dot notation in Svelte component names #9300

@sepagian

Description

@sepagian

Environment information

Details
CLI:
  Version:                      2.3.13
  Color support:                true

Platform:
  CPU Architecture:             x86_64
  OS:                           linux

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:           v25.2.1
  JS_RUNTIME_NAME:              node
  NODE_PACKAGE_MANAGER:         unset

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

Formatter:
  Format with errors:           true
  Indent style:                 Space
  Indent width:                 2
  Line ending:                  LF
  Line width:                   80
  Attribute position:           Auto
  Bracket spacing:              true
  Includes:                     **/*.svelte, **/*.vue, **/*.ts, **/*.tsx, **/*.js, **/*.jsx

JavaScript Formatter:
  Enabled:                      unset
  JSX quote style:              Double Quotes
  Quote properties:             As needed
  Trailing commas:              ES5
  Semicolons:                   Always
  Arrow parentheses:            Always
  Bracket spacing:              unset
  Bracket same line:            false
  Quote style:                  Double Quotes
  Indent style:                 unset
  Indent width:                 unset
  Line ending:                  unset
  Line width:                   unset
  Attribute position:           unset

JSON Formatter:
  Enabled:                      true
  Indent style:                 Space
  Indent width:                 2
  Line ending:                  LF
  Line width:                   80
  Trailing Commas:              None
  Expand lists:                 unset

CSS Formatter:
  Enabled:                      true
  Indent style:                 unset
  Indent width:                 unset
  Line ending:                  LF
  Line width:                   80
  Quote style:                  Double Quotes

GraphQL Formatter:
  Enabled:                      unset
  Indent style:                 unset
  Indent width:                 unset
  Line ending:                  unset
  Line width:                   unset
  Bracket spacing:              unset
  Quote style:                  unset

Workspace:
  Open Documents:               0

Configuration

{
  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
  "vcs": {
    "enabled": false,
    "clientKind": "git",
    "useIgnoreFile": false
  },
  "files": {
    "ignoreUnknown": false,
    "includes": [
      "!**/.next",
      "!**/dist",
      "!**/.turbo",
      "!**/dev-dist",
      "!**/.zed",
      "!**/.vscode",
      "!**/routeTree.gen.ts",
      "!**/src-tauri",
      "!**/.nuxt",
      "!bts.jsonc",
      "!**/.expo",
      "!**/.wrangler",
      "!**/.alchemy",
      "!**/.svelte-kit",
      "!**/wrangler.jsonc",
      "!**/.source",
      "!**/convex/_generated"
    ]
  },
  "formatter": {
    "enabled": true,
    "indentStyle": "space",
    "indentWidth": 2,
    "includes": [
      "**/*.svelte",
      "**/*.vue",
      "**/*.ts",
      "**/*.tsx",
      "**/*.js",
      "**/*.jsx"
    ]
  },
  "assist": {
    "actions": {
      "source": {
        "organizeImports": "on"
      }
    }
  },
  "linter": {
    "enabled": true,
    "includes": [
      "**/*.svelte",
      "**/*.vue",
      "**/*.ts",
      "**/*.tsx",
      "**/*.js",
      "**/*.jsx"
    ],
    "rules": {
      "recommended": true,
      "correctness": {
        "useExhaustiveDependencies": "info"
      },
      "performance": {
        "noBarrelFile": "warn"
      },
      "nursery": {
        "useSortedClasses": {
          "level": "warn",
          "fix": "safe",
          "options": {
            "functions": ["clsx", "cva", "cn"]
          }
        }
      },
      "style": {
        "noParameterAssign": "error",
        "useAsConstAssertion": "error",
        "useDefaultParameterLast": "error",
        "useEnumInitializers": "error",
        "useSelfClosingElements": "error",
        "useSingleVarDeclarator": "error",
        "noUnusedTemplateLiteral": "error",
        "useNumberNamespace": "error",
        "noInferrableTypes": "error",
        "noUselessElse": "error"
      }
    }
  },
  "javascript": {
    "formatter": {
      "quoteStyle": "double"
    }
  },
  "css": {
    "parser": {
      "tailwindDirectives": true
    }
  },
  "extends": ["ultracite/biome/core", "ultracite/biome/svelte"]
}

Playground link

https://biomejs.dev/playground/?code=PABmAG8AcgBtAC4ARgBpAGUAbABkAD4ACgA8AC8AZgBvAHIAbQAuAEYAaQBlAGwAZAA%2BAAoAPABmAG8AcgBtAC4AUwB1AGIAcwBjAHIAaQBiAGUAPgAKADwALwBmAG8AcgBtAC4AUwB1AGIAcwBjAHIAaQBiAGUAPgAKADwAZABhAHQAYQAuAGMAbABpAGUAbgB0AD4ACgA8AC8AZABhAHQAYQAuAGMAbABpAGUAbgB0AD4ACgAKADwARgBvAHIAbQAuAEYAaQBlAGwAZAA%2BADwALwBGAG8AcgBtAC4ARgBpAGUAbABkAD4ACgA8AEYAbwByAG0ALgBTAHUAYgBzAGMAcgBpAGIAZQA%2BADwALwBGAG8AcgBtAC4AUwB1AGIAcwBjAHIAaQBiAGUAPgAKADwARABhAHQAYQAuAEMAbABpAGUAbgB0AD4APAAvAEQAYQB0AGEALgBDAGwAaQBlAG4AdAA%2BAA%3D%3D&language=svelte&ruleDomains.test=all

Code of Conduct

  • I agree to follow Biome's Code of Conduct

Metadata

Metadata

Assignees

No one assigned

    Labels

    A-ParserArea: parserL-HTMLLanguage: HTML and super languagesS-Bug-confirmedStatus: report has been confirmed as a valid bugS-Good first issueStatus: Good for newcomers

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions