Eslint 在大括号之间添加了不必要的空格,Prettier 显示错误
Posted
技术标签:
【中文标题】Eslint 在大括号之间添加了不必要的空格,Prettier 显示错误【英文标题】:Eslint adds unnecessary space between braces, Prettier shows error 【发布时间】:2020-08-23 12:04:29 【问题描述】:我在 typescript 中使用 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',
;
【问题讨论】:
是this prettier setting 试过了,没用。更漂亮不是问题,因为它会删除空间,然后 eslint 添加它。如果我在 true 上使用此规则,它会保持原样。如果我在 false 上使用它,它会从解构和空括号中删除空格......但 eslint 会再次添加空格。 抱歉,您想要这个空间还是不想要它? 我想要它,除了空括号。抱歉不清楚。 不,你很清楚......只是我很慢:p 【参考方案1】:你应该在 vscode 的设置文件中使用这个。
"prettier.bracketSpacing": false
【讨论】:
或"bracketSpacing": false
在您的 .prettierrc 文件中【参考方案2】:
我遇到了非常相似的错误,但在我的情况下,默认的 VSCode TypeScript 格式化程序与大括号混淆。 在 .vscode/settings.json 添加:
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": false,
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": false,
您可能还会发现有用的选项:
"[typescript]":
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
【讨论】:
我再也没有遇到过这个问题,但会选择你的答案作为正确的答案,因为它似乎可以解决问题。【参考方案3】:感谢这篇文章,我对更漂亮的体验很糟糕
"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,
我还没有开始用打字稿编码,但是当我做一个新的配置时:)
愉快的编码
【讨论】:
【参考方案4】:我遇到了完全相同的问题,prettier 突然停止工作。保存时的自动格式化(与代码设置相比)为大括号添加了一个空间,并且 linter 在相同的情况下引发了错误。花了很多时间调试这个并执行以下步骤来解决我的问题
1:重新安装 vscode 更漂亮的扩展。
转到 vscode => cmd + p 并输入ext install esbenp.prettier-vscode
。
2:我的 vscode settings.json 和 prettier.js 看起来有点像这样
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'
;
【讨论】:
我的自动格式化随机坏了。在尝试了不同的 eslint 规则并使用我的 .prettierrc 文件后,没有任何效果。卸载并重新安装更漂亮的插件有效!谢谢!以上是关于Eslint 在大括号之间添加了不必要的空格,Prettier 显示错误的主要内容,如果未能解决你的问题,请参考以下文章