Prettier/VSCode Eslint weird format/syntax breaking bug

prettier-eslint
eslint vscode
prettier not working vscode
prettier eslint vscode
vue/eslint-config-prettier
npm prettier-config
prettier file types
prettier shared config

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.

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.

[BUG] not working with eslint 6 · Issue #870 · prettier/prettier-vscode , Hi, When using the option eslint-integration, Prettier is not working and output the following error: That's why it's actually broken. So basically all you Different formatting with respect to prettier-eslint-cli for Typescript #891. There are multiple problems with format selection: Because it gets re-printed and you select nested code, it will move everything to the left; if forgot to select a { meaning you have "invalid" code selected because it can not be printed in 1 go, it will fail.

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

Configure Prettier and ESLint in Visual Studio Code, We will cover how to install and configure both Prettier and ESLint within well handle both the code quality errors and syntax format violations. Edit the src/​index.js file and paste the below code - be sure to include the weird tabbing. code that breaks a rule but we want ESLint to ignore this error - such  Seems Prettier is not supporting JSON formatting because every time I get errors if I'm trying to format JSON. Example try to format this code: {"name": "Benas"} So why it's not disabled by default? I need to do this by myself to disable

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

How to properly set up Nuxt with ESLint and Prettier in VSCode, Configuring ESLint is not that hard, integrating custom rules, code formatting and is seen as an error), prettier itself (to properly format code) and eslint-plugin-​vue (adds By installing Vetur VSCode can now highlight the syntax of .vue files and by of each tool leading to unnecessary dependencies and weird formatting​. CiGit changed the title How to revert to previous version How to revert to previous version ( prettier-eslint ) Jan 25, 2018 Edke mentioned this issue Oct 16, 2018 VIM stops working when another instance of Code starts #3141

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.

I don't like prettier : javascript, Except, we're already using eslint to enforce the basics, so my coworkers' syntax is fine. Continue this thread. I didn't get this part The fix feature of eslint is pretty great and can auto-format/fix much of your code according to your ESLint config. prettier is a more powerful automatic formatter What does it mean "prettier is a more powerful au

Eslint prettier slow, Prettier - Code formatter, ESLint for VSCode, stylelint and the most common The Prettier code extension helps you format your code so you don't have to the latest CSS syntax including custom properties and level 4 selectors Bugs make Now for the weird part: Running npm list -g --depth=0 to see the current state of  The order of configs are important to ensure the new shareable config rules override and disable all formatting rules already set within ESLint. Prettier will now automatically format our code on each file save and these changes won't conflict with ESLint. (Optional) Enable the ESLint Prettier plugin. There is a Prettier plugin for ESLint.

Visual Studio Code Can Do That?, Why is Visual Studio Code (VS Code) so popular, and do we really Simply start typing your Emmet syntax in an HTML or CSS file and let the VS Code has great ESLint integration via the ESLint extension, but You can invoke Prettier on the file by using the “Format Document” An error occurred. Having the trailing comma option set to all sets it on JSON entries as well. This is causing syntax errors and I have to disable prettier to edit JSON files unless I turn of trailing commas.

prettier-vscode, Default behavior for ESLint is to add a space before function parens. Using the latest Prettier 2.0 CLI produces different formatting to the vscode extension and installed just Prettier (3.20.0), using TSX with latest version of Typescript the format breaks Yes, but bare with me this may sound a bit weird. Issue Type: Bug. So why choose the "Prettier style guide" over any other random style guide? Because Prettier is the only "style guide" that is fully automatic. Even if Prettier does not format all code 100% the way you'd like, it's worth the "sacrifice" given the unique benefits of Prettier, don't you think?

Comments
  • Thank you. The change in VSCode user settings fixed this issue for me.
  • But if the Prettier is installed and set up, shouldn't we uninstall Beautify?
  • @user1941537 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
  • 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?
  • 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.