Prettier-vscode: Recently on some javascript files, prettier started to break the whole code

[THPubs]

Recently, me and my team started to get errors with prettier in vscode. Most of the time it works but sometimes for some files it breaks. Here's an example code before running prettier:

And here's after using prettier:

We are using prettier with eslint:

"devDependencies": {
  "babel-plugin-import": "^1.6.2",
  "cross-env": "^5.1.3",
  "eslint": "^3.19.0 || ^4.3.0",
  "eslint-config-airbnb": "^15.1.0",
  "eslint-plugin-import": "^2.7.0",
  "eslint-plugin-jsx-a11y": "^5.1.1",
  "eslint-plugin-react": "^7.1.0",
  "husky": "^0.14.3",
  "nsp": "^3.1.0",
  "prettier-eslint": "^8.2.0",
  "react-app-rewire-less": "^2.1.0",
  "react-app-rewired": "^1.3.5"
},

Any idea why it's happening?

[CiGit]

What's your file's languageId?
Without eslint does it fail too?

Any prettier config ? eslint config?

[THPubs]

Hi! The language is babel javascript. Doesn't have any special prettier config. But here is the eslint config:

{
  "env": {
    "browser": true,
    "es6": true,
    "node": true
  },
  "extends": "airbnb",
  "parser": "babel-eslint",
  "rules": {
    "no-use-before-define": [
      2,
      {
        "functions": false
      }
    ],
    "comma-dangle": ["error", "never"],

    "react/prop-types": 0,

    "global-require": 0,

    "react/jsx-filename-extension": [
      "error",
      {
        "extensions": [".js", ".jsx"]
      }
    ],

    "max-len": [2, 100, 4],

    "import/prefer-default-export": 0
  }
}

[CiGit]

And what language id does babel javascript correspond to?
Try be setting it to javascript

[THPubs]

@CiGit Just checked. Babel Javascript is javascript. Just did some investigation and looks like it's caused by prettier. Disabled prettier-eslint integration. It still messed up. Next tried eslint auto fix only. It worked fine. So looks like it's prettier. Any idea why?

[azz]

It is extremely unlikely that's prettier's output. Could you run yarn prettier path/to/file.js to check prettier's output?

[THPubs]

@azz Sorry for the late reply. It's a bit tricky to catch because it's not coming all the time. But I did something recently and I think it might have solved the issue. I had the vscode beautify plugin installed. Thought it might be interfering with prettier. So I removed it. So far I did not get the issue again. Need to test for a bit longer and see. So, for now, I will close the issue.

[samburgers]

Can also confirm this exact behaviour, and removing beautify fixes it. Thanks for posting

[sunnyday90210]

Thanks for this fixed my issue

[coleturner]

Stumbled upon this issue - another option is to remove the javascript language identifier from the Beautify-specific JS settings. This will allow Beautify to run on the other languages without colliding with Prettier on .js files

[revanthCopart]

Setting the language from Javascript to Javascript React fixed my issue.

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