[BUG] not working with eslint 6

[jimblue]

Hi,

When using the option eslint-integration, Prettier is not working and output the following error:

ENOENT/home/dev/frontend/webpacker/app/index.js:: no such file or directory, open '/home/dev/projects/frontend/node_modules/eslint/lib/linter.js'

I've check in my node_modules and effectively, linter.js doesn't exist.

It was previously working with eslint version 5 because linter.js did exist at this path here.

But in eslint version 6, linter.js has been moved in a subfolder here.

That's why it's actually broken. So basically all you have to do is to modify the require:

from:

require /node_modules/eslint/lib/linter.js

to:

require /node_modules/eslint/lib/linter/index.js

Cheers

[jakeleventhal]

Need this ASAP!

[chengjia080787]

any luck on this? it's a critical issue to be honest

[mbalaam]

I’ve ended up removing the extension and I am using https://github.com/prettier/eslint-plugin-prettier instead.

[tcodes0]

running "prettier.eslintIntegration": false as a work around

[asbjornh]

to:

require /node_modules/eslint/lib/linter/index.js

Maybe change to require('node_modules/eslint/lib/linter') instead? Node's module resolution would then check both linter.js and linter/index.js. If the import looked like that in the first place we wouldn't have an issue now 😃

[asbjornh]

@jimblue Where is that require call coming from? I can't see that this package imports eslint anywhere in the source and eslint isn't listed in package.json either. I tried grep'ing the plugin folder and nothing really looks suspicious.

In ~/.vscode/extensions/esbenp.prettier-vscode-1.9.0:

$ grep -r "/linter" .
./node_modules/tslint/lib/test.js:var linter_1 = require("./linter");
./node_modules/tslint/lib/runner.js:var linter_1 = require("./linter");
./node_modules/tslint/lib/index.js:tslib_1.__exportStar(require("./linter"), exports);
./node_modules/tslint/lib/index.d.ts:export * from "./linter";
./node_modules/tslint/lib/tslintCli.js:var linter_1 = require("./linter");
./node_modules/prettier-tslint/dist/format.js:  // Adapted from: https://github.com/palantir/tslint/blob/5.12.0/src/linter.ts
./node_modules/eslint/lib/config/autoconfig.js:    Linter = require("../linter"),
./node_modules/eslint/lib/testers/rule-tester.js:    Linter = require("../linter"),
./node_modules/eslint/lib/api.js:const Linter = require("./linter");
./node_modules/eslint/lib/cli-engine.js:    Linter = require("./linter"),

[asbjornh]

I tried creating a fresh project to reproduce, and I'm now getting a different error message:

Failed to load plugin 'prettier' declared in 'CLIOptions'<project-path>/index.js:: Cannot find module 'eslint-plugin-prettier'
Require stack:
- /__placeholder__.js

eslint-plugin-prettier is most definitely installed. For anyone interested in debugging this, here is a setup for reproducing this:

  "dependencies": {
    "eslint": "^6.1.0",
    "eslint-config-prettier": "^6.0.0",
    "eslint-plugin-prettier": "^3.1.0",
    "prettier": "^1.18.2"
  }

eslintrc:

{
  "plugins": ["prettier"],
  "extends": ["prettier"],
  "rules": {
    "prettier/prettier": ["warn"]
  }
}

Running with prettier.eslintIntegration: true and selecting Format Document With from the command palette in an empty js file should result in the above error message.

[asbjornh]

