Search code examples
visual-studio-codeneovimprettier

Prettier formatting differs in VSCode and Neovim

This happens mostly due to ternary operators in javascript/typescript files. It looks something like this in Neovim:

intent={
    invoiceNumberError === ""
        ? Intent.NONE
        : existingVoteNumbers.length > 0
            ? Intent.DANGER
            : Intent.NONE
}

And in my VSCode, it looks something like:

intent={
    invoiceNumberError === ""
        ? Intent.NONE
        : existingVoteNumbers.length > 0
        ? Intent.DANGER
        : Intent.NONE
}

The ternary operator is formatted differently in terms of spacing. I'm just not sure what to do with this. I have a .prettierrc:

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": false,
  "printWidth": 80
}

This causes a change in the codebase and it will be included in the git diff. I want to prevent this since my team consists of neovim and vscode users, and we don't want these redundant code changes.

Solution

  • Turns out that this happens because my neovim's mason is using the latest version of prettier which is at 3.2.5, but VSCode's prettier is using 2.x versioning (which I gather from the github repo CHANGELOG). This causes some indentation difference between the two versions. So what I did was I just ran

    :MasonInstall [email protected] // Note: `2.8.8` is the latest version of `2.x

    and they are now in sync.