为何create-react-app默认缩进为2空格？Atom下如何改为4空格？

如何让你的React项目自动使用4空格缩进 #

既然你已经在Atom全局设置了4空格，但Create React App的默认配置会覆盖这个，有几个靠谱的方法可以搞定：

1. 配置项目的ESLint规则 #

Create React App自带ESLint检查，你只需要在项目根目录新建一个.eslintrc.json文件，写入以下内容：

{
  "extends": "react-app",
  "rules": {
    "indent": ["error", 4, { "SwitchCase": 1 }]
  }
}

保存后，Atom的ESLint插件会自动识别这个配置，帮你把缩进修正为4空格，而且还会在你写代码时实时检查，避免不符合规范的缩进。

2. 用EditorConfig统一项目缩进 #

在项目根目录创建.editorconfig文件，内容如下：

root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

然后在Atom里安装editorconfig插件，它会读取这个文件的设置，自动应用到当前项目，不管你全局设置是什么，项目级的配置会优先生效。

3. 针对Atom单独设置项目级缩进 #

如果你不想加配置文件，也可以直接在Atom里给这个项目单独设置：

• 打开项目中的任意JS/JSX文件
• 点击顶部菜单栏的Edit → Preferences → Editor
• 滚动到页面底部的「Scope Specific Settings」，选择当前文件的作用域（比如source.js.jsx）
• 把Tab Length改成4，勾选Soft Tabs（确保用空格而不是制表符）
  这样这个项目里的所有相关文件都会用4空格缩进了。

为什么Create React App默认用2空格缩进？ #

这个其实是遵循了React官方和前端社区的共识：

• React官方风格指南推荐：React团队在官方文档里明确建议使用2空格缩进，尤其是在JSX嵌套结构中，2空格不会让代码快速向右偏移，保持可读性的同时更紧凑。
• 社区协作的统一标准：绝大多数React开源项目（包括React核心仓库）都用2空格，这样开发者在不同项目间切换时不需要调整缩进习惯，降低协作成本。
• 依赖的ESLint配置影响：Create React App使用的eslint-config-react-app继承了Airbnb的ESLint规则，而Airbnb的前端风格指南也推崇2空格缩进，这就导致了默认的设置。

内容的提问来源于stack exchange，提问作者anon