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.

Conflict with prettier

See original GitHub issue

Tell us about your environment

  • ESLint Version: 7.31.0 (was reproducible on 7.29.0 too)
  • Node Version: v14.17.2
  • npm Version: 6.14.13

What parser (default, @babel/eslint-parser, @typescript-eslint/parser, etc.) are you using? babel-eslint@10.1.0

Please show your full configuration:

package.json
{
  "scripts": {
    "lint-fix": "eslint --fix problem.js"
  },
  "devDependencies": {
    "eslint": "^7.31.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-plugin-prettier": "^3.4.0",
    "prettier": "^2.3.2",
    "prettier-eslint": "^13.0.0"
  },
  "dependencies": {
    "babel-eslint": "^10.1.0"
  }
}


Configuration
module.exports = {
  plugins: ['prettier'],
  extends: [
    'eslint:recommended',
    "plugin:prettier/recommended"
  ],
  parser: 'babel-eslint'
};

.prettierrc
{
  "singleQuote": true,
  "jsxSingleQuote": true,
  "semi": true,
  "printWidth": 120,
  "tabWidth": 2
}

What did you do? Please include the actual source code causing the issue, as well as the command that you used to run ESLint.

I’m trying to run eslint --fix problem.js to fix following code:

if (true) {
  const isReproducible = !!1 ?
    ['apple', 'banana', 'orange', 'pineapple', 'apple', 'banana', 'orange', 'pineapple']
    : ['apple', 'banana', 'orange', 'pineapple'];
}


What did you expect to happen?

I expected eslint --fix to not add syntax errors to the file

What actually happened? Please include the actual, raw output from ESLint.

if (true) {
  const isReproducible = 1 ?
    ? ['apple', 'banana', 'orange', 'pineapple', 'apple', 'banana', 'orange', 'pineapple']
    : ['apple', 'banana', 'orange', 'pineapple'];
}
eslint --fix output

/home/strrife/Projects/eslint-repro/problem.js
  3:5  error  Parsing error: Unexpected token

  1 | if (true) {
  2 |   const isReproducible = 1 ?
> 3 |     ? ['apple', 'banana', 'orange', 'pineapple', 'apple', 'banana', 'orange', 'pineapple']
    |     ^
  4 |     : ['apple', 'banana', 'orange', 'pineapple'];
  5 | }
  6 | 

✖ 1 problem (1 error, 0 warnings)

It looks like the no-extra-boolean-cast somehow conflicts with the prettier config. I have experienced similar issues previously when formatting rules were conflicting with prettier. Disablign them made sense, but it is not the case here since prettier would not be fixing no-extra-boolean-cast.

Fixing the file manually and running esling --fix again works just fine.

Also, fixing the following piece of code:

const isReproducible = !!1 ?
  ['apple', 'banana', 'orange', 'pineapple', 'apple', 'banana', 'orange', 'pineapple']
  : ['apple', 'banana', 'orange', 'pineapple'];

does not create syntax errors.

Thanks, best regards, Alexander

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:6 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
mdjermanoviccommented, Aug 7, 2021

This looks like a known bug in eslint-plugin-prettier. ESLint prevents conflicts by not applying overlapping fixes, but each individual fix should be complete (should produce valid code after applying) and thus independent of other fixes, which isn’t always the case with fixes that eslint-plugin-prettier provides: https://github.com/prettier/eslint-plugin-prettier/issues/65#issuecomment-339224115.

0reactions
nzakascommented, Aug 7, 2021

Rules don’t know what other rules are doing. We can’t possibly guarantee that every rule created by a third party will work correctly with core ESLint rules. I’d suggest following up with the prettier folks.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to make ESLint work with Prettier avoiding conflicts and ...
First of all you have to install ESLint plugin in VS Code. Either you can use the extension tab in VS Code or...
Read more >
ESLint rule conflicts with Prettier rule - Stack Overflow
I want to use ESLint for finding errors in Javascript code and Prettier for formatting all languges. But it seems that we could...
Read more >
Integrating with Linters - Prettier
Most stylistic rules are unnecessary when using Prettier, but worse – they might conflict with Prettier! Use Prettier for code formatting concerns, ...
Read more >
Conflicts between ESLint and Pretttier : r/neovim - Reddit
From your ESLint config, it looks like it's already set up to integrate with Prettier. So, you should be able to remove coc-prettier...
Read more >
How to use Prettier with ESLint - Robin Wieruch
That's it. You are ready to use Prettier and ESLint in your project without worrying about any conflicts. ESLint knows about all your...
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