Vetur/Eslint/VS Code - can't set space between parenthesis for .vue files

Question

I can't figure out how to set the configuration in for the space between function parentheses. I've set it everywhere to true, but when I save a .vue file, the space is removed - after it is removed it is highlighted as error (Missing space between function parentheses). It happens in script section. In .js files spaces are added, but also highlighted as error, this time... Unexpected space between function parentheses?! There was some configuration of settings (which I'm not able to recreate now) when on save the space was added for a moment and then removed again in .vue files.

my settings.json

"vetur.format.defaultFormatter.js": "prettier", // tried both prettier and typescript
// "vetur.format.defaultFormatter.js": "vscode-typescript", // tried both prettier and typescript
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"typescript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatterOptions": {
    "prettier": {
        "singleQuote": true,
        "spaceBeforeFunctionParen": true,
        "eslintIntegration": true,
    },
    "vscode-typescript": {
        "singleQuote": true,
        "spaceBeforeFunctionParen": true,
        "eslintIntegration": true,
    }
},

.eslintrc.js

module.exports = {
    root: true,
    env: {
        node: true
    },
    'extends': [
        'plugin:vue/essential',
        '@vue/standard'
    ],
    rules: {
        'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
        'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',          
        "space-before-function-paren": ["error", "always"], //setting this to 'never' removes the error highlight in vue files, not js files
    },
    parserOptions: {
        parser: 'babel-eslint',
        sourceType: "module"
    }
}

I've read a zillion questions and set the space-between-function-parentheses in every possible setting that I found in the answers. Still the linting process finds a way to ignore all those settings and implement a different one. Not to mention that it highlights errors not consistent with the auto-formatting. Is there any other setting that I am still missing?

Answer 1

Try this:

npm install [email protected] --save-dev --save-exact

and then restart VS Code.

Prettier just recently updated to v2 and if your project doesn't have prettier installed locally it will use VS Code's version, which is most probably the latest version. In prettier v2 the space-before-function-paren has become a default and hence will be applied on all your projects that don't have a local version of prettier pre v2 installed. For me using any config combination didn't seem to work - it's like prettier just ignored all of them. Hope this helps.

Answer 2

Prior to Prettier v2, It seems to not support space-before-function-paren rule. So We should turn off the rule above to resolve conflict.

Try this

module.exports = {
  rules: {
    'space-before-function-paren': 'off'
  }
}

in an ESLint configuration file(such as .eslintrc.js) located in root directory of project.

Then we should add following to settings.json in VS Code.

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

Last but not least, Disabling Vetur extension in VS Code might be a better choice.