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

Question

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

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

Answer 1

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

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

Answer 2

我添加了一个 .eslintrc （在项目根文件夹中，但它可能在 ./src 中，因为使用的 eslint 设置更接近于被检查的内容）具有以下规则（请注意 - 这些解析器/解析器选项规则似乎迅速改变）。 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 默认附带的任何嵌套/隐藏 eslint 设置。 我正在使用 VSCode，发现我必须重新打开文件才能显示更改（使用我使用的视觉助手，例如缩进指南）。

注意：编辑“SwitchCase”添加。如果没有这个，从今天开始，根据 create-react-app 默认值，case 不会在 switch 语句中缩进（视觉上与关键字“switch”在同一列中）。如果您愿意，您可以在“缩进”数组中省略该额外的对象。

Answer 3

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

http://editorconfig.org/

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

Answer 4

您可以完美地覆盖这些滥用设置（我将那些不适合您自定义的内容称为滥用，即使您投入了很长时间来处理它），

只需转到 VSCode -> 设置，在搜索框中输入“缩进”，然后找到“自动缩进”选项（“自动缩进”将出现在列表顶部）并将其设置为“无”。

这适用于“create-react-native”应用程序，VSCode for Mac 中的 Expo 将于 2021 年 9 月举行。

Answer 5

运行以下命令，（对于 VS Code）

首先在 VS Code 中安装 Prettier 扩展。

1. cd ~/my-project

   （转到当前目录并打开终端）

2. npm install --global prettier

3. npm install --save-dev prettier

4. npx prettier --write --tab-width 4 --single-quote "**/*"

然后重新打开 VS Code，更改应该会反映出来。

如果您发现安装命令 2 时出错，请使用此命令，

sudo npm install --global prettier

。

这将在发生问题时解决该问题。

Answer 6

如果是VSCode，进入文件-首选项-设置，找到“检测缩进”并取消选中。之后，检查“标签大小”。应该是数字4。