Eslint 在大括号之间添加了不必要的空间，Prettier 显示错误

Question

我在打字稿中使用 prettier 和 eslint。

当我编写一些代码并且由于某些原因不得不留下一个空函数时，Eslint 和 Prettier 努力在空函数的大括号之间添加和删除空格。

Prettier 正在删除空间，而 Eslint 正在添加它。

什么是预期：

  constructor(
    @inject('UsersRepository')
    private usersRepository: IUsersRepository,
  ) {}

const example = ({ variable }) => {
    console.log(variable)
};

保存后我得到了什么（Eslint 修复保存）：

  constructor(
    @inject('UsersRepository')
    private usersRepository: IUsersRepository,
  ) { }

const example = ({ variable }) => {
    console.log(variable)
};

Se 构造函数大括号之间的空间？这给了我一个Delete `·` eslint(prettier/prettier)错误。

当我保存文件时，或者 Prettier 删除了空间......然后 Eslint 再次添加它。

我该如何解决这个问题？

编辑：我想保留解构赋值空间（例如({ variable })）而不是空大括号（例如{}）

下面，我.eslintrc.json和prettier.config.js

{
  "env": {
    "es6": true,
    "node": true,
    "jest": true
  },
  "extends": [
    "airbnb-base",
    "plugin:@typescript-eslint/recommended",
    "prettier/@typescript-eslint",
    "plugin:prettier/recommended"
  ],
  "globals": {
    "Atomics": "readonly",
    "SharedArrayBuffer": "readonly"
  },
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "ecmaVersion": 2018,
    "sourceType": "module"
  },
  "plugins": [
    "@typescript-eslint",
    "prettier"
  ],
  "rules": {
    "prettier/prettier": "error",
    "class-methods-use-this": "off",
    "@typescript-eslint/camelcase": "off",
    "no-useless-constructor": "off",
    "object-curly-spacing": [
      "error",
      "always"
    ],
    "@typescript-eslint/no-unused-vars": [
      "error",
      {
        "argsIgnorePattern": "_"
      }
    ],
    "@typescript-eslint/interface-name-prefix": [
      "error",
      {
        "prefixWithI": "always"
      }
    ],
    "import/extensions": [
      "error",
      "ignorePackages",
      {
        "ts": "never"
      }
    ]
  },
  "settings": {
    "import/resolver": {
      "typescript": {}
    }
  }
}

module.exports = {
  singleQuote: true,
  trailingComma: 'all',
  arrowParens: 'avoid',
};

Answer 1

我遇到了非常相似的错误，但在我的情况下，默认的 VSCode TypeScript 格式化程序弄乱了大括号。在 .vscode/settings.json 添加：

"javascript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": false,
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": false,

您可能还会找到有用的选项：

"[typescript]": {
    "editor.defaultFormatter": "dbaeumer.vscode-eslint"
}

Answer 2

我遇到了完全相同的问题，Prettier 突然停止工作。保存时自动格式化（相对于代码设置）会为大括号添加一个空格，而 linter 会在相同的情况下引发错误。花费大量时间进行调试并执行以下步骤来解决我的问题

1：重新安装vscode prettier扩展。

转到 vscode => cmd + p 并输入ext install esbenp.prettier-vscode。

2：我的 vscode settings.json 和 prettier.js 看起来有点像这样

vscode 设置.json

{
   "editor.codeActionsOnSave": {
   "source.organizeImports": true,
   "source.fixAll.eslint": true,
   "source.fixAll.tslint": true,
   "source.fixAll.stylelint": true
  },
  "css.validate": false,
  "files.autoSave": "off",
  "typescript.updateImportsOnFileMove.enabled": "always",
  "javascript.updateImportsOnFileMove.enabled": "always",
  "editor.wordWrap": "on",
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": false,
  "[typescriptreact]": {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  },
 "[typescript]": {
   "editor.defaultFormatter": "esbenp.prettier-vscode",
   "editor.formatOnSave": true
  }
 }

Prettier.js

 module.exports = {
  semi: true,
  trailingComma: 'none',
  singleQuote: true,
  printWidth: 80,
  tabWidth: 2,
  endOfLine: 'auto',
  bracketSpacing: true,
  proseWrap: 'always'
};

Answer 3

你应该在 vscode 的设置文件中使用它。

 "prettier.bracketSpacing": false