Oh, this seems to be caused by a known issue with prettier-eslint (https://github.com/prettier/prettier-eslint/issues/222). I guess we'll have to wait for them to fix that first :)

[ntotten]

As mentioned above, there is an upstream dependancy on the prettier eslint module. It is not yet compatible with eslint 6. see: prettier/prettier-eslint#222

[ntotten]

After investigating these issues we are considering removing support for linters in version 2.0.0. Instead of incorporating the linters into this extension the proposal is to use the ESLint or TSLint extensions along with this extension. Please let us know what you think by commenting on #901.

By using the official extensions issues like these will be centralized and fixed more quickly as the authors of those extensions are focusing solely on those linters.

[lacsaba]

Actually, I have the same issue with "prettier.eslintIntegration" set to false. I tried eslint 6.0.1. and 6.1.0 without any success. It only works if I downgrade eslint to 5.x

Edit: it turned out that the issue was caused by opening a parent folder with two projects in it. https://github.com/microsoft/vscode-eslint/issues/696#issuecomment-514369361

[jakeleventhal]

@ntotten is your recommendation to stop using prettier for vs code if you use eslint as your linter?

[asbjornh]

@jakeleventhal If you were using vscode-eslint or vscode-tslint for autoformatting, you wouldn't really need prettier-vscode unless I'm missing something?

[ntotten]

@jakeleventhal Not at all. In my experience if you use the VS Code ESLint and the VSCode Prettier extensions together you can use both for what they are made for - Prettier for formatting, ESLint for linting.

[EthanNYT]

@ntotten I don't want two separate configs though. It's nice to define linting and formatting rules in my ESLint config and have Prettier interpret them from there.

[asbjornh]

@jakeleventhal Not at all. In my experience if you use the VS Code ESLint and the VSCode Prettier extensions together you can use both for what they are made for - Prettier for formatting, ESLint for linting.

But if you have eslint-config-prettier and eslint-plugin-prettier in your eslint config, wouldn't using the auto fix option with vscode-eslint have the same result as running prettier-vscode?

Edit: And if so, I don't see what you'd use this plugin for if you also want to enforce formatting in a shared project

[ehaynes99]

@ntotten Essentially, that means throwing away the entire functionality of eslint --fix. I don't see auto formatting and formatting rules to be disparate concerns. It's worse than just having 2 configs. Prettier breaks hundreds of eslint rules, including some found in all 3 of the major eslint presets. You have to pick one or the other.

https://github.com/prettier/eslint-config-prettier claims to

let you use your favorite shareable config without letting its stylistic choices get in the way when using Prettier.

Respectfully disagree. They're not "getting in the way", they're the entire purpose of a preset that has rules beyond outright syntax errors.

I want to stress that I'm not trying to be combative. This combination has been incredible, and allows me -- for the first time in my entire career -- to actually break builds to enforce standards. That's just too hard a sell to the majority of dev teams if I can't automate it.

@asbjornh Not the same thing. The config turns off eslint rules that prettier breaks. It doesn't teach eslint to be as good as prettier at its strengths like line breaks, wrapping, nesting, etc.

[mbalaam]

@ehaynes99 Have you taken into account https://github.com/prettier/eslint-plugin-prettier which I was under the impressions ran all the prettier formatting via eslint?

[bradzacher]

It's worth noting that eslint-plugin-prettier will trigger a full prettier parse and format cycle for every single file, within the existing eslint parse and lint cycle.

This means that it doubles the parsing effort done during your eslint run, on top of also having to diff and report errors on the output if it is different. If you're running auto fixers then every fix will trigger a file change, which will trigger the eslint-plugin-prettier run (parsing the file yet again).

This can have significant impact on eslint performance compared to running the two separately, esp if you're regularly running full lint cycles on a large codebase.

prettier-eslint is a much better solution because the file is parsed and formatted exactly once by prettier, before eslint runs - saving a lot of potential reparses and lint cycles.

[jakeleventhal]

@ntotten @asbjornh

As @ehaynes99 and @EthanNYT both mentioned, l want to still keep the functionality of having a shared eslintconfig between my Prettier and eslint CLI for running --fix.

I use airbnb as my base eslint config

It seems the only viable option is adding support for eslint 6+ This is kind of a deal breaker for me if it can't be fixed.

[asbjornh]

@jakeleventhal I agree! I don’t see myself using this plugin without that integration.

[YuriScarbaci]

still not working, this is a deal breaker for me and my team too, if it gets to choosing between prettier and eslint having separate configurations that must be kept in sync to work as intended and losing the prettier extension and run eslint --fix on save, no doubts the choice will be losing (saddly) the prettier extension.

[ntotten]

Due to the huge amount of bugs, linting support has been removed in version 2.0.0. See the documentation on the recommended configuration: https://github.com/prettier/prettier-vscode#vscode-eslint-and-tslint-integration

[jakeleventhal]

@ntotten so we should find another formatter then if we want to use eslint 6.0+

[asbjornh]

RIP

[ntotten]

@jakeleventhal If you want to use the eslint-prettier integration then, yes you would have to find a new option. If you want to use eslint with prettier the recommended way you can still use this extension - https://prettier.io/docs/en/integrating-with-linters.html

Unfortunately, with limited resources on this project maintaining the ESLint integration is not possible and my preference is to focus on improving the core features. See #922 for discussion.

[ntotten]

Okay, I am going to relent on this slightly. We'll keep the integrated linters, but I am going to mark the configuration as deprecated and encourage people to move to use the alternative approaches.

We may move to remove them entirely in the future or if the bugs get fixed perhaps we can find a way to keep them.

[ntotten]

Here is a good article explaining the type of setup that is recommended going forward: https://dorshinar.me/linting-your-react+typescript-project-with-eslint-and-prettier

[ntotten]

More discussion also in #922

[YuriScarbaci]

Until this is fixed in the extension if anyone is relying on the eslint-vscode extension and wishes to setup a keybinding to "format" (well, fixing with eslint, but in most cases it's formatting anyway) you could set a keybindg in your vscode with "shift+alt+f" (or whatever you wish) listening to eslint.executeAutofix

for more info about this refeer to https://github.com/Microsoft/vscode-eslint/issues/70

[mihaiwww]

How I've sorted it after having super huge frustrations with Prettier stopping working.

VS Code -> View -> Command Palette, type: Format Document With, then Configure Default Formatter... and then choose Prettier - Code formatter.

This sorted the problem for me magically. It looks that VS Code had other options for formatting not only Prettier but did not show any error or notification so you can choose from.

I hope it helps others too!

[Salles-FA]

3.6.0 and 3.7.0 are ok! But it seems like the same problem is back in 3.8.0 today. Or even a similar problem.

Can you guys take a look?

Output with 3.6.0 and 3.7.0:

[INFO - 2:02:11 PM] Prettier Options:
{
  "arrowParens": "avoid",
  "bracketSpacing": true,
  "endOfLine": "auto",
  "htmlWhitespaceSensitivity": "css",
  "insertPragma": false,
  "jsxBracketSameLine": false,
  "jsxSingleQuote": true,
  "printWidth": 120,
  "proseWrap": "preserve",
  "quoteProps": "as-needed",
  "requirePragma": false,
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "none",
  "useTabs": false,
  "vueIndentScriptAndStyle": false,
  "filepath": "c:\\somefile.ts",
  "parser": "typescript"
}

Output with 3.8.0:

[INFO - 1:54:38 PM] Prettier Options:
    {
      "filepath": "c:\\somefime.ts",
      "parser": "typescript",
      "useTabs": false,
      "tabWidth": 2
    }

[Salles-FA]

Same problem with 3.11.0 here.

[ntotten]

ESLint 6 is NOT supported by this extension at the moment. I won’t spend time on this until the upstream libraries officially support ESLint 6. Once https://github.com/prettier/prettier-eslint/issues/222 is resolved I will work on this bug.

[uniquejava]

Auto format on save suddenly NOT WORK in recent days, I have to format document with keyboard :( Uninstall vscode-eslint fixed auto format on save issue!

[kebot]

vscode-eslint recently suggests using editor.codeActionsOnSave, and I found it doesn't work well with editor.formatOnSave because it runs eslint fix first then prettier. What I want is prettier then eslint fix.

Then I add editor.action.formatDocument to codeActionsOnSave and disable formatOnSave, everything works fine for me now.

This is my current config, tested on MacOS with:

VSCode: 1.41.1 prettier-vscode: 3.18.0 vscode-eslint: 2.0.11

{
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true,
    "editor.action.formatDocument": true
  }
}

[JoelAzevedo]

How I've sorted it after having super huge frustrations with Prettier stopping working.

VS Code -> View -> Command Palette, type: Format Document With, then Configure Default Formatter... and then choose Prettier - Code formatter.

This sorted the problem for me magically. It looks that VS Code had other options for formatting not only Prettier but did not show any error or notification so you can choose from.

I hope it helps others too!

I can't thank you enough. I was going almost crazy with the settings. It actually magically solved it.

Thank you x100

[ntotten]

It seems like prettier-eslint is mostly a dead project so it is unlikely this will ever get fixed. I would suggest switching to the recommended approach of integrating ESLint and Prettier

[rohit-gohri]

I couldn't get @kebot's workaround to work on the latest extension and vscode versions. So I published a small extension to run 'Format Document' as a codeAction:

https://github.com/rohit-gohri/vscode-format-code-action/

Along with the latest VS Code update, which allows setting order of codeActionsOnSave, this removes the need for prettier-eslint to specify the order of commands in VS Code. We can use the prettier-vscode and vscode-eslint extensions separately and just define the order in vscode settings.

Example here: https://github.com/prettier/prettier-vscode/issues/1277#issuecomment-621175180

[zmeyc]

@ntotten There's another project effective-prettier-vscode, which is similar to prettier-eslint. It runs prettier, then eslint, then stylelint:

https://marketplace.visualstudio.com/items?itemName=sebastian-software.effective-prettier-vscode

https://github.com/sebastian-software/effective-prettier https://github.com/sebastian-software/effective-prettier-vscode

yarn add --dev @effective/prettier

In .code-workspace:

"editor.defaultFormatter": "sebastian-software.effective-prettier-vscode"

Switched to it today because prettier-eslint stopped working, works well so far.

[ntotten]

Linting integration has been removed from this extension. If you want to run prettier and ESlint together you should use the ESLint extension instead. See: https://github.com/prettier/prettier-vscode#linter-integration