为什么 'create-react-app' 总是给我 2 个而不是 4 个缩进空格？

Question

每次我运行 'create-react-app'，我的初始化项目都使用 2 个而不是 4 个缩进空格。如何自动转换为4个标签？

我将 Atom 用作文本编辑器。在 'config.cson' 下，制表符长度始终设置为 4。

Answer 1

没有办法告诉 create-react-app 使用 4 个空格而不是 2 个缩进。这是 React 的创建者标准化的样式。

您能做的最好的事情就是进行全局搜索并在源文件中替换两个空格并将其替换为四个空格。

Answer 2

具体 create-react-app 不确定，但这应该有助于在应用程序范围内配置缩进

http://editorconfig.org/

您可以选择您的编辑器并对项目进行必要的配置更改，以在整个项目范围内保持通用间距和标识 - 无论谁在使用哪个编辑器。

Answer 3

我添加了一个 .eslintrc（在项目根文件夹中，但它可能在 ./src 中，因为使用的 eslint 设置更接近被检查的内容）遵守规则（请注意 - 这些 parser/parserOption 规则似乎变化很快）。 https://eslint.org/docs/rules/indent

{
    "parser": "babel-eslint",
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    },
    "rules": {
        "indent": ["error", 4, { "SwitchCase": 1 }]
    }
}

然后，我运行使用此命令：eslint ./src/ --fix

基本上，我覆盖了默认情况下 create-react-app 附带的任何 nested/hidden eslint 设置。我正在使用 VSCode 并发现我必须重新打开文件才能显示更改（使用可视化助手，如缩进指南）。

注意：针对“SwitchCase”添加进行了编辑。如果没有这个，到今天为止，根据 create-react-app 默认值，案例在 switch 语句中没有缩进（在视觉上与关键字“switch”在同一列中）。如果您愿意，可以在“缩进”数组中省略那个额外的对象。

Answer 4

你可以完美地覆盖那些滥用设置（我称滥用为一些不适合你定制的东西，即使你花了很长时间来处理它），

只需转到 VSCode -> 设置，在搜索框中键入 'Indentation' 并找到选项 'Auto Indent'（'Auto Indent' 将出现在列表顶部) 并将其设置为 'none'.

这适用于 'create-react-native' 应用程序，在 VSCode 的 Expo 中 Mac 是 2021 年 9 月。

为什么 'create-react-app' 总是给我 2 个而不是 4 个缩进空格？

Why 'create-react-app' always gives me 2 instead of 4 indentation spaces?

indentation

reactjs

atom-editor