Prettier-vscode: Inconsistent results when running prettier cli and prettier-vscode

[cskeppstedt]

I have an issue where prettier-vscode will format the code in one way, and using the prettier cli will format the code in another way. Here's a dummy snippet that illustrates the issue, where the upper pane is the result of formatting the document with prettier-vscode, and the lower pane is the result of running the prettier cli:

In my case, the bottom version (produced by the prettier cli) is the "correct" format, since our eslint setup agrees with that formatting. Our project also has pre-commit hooks that will run the prettier cli on the staged files. For the record, my .eslintrc is:

{
  "extends": ["prettier"],
  "plugins": ["prettier"],
  "rules": { "prettier/prettier": "error" },
  "env": { "es6": true, "node": true, "browser": false }
}

From package.json:

  "devDependencies": {
    "eslint": "^4.5.0",
    "eslint-config-prettier": "2.4.0",
    "eslint-plugin-prettier": "2.4.0",
    "prettier": "1.6.1"
  }

I have disabled all other extensions, only prettier-vscode is being used. As you may see in the screenshot, both the cli and extension uses prettier 1.6.1.

[cskeppstedt]

Here's the snippet in text format, if needed for testing:

function getMessage(longNameParam1, longParam2, longParam3, longParam4, longParam5) {
  return [longNameParam1, longParam2, longParam3, longParam4, longParam5].join(" - ");
}

module.exports = getMessage;

[cskeppstedt]

Also a gif demonstrating format on save:

[CiGit]

Without eslint and your setup I've the following output ([email protected] in VSCode)

function getMessage(
    longNameParam1,
    longParam2,
    longParam3,
    longParam4,
    longParam5
) {
    return [
        longNameParam1,
        longParam2,
        longParam3,
        longParam4,
        longParam5,
    ].join(' - ');
}

module.exports = getMessage;

My eslint knowledge is poor, but isn't config-prettier conflicting with plugin-prettier ?

As an aside, prettier's cli won't read your eslint config.
VSCode may if you enabled eslintIntegration.

[cskeppstedt]

Hey @CiGit, thanks for taking the time to look at this issue!

I had uninstalled both the eslint binary and editor plugin to avoid any conflicts. However it turned out that the root cause was an .editorconfig file in a parent folder that allowed line lengths of 120. I removed the js part in that .editorconfig and now prettier-vscode works just like the prettier cli – finally!

Btw as far as I've understood with eslint, the convention is that eslint-plugin-X brings in the rule definitions, while eslint-config-X dictates if the rules should be on/off/error/warn-level etc, but this might be wrong.

Again, thanks for looking into it, and I apologize since it was an issue with my project setup rather than the vscode extension – but hopefully my finding could help someone else with similar issues.

[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.