英文:
eslint react to format curly braces
问题
无法找到任何React eslint规则来美化花括号之间的内容。
<div>
{
items.map(i => (<div>{i}</div>))
}
</div>
应该看起来像这样：
<div>
{
items.map(i => (<div>{i}</div>))
}
</div>
英文:
I can't find any react eslint rule to prettify the content between the curly braces
<div>
{
items.map(i => (<div>{i}</div>))
}
</div>
It should look like this
<div>
{
items.map(i => (<div>{i}</div>))
}
</div>
答案1
得分: 0
这部分内容的翻译如下：
虽然这不是特定于React的，但ESLint缩进规则（https://eslint.org/docs/latest/rules/indent）也处理JSX中的缩进。
不幸的是，它不在eslint:recommended中，默认情况下需要在配置中自行启用，如下所示：
// .eslintrc.json
{
// ... 其余的配置
"rules": {
"indent": ["error"] // 或者 "warn"，根据您的喜好
}
}
默认情况下是4个空格缩进，但您也可以将其设置为使用2个空格 [ "error", 2 ] 或制表符 [ "error", "tab" ]。
在涉及格式而不是实际代码错误时，我建议使用Prettier或另一种专门用于格式化的工具，而不是ESLint。请参阅ESLint团队的这篇文章（https://typescript-eslint.io/linting/troubleshooting/formatting）。
风格规则已经冻结 - 我们不会再添加任何更多的选项到风格规则中。我们已经了解到无法满足每个人的个人偏好，而且大多数规则已经有了很多难以理解的选项。风格规则与间距、约定和一般上不强调错误或更好的做法的任何内容相关。更新于2021-01-29：我们在README中明确表示，我们仍然会支持新增的ECMAScript功能。
英文:
While it's not specific to React, the ESLint indent rule (https://eslint.org/docs/latest/rules/indent) also handles indentation in JSX.
It's not unfortunately not in eslint:recommended, so you need to enable it yourself in your configuration like so:
// .eslintrc.json
{
// ... rest of your configuration
"rules": {
"indent": ["error"] // or "warn" if you prefer
}
}
The default is 4-space indentation, but you can also set it to use 2 spaces ["error", 2] or tabs ["error", "tab"].
When it comes to formatting rather than actual code errors, I would recommend using Prettier or another tool specifically made for formatting, instead of ESLint. See this article by the ESLint team (https://typescript-eslint.io/linting/troubleshooting/formatting)
> Stylistic rules are frozen - we won’t be adding any more options to stylistic rules. We’ve learned that there’s no way to satisfy everyone’s personal preferences, and most of the rules already have a lot of difficult-to-understand options. Stylistic rules are those related to spacing, conventions, and generally anything that does not highlight an error or a better way to do something. Update 2021-01-29: We clarified in the README that we will still support newly-added ECMAScript features.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论