Vetur doesn't seem to run eslint --fix when using the setting prettier-eslint

gunhaxxor commented 4 years ago

[x] I have read through docs
[x] I have searched through existing issues
[x] I have read FAQ

Info

Platform: Win
Vetur version: 0.24.0
VS Code version: 1.45.1

Problem

I have disabled all my extensions. I have uncommented all my user settings. I have made a fresh install of Vetur extension, and Eslint extension.

These are my only settings as per Vetur documentation:

{
    "eslint.validate": [
        "javascript",
        "javascriptreact",
        "vue"
    ],
    "vetur.format.defaultFormatter.js": "prettier-eslint",
}

As you can see in the settings, I want to make use of prettier-eslint, which according to Vetur documentation should run prettier followed by eslint --fix when format is performed.

I have added the following rule to the file .eslintrc.js:

"quotes": [2, 'single']

Thus I expect Vetur to format my .vue files with single quotes. This is not the case. What am I doing wrong? This is my complete .eslintrc.js (the other parts where added by vue-cli when creating the project):

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint"
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
    "quotes": [2, 'single']
  }
};

Note: I do get linting errors on double quotes reported in the editor as shown by the following screenshot:

But curiously enough, I also get linting error on the single quote (even though the rule is set to use single quotes in .eslintrc.js):

The fact that the editor gives lint error on both single quotes and double quotes is very peculiar.

If I run the format document command on the file in the screenshot it will change line 13 from 'Home' to "Home". The rest is left unchanged.

Reproducible Case

Disable all extensions
Comment out all your settings in settings.json
(re-)install Vetur and Eslint
add the same settings as the code snippet above
create a new project with vue-cli with vue create your-name
- choose whatever settings you want in the creation wizard. I chose eslint-prettier with lintOnSave.

yoyo930021 commented 4 years ago

Have you add prettier config file for singleQuote? https://prettier.io/docs/en/configuration.html

gunhaxxor commented 4 years ago

I don't see why I would need a prettier config? Shouldn't prettier first run with defaults if no config is found? Then eslint applies --fix afterwards which should apply the rules set in .eslintrc.js? As described here: https://github.com/prettier/prettier-eslint#this-solution

Maybe I've misunderstood the procedure?

rubjo commented 4 years ago

@Dealerpriest This worked for me:

  "editor.formatOnSave": false,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }

vuejs / vetur