Prettier does not play well with vue/recommended

[duckness]

Version

3.1.1

Reproduction link

https://github.com/duckness/linttest

Node and OS info

Node 10.11.0 / yarn 1.12.1 / Windows 10

Steps to reproduce

1. vue create a new app and select the Eslint + Prettier option
2. Change plugin:vue/essential to either plugin:vue/recommended or plugin:vue/strongly-recommended in your ESLint config
3. run yarn lint

What is expected?

All lint errors auto-fixed with no error message.

What is actually happening?

Lint errors cannot be fixed and it will throw an error every time.

[LinusBorg]

Might be because of this?

https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/script-indent.md#important-note

[duckness]

Nope that didn't work. Prettier recently had an update https://prettier.io/blog/2018/11/07/1.15.0.html to format html in vue files, this might be the cause.

[duckness]

prettier issue: prettier/prettier#5363

[andylima]

The way that issue is being handled by Prettier devs (and other issues related to Vue support) is very telling — Prettier is not interested in supporting any Vue / React / Angular Style Guides that go against its style.

…And its style, as you know, tends to be non-configurable.

Vue ESLint rules are much more useful for us Vue devs than whatever "special" formatting the Prettier people may think is best for us.

…That's why I stopped using Prettier, and suggest you do the same.

For this reason, I suggest that Vue CLI stops using / suggesting eslint-config-prettier by default. Prettier is NOT the best for Vue devs.

[duckness]

I agree, I have dropped prettier in my project for now

[haoqunjiang]

Seems to have been fixed by #2932

[visualjerk]

If someone runs into this issue, try reinstalling @vue/eslint-config-prettier.

yarn remove @vue/eslint-config-prettier
yarn add @vue/eslint-config-prettier --dev

[bys1123]

Wow, this fixed my problem.

[hvitis]

Update prettier workspace settings and delete or overwrite your main settings.json that can keep breaking your local linting

[AchlysLove]

HI, if you are going to use webstorm with the same setup. Go to the Preference/Language & Framework/JavaScript/Prettier section, for "Run for files" input, use "{**/,}.{js,ts,jsx,tsx,vue}"(+ vue)