Prettier-eslint: VS Code Integration Unclear

[Dimomir]

Hi I was wondering if you could provide some clarification on integrating prettier-eslint with VS Code.

I can find Prettier on the VS Code marketplace where it states

prettier.eslintIntegration (default: false) - JavaScript and TypeScript only

Use prettier-eslint instead of prettier. Other settings will only be fallbacks in case they could not be inferred from eslint rules.

However when I look through the README of prettier-eslint I don't seem to understand how I can integrate prettier-eslint into VS Code.

Is it possible that I have it autoFixOnSave with prettier and then have the result passed through to eslint?

Also does it autoFormat JSX files too?

Thank you for your time and help!

[azz]

"prettier.eslintIntegration": true will tell prettier-vscode to use its bundled version of prettier-eslint to do the formatting, so you've found the right setting.

Is it possible that I have it autoFixOnSave with prettier and then have the result passed through to eslint?

If you also set "editor.formatOnSave": true, then it will do exactly that.

Also does it autoFormat JSX files too?

Sure does!

[Dimomir]

Hi @azz
thank you for your prompt response!

So to iterate, the steps to get Prettier-vscode extension working with prettier-eslint on VS Code are:

• install Prettier VS code plugin
• npm install --save-dev prettier-eslint
• Go into VS Code settings and set "prettier.eslintIntegration": true

Did I get this right?

[azz]

The VS code plugin bundles it in so you don't need to install it, but yes.

[Dimomir]

Thank you!
Apart from the above just for anyone else that might stumble upon this, I also included
"editor.formatOnSave": true, in my User Settings in VS Code and it all works 👌

Awesome work guys

[HaoyangFan]

Hi I just want to confirm that as long as I have installed the VSCode Plugin for Prettier and set "prettier.eslintIntegration": true in User Setting, and also turns on the formatOnSave option on?

Do I need to add anything to my eslintrc as well?