biomejs / biome

A toolchain for web projects, aimed to provide functionalities to maintain them. Biome offers formatter and linter, usable via CLI and LSP.
https://biomejs.dev
Apache License 2.0
15.3k stars 475 forks source link

📝 arrow function with long type and single param without parens formats to invalid code #1905

Closed arilotter closed 8 months ago

arilotter commented 8 months ago

Environment information

CLI:
  Version:                      1.4.1
  Color support:                true

Platform:
  CPU Architecture:             x86_64
  OS:                           linux

Environment:
  BIOME_LOG_DIR:                unset
  NO_COLOR:                     unset
  TERM:                         "xterm-256color"
  JS_RUNTIME_VERSION:           "v21.5.0"
  JS_RUNTIME_NAME:              "node"
  NODE_PACKAGE_MANAGER:         "pnpm/8.10.5"

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

Workspace:
  Open Documents:               0

Configuration

{
  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
  "javascript": {
    "formatter": {
      "arrowParentheses": "asNeeded"
    }
  }
}

Issue information

Biome outputs invalid TS; the => is on a new line, that's not valid.

type InstanceID = string;
type MaybeCardWithAttachment = string;
function outerFunctionToForceIndent() {
    const cardWithAttachment: (id: InstanceID) => MaybeCardWithAttachment =
        id
    => {
        return `${id}test`;
    };
}

Playground link

https://codesandbox.io/p/devbox/biome-starter-cbs-rky6zq

Code of Conduct

togami2864 commented 8 months ago

biome playground: https://biomejs.dev/playground/?lineWidth=140&arrowParentheses=as-needed&unsafeParameterDecoratorsEnabled=false&allowComments=false&code=dAB5AHAAZQAgAEkAbgBzAHQAYQBuAGMAZQBJAEQAIAA9ACAAcwB0AHIAaQBuAGcAOwAKAHQAeQBwAGUAIABNAGEAeQBiAGUAQwBhAHIAZABXAGkAdABoAEEAdAB0AGEAYwBoAG0AZQBuAHQAIAA9ACAAcwB0AHIAaQBuAGcAOwAKAGYAdQBuAGMAdABpAG8AbgAgAG8AdQB0AGUAcgBGAHUAbgBjAHQAaQBvAG4AVABvAEYAbwByAGMAZQBJAG4AZABlAG4AdAAoACkAIAB7AAoACQBjAG8AbgBzAHQAIABjAGEAcgBkAFcAaQB0AGgAQQB0AHQAYQBjAGgAbQBlAG4AdAA6ACAAKABpAGQAOgAgAEkAbgBzAHQAYQBuAGMAZQBJAEQAKQAgAD0APgAgAE0AYQB5AGIAZQBDAGEAcgBkAFcAaQB0AGgAQQB0AHQAYQBjAGgAbQBlAG4AdAAgAD0ACgAJAAkAaQBkAAoACQA9AD4AIAB7AAoACQAJAHIAZQB0AHUAcgBuACAAYAAkAHsAaQBkAH0AdABlAHMAdABgADsACgAJAH0AOwAKAH0A&jsx=false

togami2864 commented 8 months ago

The error occurs due to a line break before the arrow. ref

We have two options:

Should we adjust our code to be compatible with Prettier🤔

Sec-ant commented 8 months ago

I think what OP is trying to say is the valid code like below will be formatted into invalid code?

type InstanceID = string;
type MaybeCardWithAttachment = string;
function outerFunctionToForceIndent() {
    const cardWithAttachment: (id: InstanceID) => MaybeCardWithAttachment = (
        id
    ) => {
        return `${id}test`;
    };
}

image

Playground Link.

togami2864 commented 8 months ago

@Sec-ant Nice catch! Maybe I misunderstood. @arilotter Could you provide your input? The playground link you attached seems empty.

arilotter commented 8 months ago

@Sec-ant Nice catch! Maybe I misunderstood. @arilotter Could you provide your input? The playground link you attached seems empty.

sec-ant has it nailed! biome formats the code into TS that doesn't compile, because it's illegal to have => on its own line.

fireairforce commented 8 months ago

I am willing to solve this issue~