Vue中的ESLint：函数括号前缺少空格

Question

我用npm和vuejs / vue-cli创建了一个项目。 我的package.json文件中有eslint条目。

我在运行代码时收到警告：

  

警告编译时有1条警告
  5:57:37 AM

     

✘http://eslint.org/docs/rules/space-before-function-paren丢失   函数括号前的空格src / components / HomePage.vue：142：9         节目（） {              ^

     

✘1个问题（1个错误，0个警告）

该行中的空格应该怎么做？

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

Answer 1

如错误所示，在函数名称后和括号前缺少空格：

  

函数括号前缺少空格

您的代码中有一条ESLint规则，规定您的函数必须采用以下格式：

myFunction () { ... }

您的函数格式如下：

myFunction() { ... }

如果在show和()之间添加空格，则应该可以解决此问题。这是正确的代码段：

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

Answer 2

您可以在括号前添加空格，或（首选选项），更新.eslintrc.js文件以表示样式首选项。

我建议您在.eslintrc.js中添加此规则：

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

文档：

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

Answer 3

it works with prettier eslint integration.

Answer 4

如果我们使用匿名函数，那么它会显示错误。要解决这个问题，请使用箭头函数。