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.

Inconsistent results when running prettier cli and prettier-vscode

See original GitHub issue

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:

prettier code vs 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.

Issue Analytics

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

github_iconTop GitHub Comments

3reactions
cskeppstedtcommented, Apr 12, 2018

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.

0reactions
github-actions[bot]commented, Apr 13, 2020

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Inconsistent results when running prettier cli and prettier-vscode
Another thing to try is make sure prettier is installed in the project by running npm i prettier -D , then your script...
Read more >
Prettier is giving inconsistent results on different machines
1 Answer 1 · npx prettier --version to check what version installed in node_modules/ . (in my case versions from package.json and one...
Read more >
How to configure Prettier and VSCode - Gleb Bahmutov
You can configure JavaScript code auto-formatting with Prettier to work per-project. This allows you to get a consistent formatting without ...
Read more >
Options - Prettier
If you change any options, it's recommended to do it via a configuration file. This way the Prettier CLI, editor integrations and other...
Read more >
How to setup ESLint and Prettier with VS Code and VueJS
The goal is to have linting errors show up in your editor as live feedback, and be able to fix formatting errors automatically...
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