Eslint adds unnecessary space between braces, Prettier shows error

Question

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',
};

Answer 1

Folks you can try this out. this had worked out for me ✅

Add the below config inside the .prettierrc.json file

{
  "bracketSpacing": false  // Default is true 
}

Replace .eslintrc.json configuration from this

{
  "extends": ["eslint:recommended", "prettier"],
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

To this

{
  "extends": ["eslint:recommended", "plugin:prettier/recommended"]
}

This is the recommended configuration by eslint-plugin-prettier: https://github.com/prettier/eslint-plugin-prettier#recommended-configuration

P.S: I thought both do the same job, but after adding a later config, it resolves the issue. I hope it worked out for you as well.

Answer 2

I had the exact same problem, where prettier stopped working all of a sudden. Auto-format on save(vs code settings) adds a space for braces and linters threw an error on the same. Spend a lot of time debugging this and did the below steps to fix my issue

1: Re-install vscode prettier extension.

Go to vscode => cmd + p and type ext install esbenp.prettier-vscode.

2: My vscode settings.json and prettier.js looks somewhat like this

vscode settings.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

I has a bad experience with prettier thanks to this post I managed to put together a nice settings config so Im sharing it here and hopefully it will ;help someone top.

"gatsbyhub.commands.build.enableTracing": true,
  "gatsbyhub.commands.build.graphqlTracing": true,
  "gatsbyhub.commands.develop.changeHost": "localhost",
  "window.zoomLevel": 0.6,
  "js/ts.implicitProjectConfig.checkJs": true,
  "js/ts.implicitProjectConfig.experimentalDecorators": true,
  "color-highlight.languages": [
    "*",
  ],
  "importCost.javascriptExtensions": [
    "\\.jsx?$",
  ],
  "html-css-class-completion.JavaScriptLanguages": [
    "javascript",
    "typescriptreact"
  ],
  "editor.tabSize": 2,
  "editor.renderWhitespace": "none",
  "editor.gotoLocation.multipleTypeDefinitions": "goto",
  "workbench.editor.enablePreviewFromCodeNavigation": true,
  "workbench.editor.enablePreviewFromQuickOpen": true,
  "debug.allowBreakpointsEverywhere": true,
  "debug.toolBarLocation": "docked",
  "blade.format.enable": true,
  "color-highlight.matchWords": true,
  "path-intellisense.showHiddenFiles": true,
  "path-intellisense.mappings": {
    "${workspaceFolder}": true,
    "${workspaceFolder}/gatsby": true,
  },
  "editor.formatOnSave": false,
  "editor.formatOnType": true,
  "workbench.colorCustomizations": {},
  "material-icon-theme.activeIconPack": "react_redux",
  "editor.semanticHighlighting.enabled": false,
  "editor.highlightActiveIndentGuide": false,
  "workbench.activityBar.visible": false,
  "javascript.format.enable": true,
  "javascript.autoClosingTags": true,
  "javascript.validate.enable": false,
  "javascript.format.semicolons": "insert",
  "javascript.suggest.jsdoc.generateReturns": true,
  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
  "javascript.preferences.quoteStyle": "double",
  "javascript.preferences.useAliasesForRenames": true,
  "javascript.suggest.autoImports": true,
  "javascript.updateImportsOnFileMove.enabled": "always",
  "javascript.format.insertSpaceAfterConstructor": true,
  "[javascriptreact]": {
    "editor.autoIndent": "advanced",
    "editor.autoClosingQuotes": "beforeWhitespace",
    "breadcrumbs.showVariables": true,
    "diffEditor.ignoreTrimWhitespace": true,
    "editor.tabSize": 2,
    "editor.useTabStops": true,
    "editor.formatOnPaste": false,
    "editor.formatOnSaveMode": "file"
  },
  "javascript.suggest.includeCompletionsForImportStatements": true,
  "javascript.format.insertSpaceBeforeAndAfterBinaryOperators": true,
  "javascript.format.insertSpaceAfterSemicolonInForStatements": true,
  "javascript.format.insertSpaceAfterKeywordsInControlFlowStatements": true,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": true,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingJsxExpressionBraces": true,
  "javascript.format.insertSpaceAfterOpeningAndBeforeClosingTemplateStringBraces": true,
  "typescript.validate.enable": true,
  "typescript.preferences.importModuleSpecifier": "non-relative",
  "typescript.format.insertSpaceAfterOpeningAndBeforeClosingNonemptyBrackets": true,

I haven't started coding in typescript yet but when I do lll male a new config :)

Happy coding

Answer 4

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"
}

Answer 5

You should use this in the settings file of vscode.

 "prettier.bracketSpacing": false