Prettier-vscode: formats js with flow code incorrectly when enabled to format on save

[capaj]

I have this file:

// @flow

export default class OrganisationModel extends TimestampedModel {
  async findMembers(
    search?: string
  ): Promise<{ users: UserModel[], groups: GroupModel[] }> {
    const usersQuery = UserModel.query()
      .select('users.*')
      .where('is_archived', false)
      .andWhere('organisation_id', this.id)
    if (search) {
      const s: string = search
      usersQuery.andWhere(function() {
        this.where('email', 'ilike', `%${s}%`).orWhere(
          'username',
          'ilike',
          `%${s}%`
        )
      })
    }
    usersQuery.orderBy('username', 'asc')

    const groupsQuery = GroupModel.query()
      .select('groups.*')
      .andWhere('organisation_id', this.id)
    if (search) {
      groupsQuery.andWhere('name', '~*', `^${search}`)
    }
    groupsQuery.orderBy('name')

    const [users, groups] = await Promise.all([usersQuery, groupsQuery])
    return { users, groups }
  }

}

whenever I save the file while I have format on save enabled I get:

// @flow

export default class OrganisationModel extends TimestampedModel {
  async findMembers(search?: string) : Promise < {
    users: UserModel[],
    groups: GroupModel[]
  } > {
    const usersQuery = UserModel
      .query()
      .select('users.*')
      .where('is_archived', false)
      .andWhere('organisation_id', this.id)if (search) {
        const s : string = search
        usersQuery.andWhere(function () {
          this
            .where('email', 'ilike', `%${s}%`)
            .orWhere('username', 'ilike', `%${s}%`)
        })
      }
      usersQuery
      .orderBy('username', 'asc')

      const groupsQuery = GroupModel
      .query()
      .select('groups.*')
      .andWhere('organisation_id', this.id)if (search) {
        groupsQuery.andWhere('name', '~*', `^${search}`)
      }
      groupsQuery
      .orderBy('name')

      const [users,
        groups] = await Promise.all([usersQuery, groupsQuery])return {users, groups}
  }

}

Now this file obviously is not correct because you can't just write if without putting it on a new line.

My prettier config is:

{
  "singleQuote": true,
  "semi": false
}

When I run formatting manually or via the CLI I get the correct output. It's only doing it when I have it enabled on save.

[clarkie]

Do you get the same in non-flow files? I have a feeling that this has something to do with the new vscode version (stab in the dark!)

[CiGit]

Format Document and formatOnSave take the exact same code path from our perspective. You may have an other extension which makes things _on save_

[capaj]

thanks for info. I'll disable all of my extensions except prettier and try again.

[capaj]

finally figured it out! it was this extension: https://marketplace.visualstudio.com/items?itemName=HookyQR.beautify#review-details

I'd be pretty interested to know how vscode decides who should be formatting a file and if it allows multiple formatters to run-who decides the order?
It would be awesome to get some kind of a warning when I have two formatters running at once for a single file.

@clarkie yeah something must have changed in 1.23 because before this version I only had issues like that very rarely.

actually I had two extensions for formatting code which were taking precedence over prettier. Will try to open a PR for a readme warning for new users.

[TomIsion]

@capaj If I have multi extensions for formatting code in VS Code, then I turn on format on save, so can I set the precedence of extensions to format my code ?

[github-actions[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.