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

[Dealerpriest]

• [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]

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

[Dealerpriest]

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]

@Dealerpriest This worked for me:

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