javascriptvisual-studio-codeprettier-vscode

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


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 :


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?


Solution

  • 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
        },