Vetur/Eslint/VS 代码 - 无法在 .vue 文件的括号之间设置空格

Question

我不知道如何为函数括号之间的空格设置配置。我已将其 everywhere 设置为 true，但是当我保存 .vue 文件时，该空间被删除 - 删除后它突出显示为错误 (Missing space between function parentheses)。它发生在script 部分。在.js 文件中添加了空格，但也 突出显示为错误，这次...Unexpected space between function parentheses?!在保存空间时添加了一些设置配置（我现在无法重新创建），然后在 .vue 文件中再次删除。

我的设置.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"
    }
}

我已经阅读了无数个问题，并在我在答案中找到的每个可能的设置中设置了函数括号之间的空格。 linting 过程仍然找到了一种方法来忽略所有这些设置并实施不同的设置。更不用说它突出显示与自动格式化不一致的错误。我还缺少其他设置吗？

Answer 1

试试这个：

npm install prettier@v1.19.1 --save-dev --save-exact

然后重新启动 VS Code。

Prettier 刚刚更新到 v2，如果您的项目没有在本地安装 prettier，它将使用 VS Code 的版本，这很可能是最新版本。在 prettier v2 中，space-before-function-paren 已成为默认设置，因此将应用于所有未安装本地版本的 prettier pre v2 的项目。对我来说，使用任何配置组合似乎都不起作用——就像更漂亮的只是忽略了所有这些。希望这会有所帮助。

Answer 2

Prettier v2 之前，似乎不支持 space-before-function-paren 规则。所以我们应该关闭上面的规则来解决冲突。

试试这个

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

在项目根目录下的 ESLint 配置文件（如 .eslintrc.js）中。

然后我们应该在 VS Code 中的 settings.json 中添加以下内容。

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

最后但同样重要的是，在 VS Code 中禁用 Vetur 扩展可能是更好的选择。