[英]Eslint adds unnecessary space between braces, Prettier shows error
I'm using prettier and eslint with typescript.我在 typescript 中使用更漂亮的和 eslint。
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.当我编写一些代码并且由于原因不得不留下一个空的 function 时,Eslint 和 Prettier 努力在空函数的大括号之间添加和删除空格。
Prettier is removing the space while Eslint is adding it. Prettier 正在删除空间,而 Eslint 正在添加它。
What is expected:预期:
constructor(
@inject('UsersRepository')
private usersRepository: IUsersRepository,
) {}
const example = ({ variable }) => {
console.log(variable)
};
What I get after saving (Eslint fixing on save):保存后我得到什么(Eslint 修复保存):
constructor(
@inject('UsersRepository')
private usersRepository: IUsersRepository,
) { }
const example = ({ variable }) => {
console.log(variable)
};
Se the space between the constructor braces? Se构造函数大括号之间的空间? That gives me a
Delete `·` eslint(prettier/prettier)
error.这给了我一个
Delete `·` eslint(prettier/prettier)
错误。
When I save the file, or Prettier removes the space... then Eslint adds it again.当我保存文件时,或者 Prettier 删除了空间......然后 Eslint 再次添加它。
How can I solve this?我该如何解决这个问题?
EDIT: I want to keep the destructuring assignment space (eg ({ variable })
) but not on empty braces (eg {}
)编辑:我想保留解构赋值空间(例如
({ variable })
)但不是空括号(例如{}
)
Below, my .eslintrc.json
and prettier.config.js
下面,我的
.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',
};
I've had very similar error, but in my case default VSCode TypeScript formatter was messing with braces.我遇到了非常相似的错误,但在我的情况下,默认的 VSCode TypeScript 格式化程序弄乱了大括号。 In.vscode/settings.json add:
在.vscode/settings.json 中添加:
"javascript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": false,
"typescript.format.insertSpaceAfterOpeningAndBeforeClosingEmptyBraces": false,
You might also find useful option:您可能还会发现有用的选项:
"[typescript]": {
"editor.defaultFormatter": "dbaeumer.vscode-eslint"
}
You should use this in the settings file of vscode.你应该在 vscode 的设置文件中使用它。
"prettier.bracketSpacing": false
I had the exact same problem, where prettier stopped working all of a sudden.我遇到了完全相同的问题,prettier 突然停止工作。 Auto-format on save(vs code settings) adds a space for braces and linters threw an error on the same.
保存时的自动格式化(与代码设置相比)为大括号添加了一个空格,并且 linter 在相同的情况下引发了错误。 Spend a lot of time debugging this and did the below steps to fix my issue
花很多时间调试这个并执行以下步骤来解决我的问题
1: Re-install vscode prettier extension. 1:重新安装 vscode 更漂亮的扩展。
Go to vscode => cmd + p and type ext install esbenp.prettier-vscode
. Go 到 vscode => cmd + p 并输入
ext install esbenp.prettier-vscode
。
2: My vscode settings.json and prettier.js looks somewhat like this 2:我的vscode设置.json和prettier.js看起来有点像这样
vscode settings.json 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 Prettier.js
module.exports = {
semi: true,
trailingComma: 'none',
singleQuote: true,
printWidth: 80,
tabWidth: 2,
endOfLine: 'auto',
bracketSpacing: true,
proseWrap: 'always'
};
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:)我还没有开始在 typescript 中编码,但是当我做一个新的配置时:)
Happy coding快乐编码
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.