Skip to content

🐛 Bug: Biome crashes when a Vue Option API method is missing a trailing comma and has different indentation than the next method #6076

@AQMpolyface

Description

@AQMpolyface

Environment information

CLI:
  Version:                      1.9.4
  Color support:                true

Platform:
  CPU Architecture:             x86_64
  OS:                           windows

Environment:
  BIOME_LOG_PATH:               unset
  BIOME_LOG_PREFIX_NAME:        unset
  BIOME_CONFIG_PATH:            unset
  NO_COLOR:                     unset
  TERM:                         unset
  JS_RUNTIME_VERSION:           "v23.11.0"
  JS_RUNTIME_NAME:              "node"
  NODE_PACKAGE_MANAGER:         unset

Biome Configuration:
  Status:                       unset

Workspace:
  Open Documents:               0

What happened?

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  methods: {
  DoSmth() {

  }
    doSomthelse() {
    },
  },
});
</script>

<template>
</template>

in the snippet above, when the doSmth function is missing a comma after it AND its not formatted the same as the next method in vue option api, i get this error when doing biome format --fix App.vue

App.vue:5:5 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × expected `,` but instead found `doSomthelse`

    3 │ export default defineComponent({
    4 │   methods: {
  > 5 │    DoSmth() {
      │     ^^^^^^^^^
  > 6 │
  > 7 │   }
Biome encountered an unexpected error

This is a bug in Biome, not an error in your code, and we would appreciate it if you could report it to https://github.com/biomejs/biome/issues/ along with the following information to help us fixing the issue:

Source Location: D:\a\biome\biome\crates\biome_text_size\src\range.rs:66:9
Thread Name: main
Message: assertion failed: start.raw <= end.raw

If the function are formatted correctly at the same indentation, biome detects that there is a syntax error.

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
  methods: {
   DoSmth() {

  }
//Note the indentation difference
-      doSomthelse() {
-      },
+  doSomthelse() {
+  },
  },
});
</script>

<template>
</template>

the snippet above gives the following correct syntax error:

App.vue:5:3 parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × expected `,` but instead found `doSomthelse`

    3 │ export default defineComponent({
    4 │   methods: {
  > 5 │    DoSmth() {
      │   ^^^^^^^^^^^
    6 │
    7 │   }

  i Remove doSomthelse


App.vue format ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × Code formatting aborted due to parsing errors. To format code with errors, enable the 'formatter.formatWithErrors' option.


Formatted 1 file in 2ms. No fixes applied.

Expected result

It should throw a vue syntax error

Code of Conduct

  • I agree to follow Biome's Code of Conduct

Metadata

Metadata

Assignees

No one assigned

    Labels

    A-ParserArea: parserL-JavaScriptLanguage: JavaScript and super languagesS-Bug-confirmedStatus: report has been confirmed as a valid bug

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions