question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

formats js with flow code incorrectly when enabled to format on save

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:2
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
capajcommented, May 7, 2018

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.

1reaction
CiGitcommented, May 7, 2018

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Why does Prettier not format code in VS Code? - Stack Overflow
Select File -> Preferences -> Settings ( Ctrl + comma ) and search form formatter; Set Prettiers as Default formatter. enter image ...
Read more >
v2.1.10 - Extension 'ESlint' cannot format file · Issue #1086
My ESLint plugin updated a few hours ago in VSC and it no longer is able to format .js files. It was working...
Read more >
How to configure Prettier and VSCode - Gleb Bahmutov
You can configure JavaScript code auto-formatting with Prettier to work per-project. ... Nothing happens on save; Code formatting is wrong.
Read more >
Configure ESLint, Prettier, and Flow in VS Code for React ...
We want VS Code to format our code using Prettier after saving a file. ... formatOnSave": true,// Enable/disable default JavaScript ...
Read more >
Formatting problem jsx file for react - Genuitec
2) We noticed that if the files are opened in the JavaScript :: CodeMix editor, then the formatter does destroy the code as...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found