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.

Dearly

Answer 1

I had similar issues using ESLint and Prettier together in VS Code. After trying dozens of ways, the following configuration works for me.

ESLint and Prettier are installed globally on my machine.

I am using these extensions:

https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint

https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

My .eslintrc.json file looks like this:

{
"env": {
    "browser": true,
    "commonjs": true,
    "es6": true
},
"extends": ["eslint:recommended"],
"parserOptions": {
    "sourceType": "module"
},
"rules": {
    "indent": ["error", 4],
    "quotes": ["error", "single"],
    "semi": ["error", "always"],
    "no-console": "off"
}

}

In your VS Code, please go to Preference > Settings > User Settings and add the following lines:

"editor.formatOnSave": true,
"prettier.tabWidth": 4,
"prettier.eslintIntegration": true,
"prettier.stylelintIntegration": true

I am not using eslint-config-prettier or eslint-plugin-prettier and everything works fine for me.

Important: Please make sure you do not have any other automatic formatter (other than Prettier) extension installed.

Inhuman

Thank you. The change in VSCode user settings fixed this issue for me. – Tamalatamale

Answer 2

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"
]

Rambort

But if the Prettier is installed and set up, shouldn't we uninstall Beautify? – Isbell

@Isbell Beautify can format more than just .js, so usually we would like to keep it in order to handle all of the other file types – Rambort

Hmmm, isn't it that we use ESLint for JS files and Prettier for anything else? If this is true, why we still need the Beautify plugin? – Isbell

Answer 3

When using VSCode, Prettier and ESLint the same time you may have different conflicting rules.

Setting rules manually in VSCode and ESLint may have no effect, but try to do that first. Also, Prettier settings may be saved in its own config file - .prettierrc or some like that.

If no effect, then check these:

1. In dev dependencies is proper version installed [eslint-config-prettier][1]

   If you've used React/Vue/other-3d-party tool or source, you have to check that you're use NOT @vue/eslint-config-prettier version (see package.json and lock files)

2. In eslintrc file there is extends: ['prettier']. Same as the previous check there no library depended version specified.

Tidy

Answer 4

I had this issue after a VSCode update. I downgraded to the previous version and Prettier worked normally again.

Inflorescence

I tried thousands different setups and Prettier still doesn't work with scss files. But it works perfectly with ESLint together for JavaScript files. Some times I think people who think that Prettier is working for scss files, have forgotten that they have also installed Beautify and this is the one which format their scss files. – Isbell

Answer 5

The issue for me is that I had both Prettier and JS-CSS-HTML-formatter installed in VS Code. As soon as I uninstalled JS-CSS-HTML-formatter the issue went away.

Privateer

Answer 6

I had the same issue. I uninstalled the extension and it solved the problem.

Spindly