npmeslint95% confidence\u2191 55

Eslint adds unnecessary space between braces, Prettier shows error

Full error message
I'm using prettier and eslint with typescript.

When I write some code and have to leave an empty function for reasons, Eslint and Prettier struggle adding and removing spaces between the empty function's braces.

Prettier is removing the space while Eslint is adding it.

What is expected:

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

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

What I get after saving (Eslint fixing on save):

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

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

Se the space between the constructor braces? That gives me a Delete `·` eslint(prettier/prettier) error.

When I save the file, or Prettier removes the space... then Eslint adds it again.

How can I solve this?

EDIT: I want to keep the destructuring assignment space (eg ({ variable })) but not on empty braces (eg {})

Below, my .eslintrc.json and 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',
};

I've had very similar error, but in my case default VSCode TypeScript formatter was messing with braces. In .vscode/settings.json add: "javascript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": false, "typescript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": false, You might also find useful option: "[typescript]": { "editor.defaultFormatter": "dbaeumer.vscode-eslint" }

API access

Get this solution programmatically \u2014 free, no authentication.

curl https://depscope.dev/api/error/ff7a89034995cd93c852d64115a37a38fc4bc86892e8dabc52abd8dd6f1534dd
hash \u00b7 ff7a89034995cd93c852d64115a37a38fc4bc86892e8dabc52abd8dd6f1534dd
Eslint adds unnecessary space between braces, Prettier shows… — DepScope fix | DepScope