Prettier/VSCode Eslint weird format/syntax breaking bug

Question

Sometimes when I startup VSCode and I save an JS file, everything gets messed up.

example

From: To: On save

What I found out:

When I change a VSCode User setting (something related to the prettier plugin | anything (I normally change the prettier.eslintIntegration but it could be that any change in the setting resolves it)) it stops breaking on save.

Possible related environment details

// Part of .eslintrc
{
    parser: 'babel-eslint',
    extends: ['airbnb', 'prettier'],
    plugins: ['prettier'],
    rules: {
        'prettier/prettier': 'error'
    }
    ...
}

// .prettierrc.yml
printWidth: 80
tabWidth: 4
useTabs: false
semi: false
singleQuote: true
trailingComma: es5
bracketSpacing: true
jsxBracketSameLine: false
arrowParens: always

// Part of my VSCode 'User Settings' file
"javascript.format.enable": false,
"javascript.validate.enable": false,
"prettier.eslintIntegration": true,
"typescript.format.enable": false

// Possible related modules from my package.json
"babel-eslint": "^8.2.1",
"eslint": "^4.16.0",
"eslint-config-airbnb": "^16.1.0",
"eslint-config-prettier": "^2.9.0",
"eslint-import-resolver-webpack": "^0.8.4",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-prettier": "^2.6.0",
"eslint-plugin-react": "^7.5.1",
"prettier-eslint": "^8.8.1",

VSCode Extension suspects:

dbaeumer.vscode-eslint
esbenp.prettier-vscode

If any other (debugging) information needs to be provided, please shoot.

Answer 1

For me the issue was that the Beautify extension performed the formatting in .js files, and it didn't know how to handle JSX syntax.

The solution was to prevent Beautify from formatting Javascript files.

In order to do so you need to add the following setting to your User Settings in VSCode (reachable using ctrl+shift+p and selecting Preferences: Open User Settings):

"beautify.ignore": [
    "**/*.js"
]