VSCode formatting when it shouldn't be (prettier, javascript)

Question

I've resolved almost all conflicts between ESLint and Prettier. However, I have recently ran into one that I am stumped on.

const data = await userManager
    .getUsers()
    .orderBy('joinedDate', 'desc')
    .limit(20)
    .get();

I highly prefer this format above, and so does prettier it seems.

Problem: On saving the file, this gets formatted back to:

const data = await userManager.getUsers().orderBy('joinedDate', 'desc').limit(20).get();

Where I am confused is that prettier is my formatter on save within vscode for Javascript.

"editor.defaultFormatter": null,
"[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
},

However, the Linting error I get when it's all on one line is... prettier saying there's an error.

So, it's :

• prettier saying there's an error.
• I "Quick Fix" it back to the multi-line fix using prettier
• But when I "save" the document, it goes back to the one line by using the formatter - prettier?

---

What tells me there's a conflict with something else running/formatting is I get a "flash" on save between a formatter actually putting it back correctly (prettier?), but then it gets formatted a 2nd time back to the single long line.

But, I only have 1 formatter?

Answer 1

After some digging and experimenting, this seems to be the combination of settings to allow it to work properly with prettier and es6 linter.

// vscode's settings.json
//
    "editor.formatOnSave": false,
    "editor.defaultFormatter": null,
    "[javascript]": {
        "editor.defaultFormatter": "esbenp.prettier-vscode"
    },
    "editor.codeActionsOnSave": {
        "source.fixAll": true
    },