'ESLint in Vue : Missing space before function parentheses [closed]

I created a project with npm and vuejs/vue-cli. I have eslint entries in my package.json file.

I got a warning when running my code :

WARNING Compiled with 1 warnings
5:57:37 AM

✘ http://eslint.org/docs/rules/space-before-function-paren Missing space before function parentheses src/components/HomePage.vue:142:9 show() { ^

✘ 1 problem (1 error, 0 warnings)

what should i do with the space in this line?

export default {
  el: '#skills',
  props: {
    skill: Object,
    selectedId: Number
  },
  computed: {
    show() { //in this line
      return this.skill.id === this.selectedId
    }
  },
...
}
vue.jsnpmwebpackeslint


Solution 1:[1]

You may either add the space before the paren or (preferred option) update your .eslintrc.js file to represent your style preferences.

I recommend you add this rule in .eslintrc.js:

rules: {
  'space-before-function-paren': ['error', {
    anonymous: 'always',
    named: 'never',
    asyncArrow: 'always'
  }]
}

The Docs:

https://eslint.org/docs/rules/space-before-function-paren#require-or-disallow-a-space-before-function-parenthesis-space-before-function-paren

Solution 2:[2]

Try setting vetur.format.defaultFormatter.js to prettier-eslint.

If you're using TypeScript, you may need to set vetur.format.defaultFormatter.ts to prettier-tslint instead.

enter image description here

Solution 3:[3]

If we are using anonymous function then it is showing error. To solve this use arrow function.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Seth Falco
Solution 3 Shashank Singh

Related Questions