Eslint 在大括號之間添加了不必要的空格，Prettier 顯示錯誤

Question

我在 typescript 中使用更漂亮的和 eslint。

當我編寫一些代碼並且由於原因不得不留下一個空的 function 時，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

你應該在 vscode 的設置文件中使用它。

 "prettier.bracketSpacing": false

Answer 3

我遇到了完全相同的問題，prettier 突然停止工作。 保存時的自動格式化（與代碼設置相比）為大括號添加了一個空格，並且 linter 在相同的情況下引發了錯誤。 花很多時間調試這個並執行以下步驟來解決我的問題

1：重新安裝 vscode 更漂亮的擴展。

Go 到 vscode => cmd + p 並輸入ext install esbenp.prettier-vscode 。

2：我的vscode設置.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 4

由於這篇文章，我對更漂亮的體驗很糟糕，我設法整理了一個很好的設置配置，所以我在這里分享它，希望它會；幫助某人頂。

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

我還沒有開始在 typescript 中編碼，但是當我做一個新的配置時：）

快樂編碼