CODEWITHSUNDEEP
vue.jsvisual-studio-codeeslintvetur
Eggon
Eggon

Reputation: 2356

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

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?

Upvotes: 5

Views: 7055

Answers (3)

spidey
spidey

Reputation: 141

I also had same exact issue with vetur and ESLint extns. Following in settings.json fixed it. By default it was prettier.

"vetur.format.defaultFormatter.js": "prettier-eslint",

Upvotes: 1

liuliang
liuliang

Reputation: 422

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.

Upvotes: 3

caweidmann
caweidmann

Reputation: 466

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.

Upvotes: 3

Related Questions