Vue中的ESLint：函数括号前缺少空格[关闭]答案

【问题标题】：ESLint in Vue : Missing space before function parentheses [closed]Vue中的ESLint：函数括号前缺少空格[关闭]
【发布时间】：2019-02-21 22:01:05
【问题描述】：

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

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

警告编译时有 1 个警告
上午 5 点 57 分 37 秒

✘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
    }
  },
...
}

【问题讨论】：

标签： vue.js npm webpack eslint

【解决方案1】：

尝试将vetur.format.defaultFormatter.js 设置为prettier-eslint。

如果您使用的是 TypeScript，则可能需要将 vetur.format.defaultFormatter.ts 设置为 prettier-tslint。

【讨论】：

对我来说，使用vscode-javascript 和vscode-typescript 效果最好。
非常感谢这个答案 ;)

【解决方案2】：

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

【讨论】：

【解决方案3】：

您可以在括号前添加空格或（首选选项）更新您的 .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

【讨论】：

【解决方案4】：

如错误所述，您在函数名称之后和括号之前缺少一个空格：

函数括号前缺少空格

您的代码中有一条 ESLint 规则规定您的函数必须像这样格式化：

myFunction () { ... }

你的函数格式如下：

myFunction() { ... }

如果您在 show 和 () 之间添加一个空格，它应该可以解决问题。这是正确的 sn-p：

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

【讨论】：